Highcharts Demo

author(s): Torstein Hønsi

by koh_edwin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

JavaScript

Highcharts.chart('container', {
    chart: {type: 'column'},
    title: {text: 'Budget vs Actuals'},
    //xAxis: {type: 'datetime'},
    tooltip: {
        formatter: function () {var stackName=''; if (
        	  this.series.name!='Budget') 
                return '<br>' + this.x + '</br><br>' +this.series.name + ': ' + this.y + '<br/>' + 
                    'Actuals Total: ' + this.point.stackTotal;
            else 
                return '<br>' + this.x + '</br><br>Budget Total : ' + this.y + '<br/>';
        }
    },
    plotOptions: {column: {stacking: 'normal'}},
		yAxis: {allowDecimals: false,min: 0,title: {text: '$100K'}},
		xAxis: {categories: ['Jan 2018', 'Feb 2018', 'Mar 2018', 'April 2018', 'May 2018']},
    series: [{
        name: 'Operations',
        data: [3, 0, 4, 4, 3],
        stack: 'actuals',
        pointPadding: 0.1, // Defaults to 0.1
        groupPadding: 0.1 // Defaults to 0.2

    },
    {
        name: 'Marketing',
        data: [3, 4, 4, 2, 5],
        stack: 'actuals',
        pointPadding: 0.1, // Defaults to 0.1
        groupPadding: 0.1 // Defaults to 0.2

    }, {
        name: 'Technology',
        data: [2, 5, 6, 2, 1],
        stack: 'actuals',
        pointPadding: 0.1, // Defaults to 0.1
        groupPadding: 0.1 // Defaults to 0.2

    },
    {
        name: 'Budget',
        data: [3,7,2,4,1],
        stack: 'budget',
        pointPadding: 0.1, // Defaults to 0.1
        groupPadding: 0.1 // Defaults to 0.2

    }]
});