Multiple Pie Charts in One Chart with HighCharts

Question

I am trying to make several pie charts in one chart using HighCharts.

JSFIDDLE DEMO

I have included a legend for each pie chart. Now two legends for two diagrams are shown below (note that in the legend 2 elements are visible for each entry). When I click on a legend item , it shows / hides a piece in one pie chart ...

But I want to achieve any of the following:

• I want to have a single legend for both diagrams, so that the corresponding fragment of both pie diagrams disappears / appears when I click on the legend element .

• I want to show only one legend and turn it off so that the click does not hide / show fragments of pie charts.

Does anyone know a way to achieve either?

Thanks in advance...

Answer 1

I added the code below to detect the clicked legend item.

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 jsfiddle