Constructing a waterfall chart

A waterfall chart is a type of column chart where the positive and negative values are accumulated along the x axis categories. The start and end of adjacent columns are aligned on the same level, with columns going up or down depending on the values. They are mainly used to present cash flow at a higher level.

To use a waterfall chart, the highcharts-more.js library must be included:

<script type="text/javascript" 
 src="http://code.highcharts.com/highcharts-more.js"></script>

Let's start with a simple waterfall, with a couple of values for income and expenditure. The following is the series configuration:

            series: [{
                type: 'waterfall',
                upColor: Highcharts.getOptions().colors[0],
                color: '#E64545',
                data: [{
                    name: 'Product Sales',
                    y: 63700
                }, {
                    name: 'Renew Contracts',
                    y: 27000
   ...