Angular 8 highcharts How to pass custom data to drilldown event in Highcharts

Question

I am new to Angular and was trying to implement below. I have created a data object in Angular component

@..
...
export class MyComponent{
drilldownDataSeries : {
's1' : {
      ...
},
's2' : {
   ...
}
}

then want to use this object in drilldown event of chart object. Setting up the chart options in ngOnInit().

this.chartOptions = {
   chart :{
          events : {
drilldown : function(e){
 //** here i want to use drilldownDataSeries  object in the callback function
}
 }
}
}```

here i want to use drilldownDataSeries  object in the callback function.

score 0 · Accepted Answer · answered Jul 03 '20 at 11:03

There are several ways to access drilldownDataSeries from the callback function, the easiest one is to use the arrow function. You can read more about this approach and about the other solutions in this thread: https://stackoverflow.com/a/20279485/12285185

...
     chart: {
           events: {
             drilldown: () => {
               console.log(this.drilldownData);
             }
           }
       },
...

Live demo:
https://stackblitz.com/edit/highcharts-angular-basic-line-jwwfd8

Angular 8 highcharts How to pass custom data to drilldown event in Highcharts

1 Answers1