Highcharts Demo

author(s): Torstein Hønsi

by gokulmaha

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.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>

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'waterfall'
    },

    title: {
        text: 'Highcharts Waterfall'
    },

    xAxis: {
        type: 'category'
    },

    yAxis: {
        title: {
            text: 'USD'
        }
    },

    legend: {
        enabled: false
    },

    tooltip: {
        pointFormat: '<b>${point.y:,.2f}</b> USD'
    },

                        series: [{
                        upColor: Highcharts.getOptions().colors[2],
                        color: Highcharts.getOptions().colors[3],
                        data: [{
                            name: 'Gate 1-BoM 1',
                            //isIntermediateSum: true,
                            y: 90.5
                        }, {
                            name: 'Gate 1-BoM 2- R - Scope change',
                            y: 8.5
                        }, {
                            name: 'Gate 2 - BoM2 - E- HW Changes',
                            y: 0.5
                        },
												{
                          name: 'Gate 2 - Baselined',
                          isIntermediateSum: true,
                          color: Highcharts.getOptions().colors[1]
								        },                        
                        {
                            name: 'Gate 3 - BoM 4 - F : New BMW FX Rate',
                            y: -2
                        },
												{
                          name: 'Gate 3 - Baselined',
                          isSum: true,
                          color: Highcharts.getOptions().colors[1]
								        },                        
                        {
                            name: 'Gate 4 - BoM 5 - P : Price Update LED',
                            y: 7.5
                        },
                        {
                            name: 'Gate 4 - BoM 6 - C : HW Update accord',
                            y: 2
                        },
                        {
                            name:...