Treemap with Multiple Series - highcharts

Question

I am trying to create TreeMap with multiple series, the series are getting plotted on the graph with both series clubbed together, but I want only one series to be displayed at a time. Basically legand can be used but for treemap it's showing values.
This is the jsfiddle I am trying to work on
JavaScript files used
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
The treemap should be updated as per the series selected.
Highchart Bound Using
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
enabled: true,
},
series: [{
name:"Series 1",
stack: 'aeroplanes',
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'A -Series 1',
value: 6,
colorValue: 1
}, {
name: 'B -Series 1',
value: 6,
colorValue: 2
}, {
name: 'C -Series 1',
value: 4,
colorValue: 3
}, {
name: 'D -Series 1',
value: 3,
colorValue: 4
}, {
name: 'E -Series 1',
value: 2,
colorValue: 5
}, {
name: 'F -Series 1',
value: 2,
colorValue: 6
}, {
name: 'G -Series 1',
value: 1,
colorValue: 7
}]
},
// Second Series
{
name:"Series 2",
type: 'treemap',
stack: 'aeroplanes2',
layoutAlgorithm: 'squarified',
visible:true,
data: [{
name: 'AA -Series 2',
value: 16,
colorValue: 2
}, {
name: 'BB -Series 2',
value: 26,
colorValue: 2
}, {
name: 'Cc -Series 2',
value: 14,
colorValue: 2
}, {
name: 'Dd -Series 2',
value: 13,
colorValue: 2
}, {
name: 'Ee -Series 2',
value: 12,
colorValue: 2
}, {
name: 'Ff -Series 2',
value: 12,
colorValue: 2
}, {
name: 'Gg -Series 2',
value: 11,
colorValue: 2
}]
}],
title: {
text: 'Highcharts Treemap'
},
plotOptions: {
treemap: {
stacking: 'percent'
}
},
});

Answer 1

By default showInLegend equals to false for treemap series - it needs to be enabled manually. In legendItemClick event I handled series visibility toggling:
plotOptions: {
treemap: {
showInLegend: true,
events: {
legendItemClick: function() {
this.chart.series.forEach((s) => s.setVisible());
return false;
}
}
}
}
Live demo: http://jsfiddle.net/kkulig/0n49vv74/
API references:
https://api.highcharts.com/highcharts/plotOptions.treemap.events.legendItemClick
https://api.highcharts.com/highcharts/plotOptions.treemap.showInLegend
https://api.highcharts.com/class-reference/Highcharts.Series#setVisible