Stacked total

by saurabhkolhe

HTML

<script src="https://code.highcharts.com/highcharts.js" type="text/javascript"></script><script src="https://code.highcharts.com/highcharts-more.js" type="text/javascript"></script><script src="https://code.highcharts.com/highcharts-3d.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/stock.js" type="text/javascript"></script><script src="https://code.highcharts.com/maps/modules/map.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/gantt.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/exporting.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/parallel-coordinates.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/accessibility.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/annotations-advanced.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/data.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/draggable-points.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/static-scale.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/broken-axis.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/heatmap.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/tilemap.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/timeline.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/treemap.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/treegraph.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/item-series.js" type="text/javascript"></script><script src="https://code.highcharts.com/modules/drilldown.js"...

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Positive and Negative Values'
    },
    xAxis: {
        categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
    },
    yAxis: {
        stackLabels: {
            enabled: true,
            verticalAlign: "middle",
            inside: true,
            formatter: function( options ) {
                var total = 0;
                var that2 = this;
                this.axis.series.forEach(function( series ) {
                    if ( series.visible ) {
                        total += series.yData[that2.x];
                    }
                } );
                if((total>=0 && !this.isNegative) || (total<0 && this.isNegative))
                return total;
                }
        },
        title: {
            text: 'Value'
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'Positive Values',
        data: [5, 3, 8, -2, -4]
    }, {
        name: 'Negative Values',
        data: [-2, -4, -1, -3, -5]
    }]
});