Open in:

Waterfall Chart

Here is an excerpt from Wikipedia: A waterfall chart is a form of data visualization that helps in determining the cumulative effect of sequentially introduced positive or negative values. The waterfall chart is also known as a flying bricks chart or Mario chart due to the apparent suspension of columns (bricks) in mid-air. Often in finance, it will be referred to as a bridge.

Making Waterfall with amCharts

Although we don’t have a special dedicated waterfall chart, you can easily do it with a regular column chart. Besides a regular value, column graph can have open value specified, which defines at which value column should start. And for the horizontal lines we used another great feature we have – Trend Lines.

Demo source

<!-- Styles -->
<style>
#chartdiv {
	width	: 100%;
	height	: 500px;
}					
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

<!-- Chart code -->
<script>
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "none",
  "dataProvider": [ {
    "name": "Income A",
    "open": 0,
    "close": 11.13,
    "color": "#54cb6a",
    "balloonValue": 11.13
  }, {
    "name": "Income B",
    "open": 11.13,
    "close": 15.81,
    "color": "#54cb6a",
    "balloonValue": 4.68
  }, {
    "name": "Total Income",
    "open": 0,
    "close": 15.81,
    "color": "#169b2f",
    "balloonValue": 15.81
  }, {
    "name": "Expenses A",
    "open": 12.92,
    "close": 15.81,
    "color": "#cc4b48",
    "balloonValue": 2.89
  }, {
    "name": "Expenses B",
    "open": 8.64,
    "close": 12.92,
    "color": "#cc4b48",
    "balloonValue": 4.24
  }, {
    "name": "Revenue",
    "open": 0,
    "close": 8.64,
    "color": "#1c8ceb",
    "balloonValue": 11.13
  } ],
  "valueAxes": [ {
    "axisAlpha": 0,
    "gridAlpha": 0.1,
    "position": "left"
  } ],
  "startDuration": 1,
  "graphs": [ {
    "balloonText": "<span style='color:[[color]]'>[[category]]</span><br><b>$[[balloonValue]] Mln</b>",
    "colorField": "color",
    "fillAlphas": 0.8,
    "labelText": "$[[balloonValue]]",
    "lineColor": "#BBBBBB",
    "openField": "open",
    "type": "column",
    "valueField": "close"
  } ],
  "trendLines": [ {
    "dashLength": 3,
    "finalCategory": "Income B",
    "finalValue": 11.13,
    "initialCategory": "Income A",
    "initialValue": 11.13,
    "lineColor": "#888888"
  }, {
    "dashLength": 3,
    "finalCategory": "Expenses A",
    "finalValue": 15.81,
    "initialCategory": "Income B",
    "initialValue": 15.81,
    "lineColor": "#888888"
  }, {
    "dashLength": 3,
    "finalCategory": "Expenses B",
    "finalValue": 12.92,
    "initialCategory": "Expenses A",
    "initialValue": 12.92,
    "lineColor": "#888888"
  }, {
    "dashLength": 3,
    "finalCategory": "Revenue",
    "finalValue": 8.64,
    "initialCategory": "Expenses B",
    "initialValue": 8.64,
    "lineColor": "#888888"
  } ],
  "columnWidth": 0.6,
  "categoryField": "name",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0.1
  },
  "export": {
    "enabled": true
  }
} );
</script>

<!-- HTML -->
<div id="chartdiv"></div>