---
title: Basic Waterfall Chart
charts:
  - Waterfall Chart
concepts:
  - Parsers
---

<h5>{{title}}</h5>
<p>
  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 <a href="http://www.think-cell.com/en/support/documentation/waterfall.shtml" target="_new">think-cell</a>.
</p>
<p>
  This example also demonstrates one of the various data parsers available to
  developers using d4. In this example, we use the <code>waterfall</code> parser
  which makes it trivial for the developer to prepare the incoming data in a way
  that the chart expects it.

<hr/>
<script type="text/javascript" charset="utf-8" id='source_code'>
'use strict';

$(document).ready(function(){
  var data = [
    { 'category': 'Job',       'value': 27  },
    { 'category': 'Groceries', 'value': -3  },
    { 'category': 'Allowance', 'value': 22  },
    { 'category': 'Subtotal',  'value': 'e' },
    { 'category': 'Videos',    'value': -22 },
    { 'category': 'Coffee',    'value': -4  },
    { 'category': 'Total',     'value': 'e' }
  ];
  var parsedData = d4.parsers.waterfall()
    .x(function() {
      return 'category';
    })
    .y(function() {
      return 'value';
    })
    .nestKey(function() {
      return 'category';
    })(data);

  var chart = d4.charts.waterfall()
    .width($('#example').width())
    .x(function(x){
      x.key('category');
    })
    .y(function(y){
      y.key('value');
    });

  d3.select('#example')
    .datum(parsedData.data)
    .call(chart);
});
</script>
<div id="waterfall">
  <div id="example"></div>
</div>

<h6>CSS Code</h6>
<pre><code class="language-css">
  #waterfall  .d4 .bar.negative.fill {
      fill: darkred;
  }
  #waterfall .d4 .bar.positive.fill {
      fill: steelblue;
  }
  #waterfall .d4 .bar.subtotal.fill {
      fill: lightblue;
  }
</code></pre>
<h6>JavaScript Code</h6>
<pre><code id="code" class="language-javascript"></code></pre>