Calling Typescript function from Highcharts load event

The Hungry Dictator Published at Dev

The Hungry Dictator

I am trying to call typescript function openDialog() from the events.load of highcharts but I am not able to call it. Even though I am using arrow function I am not able to get it. Here is my code :

events: {
    load: () => {
       var chart : any = this;
      for (var j in chart.series) {
        var series = chart.series[j];
        for (var i in series.data) {
          ((i) =>{
            var point = series.data[i];
            if (point.graphic) {
              point.graphic.on('click',(e)=>this.openDialog(point.options,'all')
            );
            }
          })(i)
        }
      }
    }
  },


  public openDialog(option,type){
       //Do Something
  }

EDIT

I have got one link where there are binding this with function.

Is there anything that I am missing ?

The Hungry Dictator

Finally got it worked by this simple change

events: {
  load: function(e) {
   var chart : any = e.target; // to get the chart details
  for (var j in chart.series) {
    console.log(j)
    var series = chart.series[j];
    for (var i in series.data) {

      ((i) =>{
        console.log(i)
        var point = series.data[i];
        if (point.graphic) {
          point.graphic.on('click',(e)=>this.openDialog()
        );
        }
      })(i)
    }
  }
  }.bind(this) //binding the parent this to access openDialog function
},


public openDialog(option,type){
   //Do Something
}

Here I had to bind this which does not comes from chart. So I have to bind this using .bint(this) to the load function. And to get the chart details I am using e.target. This way I am getting it worked.

Stackblitz Demo

Collected from the Internet

Please contact [email protected] to delete if infringement.