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?

Max Becerra · Accepted Answer · 2020-05-29 12:41:12Z

4

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.

answered May 29, 2020 at 12:41

Max Becerra

48612 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Geethu Nimesh Over a year ago

As default 'this' in the callback function points to the chart, I also use 'chartInstance' to assign chart instance to my component variable.

Kamil Kulig · Accepted Answer · 2020-03-20 08:08:08Z

0

It can be achieved in two steps:

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>

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).

answered Mar 20, 2020 at 8:08

Kamil Kulig

5,8261 gold badge10 silver badges12 bronze badges

3 Comments

Chandana Over a year ago

I tried this way but it did not show actual results

Kamil Kulig Over a year ago

Please provide a live demo that recreates your case. You can fork my codesanbox demo and use it as a template.

Mark Over a year ago

This method worked great for us until we updated our Angular Version. We went from v8 to v13 so I'm not sure which version caused the callback to "break."

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related