Book Image

Learning Highcharts 4

By : Joe Kuan
Book Image

Learning Highcharts 4

By: Joe Kuan

Overview of this book

Table of Contents (23 chapters)
Learning Highcharts 4
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

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
   ...