I'm trying to draw multiple pie-charts in the same chart with HighCharts.

JSFIDDLE DEMO

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,

1. 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.

2. 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...

I'm trying to draw multiple pie-charts in the same chart with HighCharts.

JSFIDDLE DEMO

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,

1. 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.

2. 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...

• javascript
• highcharts
• pie-chart

• Check if this helps jsfiddle/TV8f4 – MANOJ GOPI Commented Jan 12, 2015 at 5:35
• Thanks @MANOJGOPI . But this doesn't help to achieve what I want... When I click an item in the legend it hides/shows bars in Delhi HO and Regional Offices at the same time. What I want is to do is something like that with multiple pie carts.. – Sampath Liyanage Commented Jan 12, 2015 at 5:44

1 Answer 1

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