[Solved]-Call an angular component method when we click on highchart series-Highcharts

I know i am late here but his might help someone. The angular2-highchart package does provide the access to series event.

<chart [options]="options">
  <series (click)="methodToCall($event)"
  </series>
</chart>
 <p>Series-Clicked={{data}}</p>

JS code.

methodToCall(e){
    console.log("Method called");
   this.data = e.originalEvent.point.name
}

Here is the updated Plunk.

**/*----- component method to generate Pie-chart from high chart Library  -----*/**
drawPieChart() {
    HighCharts.chart("pie_chart", {
      accessibility: { enabled: false },
      chart: {
        type: 'pie',
        plotBackgroundColor: '#FFF',
        plotShadow: true
      },
      title: {
        text: 'My Title'
      },
      tooltip: {
        // pointFormat: '{point.y}<br/><b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            //format: '<b>{point.name}</b>: {point.y} '*//change .name & .y according to your data-set*
          },
          showInLegend: true,
          events: {
            click: 
              this.myCustomMethod.bind(this)
          },
        },//pie
      },
      series: [{
        name: 'TA',
        colorByPoint: true,
        type: 'pie',
        data: this.data,*// <<< here you need to put your JSON variable or Json object*
      }]
    });
    

  }

**/* ---- on click event of pie myCustomMethos() 'll get call ---- */**
myCustomMethod(t:any) {
    console.log(t.point.name)
}

You just need to replace the anonymous function by an arrow function or bind it to the component:

point: {
    events: {
        click: () => {
            console.log(this);
            // I want to call a component method here
        }
    }
}

or

point: {
    events: {
        click: (function(){
            console.log(this);
            // I want to call a component method here
        }).bind(this)
    }
}

or even :

point: {
    events: {
        click: this.myComponentMethod.bind(this)
    }
}

To have access to the informations that the click event returns and also have access to your component methods you can do something like this:

plotOptions: {
            series: {
                turboThreshold:3000,
                cursor: 'pointer',
                point: {
                    events: {
                        click: function(e){
                           const p = e.point
                           this.myComponentMethod(p.category,p.series.name);
                        }.bind(this)
                    }
                }
            }
        },

I hope this will help.