Highcharts: legend of stacked chart - highcharts

Question

This is the chart I have for example to explain the question.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
We have series names in the legend. And chart is stacked with grouped columns.
we have stacked them in male and female categories.
Is there any way to get Male and Female in the legends? so that we can see only male food consumption or female food consumption at a time.
You can refer fiddle as here - jsfiddle.net/bLZHd/
Thanks

Answer 1

You can use labelFormatter to replace item name with stack name. Two series shoud be hidden in legend (showInLegend) paramter. Then only what you need is catching legendItemClick and iterate for checking serie stack name.
legendItemClick: function () {
var chart = this.chart,
key = this.options.stack;
$.each(this.chart.series,function(i,serie){
if(serie.options.stack === key) {
if(serie.visible)
serie.hide();
else
serie.show();
}
});
return false;
}
http://api.highcharts.com/highcharts#legend.labelFormatter

Answer 2

Do you really need to switch by legends?
I would recommend you that kind of issue, that switch by spans: http://jsfiddle.net/bLZHd/1/
All you need is:
$.each(chart.series, function (k, v) {
if (v.options.stack == elemId) { //elemId is the string to compare
chart.series[k].show();
} else {
chart.series[k].hide();
}
});