Horizontal Waterfall Chart

This waterfall chart is an example of the ability of some d4 chart to change between horizontal and vertical orientations. This is done simply by overriding the default axis scale. This example also demonstrates one of the various data parsers available to developers using d4. In this example, we use the waterfall parser which makes it trivial for the developer to prepare the incoming data in a way that the chart expects it.

This example also mixes in a zero line to visually demarcate where the series elements dip below zero. This is especially helpful in charts like the waterfall, which are often used for financial analysis.

CSS Code

  #waterfall  .d4 .bar.negative.fill {
      fill: darkred;
  #waterfall .d4 .bar.positive.fill {
      fill: steelblue;
  #waterfall .d4 .bar.subtotal.fill {
      fill: lightblue;
JavaScript Code