Grouped and stacked columns with shared series - highcharts

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.

Answer 1

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:
https://api.highcharts.com/highcharts/plotOptions.series.showInLegend
https://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick

Answer 2

Got this answer from the highcharts forum:
To remove duplicated names in the legend you can set series.linkedTo to ":previous" in the second series with the same name. Then you can change the series colors to be the same.
series: [{
name: 'John',
data: [1, 9],
stack: 'Type A',
}, {
name: 'John',
data: [2, 10],
stack: 'Type B',
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0]
},
Live demo: http://jsfiddle.net/ppotaczek/psguhp3r/