Highcharts donut legend toggle

Question

Im using a highchart pie chart to make Donut chart. The problem is when I click on legend to toggle series it only affects the clicked serie. I want to also toggle related sub series. I have tried LegenditemClick event and legendIndex , but no success so far. Here example for chart: http://jsfiddle.net/safarov/PgpRv/ When you click "facebook legend" for example, only inner pie hide.

Any help will be appreciated

Answer 1

You need to set ids for inner and outer rings. Then common it by legendItemClick and search correct point by id.

legendItemClick: function () {
                    var id = this.id,
                        data = this.series.chart.series[0].data;
                    $.each(data, function (i, point) {

                        if (point.parentId == id) {
                            if(point.visible)
                                point.setVisible(false);
                            else
                                point.setVisible(true);
                        }

                    });
                }

http://jsfiddle.net/sbochan/PgpRv/4/