CODEWITHSUNDEEP
javascripthighcharts
MacCrack
MacCrack

Reputation: 13

Highcharts stacked column: show total when a stack is hidden

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]
    }]
 });
});

Upvotes: 1

Views: 4346

Answers (1)

morganfree
morganfree

Reputation: 12472

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/

Upvotes: 1

Related Questions