Highcharts Stack Column Sum Positive and Negative

Question

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.

Answer 1

This might be one solution, using the yAxis.stackLabels.formatter function, and doing a lookup for a negative stack when processing a positive stack. In code:

yAxis: {
    stackLabels: {
        formatter: function() {
            if(this.total >= 0) {
                if(this.axis.stacks["-column"][this.x] != null)
                    return this.total + this.axis.stacks["-column"][this.x].total;
                else
                    return this.total;
            }
        }
        // ...
    }
}

See this updated JSFiddle demonstration of how it works.

Answer 2

This can be done using the yAxis.stackLabels.formatter and looping through the series data items (as well as applying a filter onto which axis to apply the label). Here is a completed (very verbose) example:

yAxis: {
  stackLabels: {
    enabled: true,
    align: 'center',
    formatter: function() {
      console.log(this);
      var theIndex = this.x;
      var theSeries = this.axis.series;
      var theSum = 0;

      for (var i = 0; i < theSeries.length; ++i) {
        theSum = theSum + theSeries[i].yData[theIndex]; //console.log(theSeries[i].yData[theIndex]);
      }
      if (this.isNegative == false) {
        return theSum;
      }
    }
  }
},

Inside the formatter I am getting the index (x) of the points for later use in picking out the correct data points to sum. Then setting looping through all the series items. Finally I am getting the yData points out of the series object and summing them up for the appropriate xAxis index. The next step is to only apply the filter to the positive axis location. Fully functional jsFiddle. Note that you are going to have to do some work with the decimal precision and I leave that up to you.

Answer 3

Improving on the answer by Pawel Fus and linked above by Nishith to accommodate missing data points as well as negative sums (in which case the sum is shown below the bars for the given x-axis index):

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

                for (var i in series) {
                    if (series[i].visible 
                    && series[i].options.stacking == 'normal' 
                    && this.x in series[i].yData) 
                        sum += series[i].yData[this.x];
                }
                if (sum >= 0 && this.isNegative == false
                    || sum < 0 && this.isNegative == true) {
                    return Highcharts.numberFormat(sum,1); 
                } else {
                    return '';    
                }
            }
        }
    }

See JSFiddle here

Answer 4

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 '';    
                }
            }
        }
    }