CHART - Drilldown Legend Toggle

http://stackoverflow.com/questions/17642139/highcharts-donut-legend-toggle

by bizamajig

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="pie" style="height: 400px; width: 500"></div>

JavaScript

// Create the chart
var pie_chart = new Highcharts.Chart({
    chart: {
        type: 'pie',
        renderTo: 'pie'
    },
    title: {
        text: 'Share distribution',
        align: 'left'
    },
    yAxis: {
        title: {
            text: '{chart_pie_yAxis}'
        }
    },
    plotOptions: {
        pie: {
            shadow: false,
            center: ['50%', '50%']
        },
        series: {
            point: {
                events: {
                    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);
                            }

                        });
                    }
                }
            }
        }
    },
    legend: {
        layout: 'vertical',
        floating: true,
        align: 'right',
        verticalAlign: 'top',
        symbolPadding: 20,
        symbolWidth: 10
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
        }
    },
    series: [{
        name: 'Social networks',
        data: [{
            y: 5,
            color: '#2f7ed8',
            parentId: 'first'
        }, {
            y: 5,
            parentId: 'second',
            color: '#0d233a',
        }, {
            y: 5,
            parentId: 'second',
            color: '#0d233a'
        }, {
            y: 15,
            parentId: 'third',
            color: '#8bbc21'
        }],
        showInLegend: false,
        size: '60%',
        dataLabels: {
            formatter: function () {
                return this.y > 5 ?...