Highcharts stacked column: show total when a stack is hidden

Question

I have a stacked column chart with three stacks per column. See https://jsfiddle.net/Lfvnraqd/1/

The tooltip shows the numbers for the individual stack as well as the total of all three stacks (i.e. the total of all proceedings per year). This works fine as long as all stacks are shown. But when I hide one or two stacks by clicking on the corresponding item in the legend, the total shown in the tooltip is that of all visible stacks, but I want it to still show the total of all three stacks. If possible without the need to have a separate series for the total numbers.

Is there a way to do that?

Code:

$(function () {
 Highcharts.setOptions({
   colors: ['#f59000', '#2274c1', '#90aaef']
 });
 $('#container').highcharts({
 chart: {
    borderColor: '#cccccc',
    borderWidth: 2,
    marginTop: 43,
    type: 'column'
  },
 xAxis: {
        categories: ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
        tickLength: 20
  },
  yAxis: {
        min: 0,
        max: 45,
        reversedStacks: false,
        tickInterval: 5,
        title: {
            text: null
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }
    },
  credits: {
        enabled: false
    },
  title: {
     text: 'Number of procedures per year',
    y: 18
    },
 tooltip: {
        headerFormat: '<b>Year {point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total procedures: {point.stackTotal}'
    },
 plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
 series: [{
        name: 'Resolved before conciliation',
        data: [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10]
    }, {
        name: 'Conciliation successful',
        data: [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0]
    }, {
        name: 'Expert\'s decision',
        data: [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]
    }]
 });
});

Sum all points at the beggining and use pointFormatter to access the sums - see example jsfiddle.net/Lfvnraqd/2 — morganfree
This works well, thanks. Where can I find documentation on advanced things like this one? — MacCrack
@morganfree Could you convert your comment into an answer so I can accept it? — MacCrack
I have posted the answer. The documentation can be found here. Some of the options include examples which are very useful - but in my opinion the best way to learn is trying to understand other people examples, after getting comfortable with the library trying to modify it by extending it. — morganfree

morganfree morganfree · Accepted Answer · 2017-01-19T19:22:42

Summing of the points values need to be done manually because the chart operate only on visible data.

Before you set data in the chart, you calculate its sum:

var data1 = [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10];
var data2 = [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0];
var data3 = [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]

var sums = Object.keys(data1).map(i => {
  return data1[i] + data2[i] + data3[i];
});

and access the propert sum in tooltip.pointFormatter

pointFormatter: function () {
  return this.series.name + ': ' + this.y + '<br/>Total procedures: ' + sums[this.x];
}

Example: https://jsfiddle.net/Lfvnraqd/2/

Highcharts stacked column: show total when a stack is hidden

1 Answers