dc.js

Class: BarChart

BarChart

Concrete bar chart/histogram implementation.

Examples:

new BarChart(parent [, chartGroup])

Create a Bar Chart

Parameters:
Name Type Argument Description
parent String | node | d3.selection | CompositeChart

Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection. If the bar chart is a sub-chart in a Composite Chart then pass in the parent composite chart instance instead.
chartGroup String <optional>

The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Mixes In:
Source:
Example
// create a bar chart under #chart-container1 element using the default global chart group
var chart1 = new BarChart('#chart-container1');
// create a bar chart under #chart-container2 element using chart group A
var chart2 = new BarChart('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = new BarChart(compositeChart);

Classes

BarChart

Methods

alwaysUseRounding( [alwaysUseRounding])

Set or get whether rounding is enabled when bars are centered. If false, using rounding with centered bars will result in a warning and rounding will be ignored. This flag has no effect if bars are not centered. When using standard d3.js rounding methods, the brush often doesn't align correctly with centered bars since the bars are offset. The rounding function must add an offset to compensate, such as in the following example.

Parameters:
Name Type Argument Default Description
alwaysUseRounding Boolean <optional>
 false
Source:
Returns:
Type
Boolean | BarChart
Example
chart.round(function(n) { return Math.floor(n) + 0.5; });

barPadding( [barPadding])

Get or set the spacing between bars as a fraction of bar size. Valid values are between 0-1. Setting this value will also remove any previously set gap. See the d3 docs for a visual description of how the padding is applied.

Parameters:
Name Type Argument Default Description
barPadding Number <optional>
 0
Source:
Returns:
Type
Number | BarChart

centerBar( [centerBar])

Whether the bar chart will render each bar centered around the data position on the x-axis.

Parameters:
Name Type Argument Default Description
centerBar Boolean <optional>
 false
Source:
Returns:
Type
Boolean | BarChart

gap( [gap])

Manually set fixed gap (in px) between bars instead of relying on the default auto-generated gap. By default the bar chart implementation will calculate and set the gap automatically based on the number of data points and the length of the x axis.

Parameters:
Name Type Argument Default Description
gap Number <optional>
 2
Source:
Returns:
Type
Number | BarChart

outerPadding( [padding])

Get or set the outer padding on an ordinal bar chart. This setting has no effect on non-ordinal charts. Will pad the width by padding * barWidth on each side of the chart.

Parameters:
Name Type Argument Default Description
padding Number <optional>
 0.5
Source:
Returns:
Type
Number | BarChart