Search code examples
highchartsbar-chartstacked

Highcharts stacked bar negative / positive total


I have a stacked bar chart like this: http://jsfiddle.net/XFX5T/

I would like to know if it's possible to have the total of the negative + positive values as the stacked label.

if the total is positive, show the label at the top of the bar. if the total is negative, show the label at the bottom of the bar.

The grapes column in the example would have 40 as label for instance.

Looked at the documentation but looks like there is nog default config setting for this.

stackLabels: {
   enabled: true,
   style: {
     fontWeight: 'bold',
     color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
   }
 }

Solution

  • You can try with a stackLabels formatter. For example:

    stackLabels: {
      formatter: function(){
        var sum = 0;
        var series = this.axis.series;
    
        for (var i in series){
          sum+=series[i].yData[this.x];
        }
        if (sum < 0 && this.isNegative || sum >= 0 && !this.isNegative)
          return sum;
      }
    ...
    }