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

Solution 1:

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

Solution 2:

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)
                    returnthis.total + this.axis.stacks["-column"][this.x].total;
                elsereturnthis.total;
            }
        }
        // ...
    }
}

See this updated JSFiddle demonstration of how it works.

Solution 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

Solution 4:

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.