Grouped and stacked columns with shared series

Question

It's almost like this: https://www.highcharts.com/demo/column-stacked-and-grouped

Except that I want to have John (or any other person) in both stacks. In my case, each person is not either Male or Female, they are part of both.

Here are my categories and series:

categories: [
    'Apples', 'Oranges',
],

series: [
    {
        name: 'John',
        data: [1, 9],
        stack: 'Type A',
    },
    {
        name: 'John',
        data: [2, 10],
        stack: 'Type B',
    },
    {
        name: 'Joe',
        data: [3, 11],
        stack: 'Type A',
    },
    {
        name: 'Joe',
        data: [4, 11],
        stack: 'Type B',
    },
    {
        name: 'Jane',
        data: [5, 12],
        stack: 'Type A',
    },
    {
        name: 'Jane',
        data: [6, 13],
        stack: 'Type B',
    },
    {
        name: 'Janet',
        data: [7, 14],
        stack: 'Type A',
    },
    {
        name: 'Janet',
        data: [8, 15],
        stack: 'Type B',
    },
],

But with this, I currently have all names (Janet, Joe, ...) duplicated in the legend.

Kamil Kulig Kamil Kulig · Accepted Answer · 2017-10-24T12:05:47

You can use showInLegend: false to prevent duplicates in legend and make sure that corresponding series have the same color:

 series: [{
    name: 'John',
    color: 'orange',
    data: [1, 9],
    stack: 'Type A',
  }, {
    name: 'John',
    color: 'orange',
    data: [2, 10],
    stack: 'Type B',
    showInLegend: false
  }
 ]

This piece of code causes that legend performs the same action (show/hide) for all series with the common name:

  events: {
    legendItemClick: function(event) {
      var series = this,
        chart = this.chart;

      var isVisible = series.visible;
      chart.series.forEach(function(s) {
        if (s.name === series.name) {
          if (isVisible) {
            s.hide();
          } else {
            s.show();
          }
        }
      });
      event.preventDefault();
    }
  }

Live working example: http://jsfiddle.net/kkulig/cgu0g7vm/

API references:

Grouped and stacked columns with shared series

2 Answers