Star

Bar charts are slightly different than other axis chart types such as line and area charts. If we configure them the same way as a line chart then the bars will overflow off of the plane. This is usually undesirable, so there are a couple ways to get around this.

  1. Using A Band Scale

  2. With bar charts it's usually a good idea to use a d3 scaleBand. Linear scales will usually cause the bars to overflow outside of the plane.

    JS
    HTML
    CSS
  3. Using String Values

  4. Another way to do this is to use non-numeric x values, then d2b will automatically configure a d3 scaleBand. If you use this method keep in mind that the order of the domain will be decided by the order in which d2b discovers distinct x-values.

    JS
    HTML
    CSS
  5. Using Domain Padding

  6. Yet another way to get around this is to just pad the x scaleLinear by a percentage of the entire domain. In the following example the bar chart has a true domain of [1, 5] this is where the discrete x values fall between. If we pad either side by 10% then the visible domain becomes [0.4, 5.6]

    JS
    HTML
    CSS
  7. Advanced Stacking

  8. The stackBy property can be passed an accessor function in order to stack only some of the area charts together. In the example below, the blue and orange area charts are stacked together as stack: 1 where as the green will be a separate stack as stack: 2.

    JS
    HTML
    CSS
  9. Stacking

  10. You can stack bar charts by using the stackBy property on the svg generator.

    JS
    HTML
    CSS