Reputation: 4896
I'm trying to draw multiple pie-charts in the same chart with HighCharts
.
I have enabled the legend for each pie-chart. Now two legends for the 2 charts are shown at the bottom (notice that 2 items for each entry are visible in the legend). When I click on an item of the legend it shows/hides a piece in one pie-chart...
But I want to achieve either of followings,
I want to have a single legend for both charts so that relevant piece of both pie-charts disappears/appears when I click on an item of the legend.
I want to show only one legend and disable it so that clicking doesn't hide/show pieces of pie-charts.
Anybody knows a way to achieve either?
Thank you in advance...
Upvotes: 1
Views: 8517
Reputation: 1279
I have added the below code to detect the legend item clicked.
function(chart) {
$(chart.series[0].data).each(function(i, e) {
e.legendItem.on('click', function(event) {
var legendItem=e.name;
event.stopPropagation();
$(chart.series).each(function(j,f){
$(this.data).each(function(k,z){
if(z.name==legendItem)
{
if(z.visible)
{
z.setVisible(false);
}
else
{
z.setVisible(true);
}
}
});
});
});
});
}
Here is the jsfiddle
Upvotes: 5