how to use highcharts-angular callback function to get chart object

Question

I have used https://github.com/highcharts/highcharts-angular this official wrapper and try to call the callback function to get the chart object. Unfortunately, though I tried various methods that did not give any proper results as I expect. Also, there aren't many documents that describe the callback function. Can someone let me know how to use the callback function?

Answer 1

The callback didn't work for me either. I was inspecting the code source and I saw the @Output event emitter called chartInstance... It is also documented:

component output chartInstance - emitted after chart is created (see demo app and logChartInstance function)

So I've used as a normal output event binding:

<highcharts-chart
 [Highcharts]="Highcharts"
 [options]="chartOptions"
 ...
 (chartInstance)="onChartInstance($event)"
 ...
></highcharts-chart>

And voilà... I think that is not a definitive solution but as a temporary workaround it works pretty well for me.

Answer 2

It can be achieved in two steps:

1. Add [callbackFunction]="chartCallback" in compontent's HTML file (just as presented in the documentation):

 <highcharts-chart
   style="width: 100%; display: block"
   [Highcharts]="Highcharts"
   [options]="chartOptions"
   [(update)]="updateDemo"
   [callbackFunction]="chartCallback"
   [runOutsideAngular]="true"
 >
 </highcharts-chart>

2. Initialize callback in the component's TS:

  chartCallback: Function = function(chart) {
    console.log("Chart instance: ", chart);
  };

Live demo: https://codesandbox.io/s/angular-b5420

Documentation for the callback (third argument of chart's constructor).