A waterfall chart displays the cumulative effect of the values. Each data point is accumulated on top of the previous data point or subtracted from the previous data point if the value is negative. This creates a flying bricks appearance due to the suspension of columns in midair.
Waterfall charts are most suitable in finance where one needs to visualize the cumulative effect of several positive and negative values.
In the following example, we will plot the budget breakdown of the London 2012 Olympics by the expense area:
$( '#chart_container' ).highcharts({
chart: {
type: 'waterfall'
},
title: {
text: 'Budget of London 2012 Olympics'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'US million dollars'
}
},
tooltip: {
valueSuffix: ' Million USD'
},
series: [{
name: 'Budget',
data: [
{name: 'Venues', y: 4607},
{name: 'Olympic Village', y: 1919},
{name: 'CT operations', y: 1776},
{name: 'Other projects', y: 1421},
{name: 'Transport projects', y: 1392},
{name: 'Anticipated final costs', y: 1311},
{name: 'Legacy projects', y: 1298},
{name: 'Olympic parkland', y: 1204},
{name: 'Police', y: 943},
{name: 'Venue security', y: 869},
{name: 'Government bodies', y: 696},
{name: 'Contingency fund', y: 157},
{name: 'Ceremonies', y: 126}
]
}]
});The data points are given in the form of an array containing the name and the value.
To show the cumulative budget, we can add another data point with the isSum property set to true:
{name: 'Total Budget', isSum: true}This will produce a chart with a waterfall-like appearance, hence called a waterfall chart:
If you need to show the cumulative value in the middle of the series, you can do so by adding another data point and setting the isIntermediateSum property to true.