Bar 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

20's': 10430's': 20240's': 19250's': 19460's': 20470's': 10420's'30's'40's'50's'60's'70's'Age Bracket020406080100120140160180200Count
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

24: 1325: 1426: 2027: 1528: 1729: 2530: 1831: 1832: 1933: 3134: 2235: 2336: 1537: 2138: 2039: 1540: 1341: 2142: 1843: 2344: 1945: 2346: 1447: 2548: 1549: 2150: 2251: 2252: 2453: 1454: 1555: 1856: 2357: 1858: 2259: 1660: 1561: 1762: 1863: 2864: 2165: 2066: 3367: 1768: 1969: 1670: 2071: 2172: 2173: 1874: 1775: 71520253035404550556065707580Age051015202530Count
barChart02
.dimension(ageDimension)
.group(ageGroup)
.width($(barChart02.anchor()).parent().width())
.height(200)
.x(d3.scaleLinear().domain([15, 70]))
.yAxisLabel("Count")
.xAxisLabel("Age");
20's': 10430's': 20240's': 19250's': 19460's': 20470's': 10420's'30's'40's'50's'60's'70's'Age Bracket020406080100120140160180200Count
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.
20's': 10430's': 20240's': 19250's': 19460's': 20470's': 10420's'30's'40's'50's'60's'70's'Age Bracket020406080100120140160180200Count
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
Female: 492Male: 508FemaleMaleSex050100150200250300350400450500Count

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
Female: 492Male: 508FemaleMaleSex050100150200250300350400450500Count

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
24: 1325: 1426: 2027: 1528: 1729: 2530: 1831: 1832: 1933: 3134: 2235: 2336: 1537: 2138: 2039: 1540: 1341: 2142: 1843: 2344: 1945: 2346: 1447: 2548: 1549: 2150: 2251: 2252: 2453: 1454: 1555: 1856: 2357: 1858: 2259: 1660: 1561: 1762: 1863: 2864: 2165: 2066: 3367: 1768: 1969: 1670: 2071: 212025303540455055606570Age051015202530Count
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
24: 1325: 1426: 2027: 1528: 1729: 2530: 1831: 1832: 1933: 3134: 2235: 2336: 1537: 2138: 2039: 1540: 1341: 2142: 1843: 2344: 1945: 2346: 1447: 2548: 1549: 2150: 2251: 2252: 2453: 1454: 1555: 1856: 2357: 1858: 2259: 1660: 1561: 1762: 1863: 2864: 2165: 2066: 3367: 1768: 1969: 1670: 2071: 212025303540455055606570Age051015202530Count
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);
Female: 492Male: 508FemaleMale050100150200250300350400450500550600
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];
  });
Female: 492Male: 508492 of 1000508 of 1000FemaleMale050100150200250300350400450500550600
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;});