Basic Waterfall Chart

The waterfall chart visually tallies the cumulative result of negative and positive values over a data series. In addition to specifying the normal positive and negative values d4's also lets you designate a column as a subtotal column by passing in an "e" as the value key, which may be a familiar convention if you have used think-cell.

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.

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