Highcharts Pie Slice Offset on Legend Click

Question

Highcharts pie chart - offset a single slice on legend click answers the question asked in the Title but I have an issue with that. When you click on one legend, corresponding slice pops out and when you click the second, it also explodes along with the first one.

What I want to do here is that only the clicked slice is exploded and all other slices go back to their original positions so there could only be one selected slice at a time.

Any help in this regard will be greatly appreciated as I am not very familiar with highchart events..

$(function () {

    $(document).ready(function () {

        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Browser market shares January, 2015 to May, 2015'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true,
                    point: {
                events: {
                    legendItemClick: function () {
                        this.slice();
                        /*Something should happen here to move all other slices back*/
                        return false;
                    }
                }
            }
                }
            },
            series: [{
                name: "Brands",
                colorByPoint: true,
                data: [{
                    name: "Microsoft Internet Explorer",
                    y: 56.33
                }, {
                    name: "Chrome",
                    y: 24.03,
                    sliced: true,
                    selected: true
                }, {
                    name: "Firefox",
                    y: 10.38
                }, {
                    name: "Safari",
                    y: 4.77
                }, {
                    name: "Opera",
                    y: 0.91
                }, {
                    name: "Proprietary or Undetectable",
                    y: 0.2
                }]
            }]
        });
    });
});

JSFiddle Link

Nishith Kant Chaturvedi Nishith Kant Chaturvedi · Accepted Answer · 2015-10-20T07:53:09

I have set a check if legend is clicked other pie slice shouldn't be sliced. See Updated fiddle here

 point: { 
    events: { 
 legendItemClick: function () {
                        this.slice();
                  var chart = $('#container').highcharts();
                var legend = chart.legend;

            for (var i in legend.allItems) {
                var item = legend.allItems[i];
                  if(item !=this)
                      item.slice(false);                     
            } 
                        return false;
                                    }
                }
            }

Highcharts Pie Slice Offset on Legend Click

1 Answers