Bar Charts — dc-charts

Methods
centerBar
alwaysUseRounding
barPadding
gap
outerPadding

Accepts
Boolean
Boolean
Number
Number
Number

Default
false
false
0
2
0.5

Method Descriptions
whether bar chart will render each bar centered around the data position on the x-axis
set whether rounding is enabled when bars are centered(no effect if bars are not centered)
set spacing between bars as fraction of bar size(Valid values are between 0-1)
set fixed gap(in px) between bars
set outer padding on ordinal bar chart(has no effect on non-ordinal charts)

This is a basic Ordinal Bar Chart

barChart01
              .dimension(ageGroupDimension)
              .group(ageGroupDimension.group())
              .width($(barChart01.anchor()).parent().width())
              .height(200)
              .x(d3.scaleBand())
              .xUnits(dc.units.ordinal)
              .yAxisLabel("Count")
              .xAxisLabel("Age Bracket");

This is a basic Numerical Bar Chart

barChart02
              .dimension(ageDimension)
              .group(ageGroup)
              .width($(barChart02.anchor()).parent().width())
              .height(200)
              .x(d3.scaleLinear().domain([15, 70]))
              .yAxisLabel("Count")
              .xAxisLabel("Age");

barChart03
              .dimension(ageGroupDimension)
              .group(ageGroupDimension.group())
              .width($(barChart01.anchor()).parent().width()/2)
              .height(200)
              .x(d3.scaleBand())
              .xUnits(dc.units.ordinal)
              .yAxisLabel("Count")
              .xAxisLabel("Age Bracket")
              .barPadding(.5);

.barPadding: - Shows when hovering over a bar.

barChart04
              .dimension(ageGroupDimension)
              .group(ageGroupDimension.group())
              .width($(barChart01.anchor()).parent().width()/2)
              .height(200)
              .x(d3.scaleBand())
              .xUnits(dc.units.ordinal)
              .yAxisLabel("Count")
              .xAxisLabel("Age Bracket")
              .gap(20);

.gap: - Get or set the spacing between bars as a fraction of bar size


                barChart05
                    .dimension(genderDimension)
                    .group(genderGroup)
                    .width($(barChart05.anchor()).parent().width())
                    .height(200)
                    .yAxisLabel("Count")
                    .xAxisLabel("Sex")
                    .x(d3.scaleOrdinal())
                    .xUnits(dc.units.ordinal)
                    .gap(50);

.gap: - Manually set fixed gap (in px) between bars


                barChart06
                    .dimension(genderDimension)
                    .group(genderGroup)
                    .width($(barChart06.anchor()).parent().width())
                    .height(200)
                    .yAxisLabel("Count")
                    .xAxisLabel("Sex")
                    .x(d3.scaleOrdinal())
                    .xUnits(dc.units.ordinal)
                    .barPadding(0.1)
                    .outerPadding(2);

.outerPadding: - Get or set the outer padding on an ordinal bar chart
- Will pad the width by padding * barWidth on each side of the chart

barChart07
            .dimension(ageDimension)
            .group(ageDimensionGroup)
            .width($(barChart07.anchor()).parent().width())
            .height(200)
            .x(d3.scaleLinear().domain([17, 71]))
            .yAxisLabel("Count")
            .xAxisLabel("Age")
            .centerBar(true);

.centerBar: - Manually set fixed gap (in px) between bars

barChart08
            .dimension(ageDimension)
            .group(ageDimensionGroup)
            .width($(barChart08.anchor()).parent().width())
            .height(200)
            .x(d3.scaleLinear().domain([17, 71]))
            .yAxisLabel("Count")
            .xAxisLabel("Age")
            .centerBar(true)
            .round(function(n) { return Math.floor(n) + 0.5; })
            .alwaysUseRounding(true);

barChart09
            .dimension(genderDimension)
            .group(genderGroup)
            .width($(barChart09.anchor()).parent().width())
            .height(200)
            .x(d3.scaleBand())
            .xUnits(dc.units.ordinal)
            .y(d3.scaleLinear().domain([0, 600]))
            .on('renderlet', chart => {
              ...
              })
            .on('postRedraw', function (chart, filter) {
              let chartBars = chart.selectAll('.bar')._groups[0];
              });

barChart10
            .dimension(genderDimension)
            .group(genderGroup)
            .width($(barChart10.anchor()).parent().width())
            .height(200)
            .x(d3.scaleBand())
            .xUnits(dc.units.ordinal)
            .y(d3.scaleLinear().domain([0, 600]))
            .label(function (d) {
              let all = ndx.groupAll().reduceCount().value();
              return d.data.value + " of " + all;});