Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts Stack Column Sum Positive and Negative Together

I have a stacked column chart that shows 3 keys / values for each month stacked one on top of the other. Some months may have negatives. The current functionality is for highcharts to put two stacked labels for each month. One for the positives (on top) and one for the negatives (on bottom).

Please see the code below and the js fiddle as an example:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            stackLabels: {
                enabled: true,
                align: 'center'
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                pointPadding: 0,
                groupPadding: 0,
                dataLabels: {
                    enabled: false,
                    color: '#FFFFFF'
                }
            }
        },

        series: [{
            data: [29.9, -71.5, 106.4, -129.2, 144.0, -176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        },
        {
            data: [55.9, 90.5, 106.4, 350.2, 144.0, 52.0, 130.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

http://jsfiddle.net/sph1LjtL/

My desired functionality is to actually have one stacked label that includes the sum of all three values instead of two separate labels. So for February (in the fiddle) it would show 195 above the column because 266.50 - 71.50 = 195.

I have been trying to figure a way to do this but have been unsuccessful because highcharts is treating the positives and negatives as separate charts. Any help would be appreciated! Thank you.

like image 645
John B Avatar asked Oct 26 '25 16:10

John B


1 Answers

See Working fiddle here

Used the solution provided by Pawel Fus (Highcharts) at this Link

 yAxis: {
        stackLabels: {
            enabled: true,
            align: 'center',
                      formatter: function() {
                var sum = 0;
                var series = this.axis.series;

                for (var i in series) {
                    if (series[i].visible && series[i].options.stacking == 'normal') 
                        sum += series[i].yData[this.x];
                }
                if(this.total > 0 ) {
                    return Highcharts.numberFormat(sum,1); 
                } else {
                    return '';    
                }
            }
        }
    }
like image 98
Nishith Kant Chaturvedi Avatar answered Oct 29 '25 07:10

Nishith Kant Chaturvedi



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!