I want to select multiple sections in pie chart. And section should be unselected on clicking, if it is already selected.

I found an example here. But in this case, only one section can be selected and selected ones get deselected on clicking on any other section.

Similarly, I found another example [

$(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'pie'

    },
    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false
                }
            },
            point: {
                events: {
                    click: function () {
                        this.graphic.attr({
                            fill: 'yellow'
                        });
                    }
                }
            }
        }
    },
    tooltip: {
        enabled: false
    },
    series: [{
        data: [{
            name: 'test',
            y: 29.9,
            color: "#CCCCCC",
            active: false
        }, {
            name: 'test2',
            y: 71.5,
            color: "#CCCCCC",
            active: false
        }, {
            name: 'test3',
            y: 106.4,
            color: "#CCCCCC",
            active: false
        }]
    }]
}); });

]2. In this case multiple sections can be selected but they are not deselected on clicking again.

Please help !!

I want to select multiple sections in pie chart. And section should be unselected on clicking, if it is already selected.

I found an example here. But in this case, only one section can be selected and selected ones get deselected on clicking on any other section.

Similarly, I found another example [

$(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'pie'

    },
    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false
                }
            },
            point: {
                events: {
                    click: function () {
                        this.graphic.attr({
                            fill: 'yellow'
                        });
                    }
                }
            }
        }
    },
    tooltip: {
        enabled: false
    },
    series: [{
        data: [{
            name: 'test',
            y: 29.9,
            color: "#CCCCCC",
            active: false
        }, {
            name: 'test2',
            y: 71.5,
            color: "#CCCCCC",
            active: false
        }, {
            name: 'test3',
            y: 106.4,
            color: "#CCCCCC",
            active: false
        }]
    }]
}); });

]2. In this case multiple sections can be selected but they are not deselected on clicking again.

Please help !!

• javascript
• highcharts

2 Answers 2

Try this solution: http://jsfiddle/3zy8p/13/

    plotOptions: {
        series: {
            point: {
                events: {
                    click: function(event){
                        this.slice(null);
                        this.select(null, true);
                        console.log(this.series.chart.getSelectedPoints());
                    }
                }  
            }                    
        }
    }

Shift + Mouseclick or CTRL + Mouseclick lets you select/deselect 'points'. Does the job by simply setting:

allowPointSelect : true