1

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

Sampath Liyanage
  • 4,776
  • 2
  • 28
  • 40
  • Check if this helps http://jsfiddle.net/TV8f4/ – MANOJ GOPI Jan 12 '15 at 05: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 Jan 12 '15 at 05:44

1 Answers1

5

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

MANOJ GOPI
  • 1,279
  • 10
  • 31