Highcharts Waterfall Chart Example

Keywords : Waterfall chart using highcharts with example, How to implement waterfall chart using highcharts, Waterfall chart to show data in different colors using highcharts with example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts - Waterfall Chart</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
          
            var chartype = {
                type: 'waterfall'
            }
            var chartitle = {
                text: 'Highcharts Waterfall'
            }
            var chartxaxis = {
                type: 'category'
            }
            var chartyaxis = {
                title: {
                    text: 'USD'
                }
            }
            var chartlegend = {
                enabled: false
            }
            var chartooltip = {
                pointFormat: '<b>${point.y:,.2f}</b> USD'
            }
            var chartseries = [{
                upColor: Highcharts.getOptions().colors[2],
                color: Highcharts.getOptions().colors[3],
                data: [{
                    name: 'Start',
                    y: 120000
                }, {
                    name: 'Product Revenue',
                    y: 569000
                }, {
                    name: 'Service Revenue',
                    y: 231000
                }, {
                    name: 'Positive Balance',
                    isIntermediateSum: true,
                    color: Highcharts.getOptions().colors[1]
                }, {
                    name: 'Fixed Costs',
                    y: -342000
                }, {
                    name: 'Variable Costs',
                    y: -233000
                }, {
                    name: 'Balance',
                    isSum: true,
                    color: Highcharts.getOptions().colors[1]
                }],
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
                    },
                    style: {
                        color: '#FFFFFF',
                        fontWeight: 'bold',
                        textShadow: '0px 0px 3px black'
                    }
                },
                pointPadding: 0
            }]
            $('#container').highcharts({
                chart:chartype,
                title: chartitle,
                xAxis: chartxaxis,
                yAxis: chartyaxis,
                legend:chartlegend,
                tooltip:chartooltip,
                series: chartseries
            });
        });
    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Highcharts Waterfall Chart Example

Example

Result