Verify if Pie in Highcharts Pie charts is selected or deselected

Question

I have to show a popup whenever a pie is selected and do nothing when it is deselected. I am not able to figure out on a click event how to figure out if the Pie is selected by user or deleted. I tried to do Palin JS Logic there but it is a little buggy. Any solution that Highcharts provide?

                        chart: {
                            type: 'pie',
                            marginLeft: 0,
                            options3d: {
                                enabled: false,
                                alpha: 45,
                                beta: 0
                            }
                        },
                        tooltip: {
                            formatter: function(){

                            }
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                depth: 35,
                                dataLabels: {
                                    enabled: true,
                                    formatter: function(){

                                    }
                                },
                                showInLegend: true,
                                point: {
                                    events: {
                                        click: function(){

                                            var selectedPieSliceIndex;
                                            if(!this.selected) {
                                                selectedPieSliceIndex = this.x;
                                            }
                                            else {
                                                selectedPieSliceIndex = null;
                                            }
                                            chartComponent.trigger("onPieSliceClick", selectedPieSliceIndex);
                                            var that = this;
                                            if (this.pieSelected && clickedSliced.length > 0){
                                                that.pieSelected = false;
                                                clickedSliced = [];
                                            } else {
                                                that.pieSelected = true;
                                                clickedSliced.push(that.name)
                                            }

                                            if(this.pieSelected && clickedSliced.length){

                                           uiDialogue.loadDialog('Chart Initiatives', jsonData);

                                            }

                                        }
                                    }
                                }
                            }
                        },
                        series: [
                            {
                                type: 'pie',
                                innerSize: 100 ,
                                depth: 45  ,
                                name: '',
                                data: pieChartSeries
                            }
                        ],
                        title: {
                            text: "",
                            verticalAlign: 'middle',
                            x: -3,
                            y: -4,
                            floating: true,
                        },
                        exporting: {
                            chartOptions: {
                                plotOptions: {
                                    pie: {
                                        dataLabels: {

                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

Any suggestion or any inbuilt solution that Highchart has?

Answer 1

Have you tried to do something like this?

Demo: https://jsfiddle.net/BlackLabel/3qxL5r7f/

  point: {
    events: {
      click: function() {
        if (!this.selected) {
          console.log('show popup')
        } else {
          console.log('hide popup')
        }
      }
    }
  }