How to call a function after Highchart animation complete In Angular?

Question

I am not able to call a function in ploatOption-> series > animation -> complete

Sample code is here https://stackblitz.com/edit/highcharts-angular-basic-variwide-faharz-ubhknv?file=src%2Fapp%2Fapp.component.ts

ploatOption: {
series: {
animation: { duration: 200,
complete: function() {

//Call ChartHighlight() here

} } } },

How can I call a function (in this case "ChartHighlight()" inside a complete function? Please refer to the sample code link.

(Use block Markdown formatting for several lines of code - you can preserve indentation that way). — halfer, Jun 09 '21 at 12:20
Thank you halfer for the reply, while creating the sample project by mistake I wrote "ploatOption" .:) — Aja, Jun 09 '21 at 15:45

ruth · Accepted Answer · 2021-06-10T07:12:39.387

There are multiple issues:

ploatOption must be plotOptions.
There is no series.animation.complete property. You need to use series.events.afterAnimate.
Use need to use either bind(this) or arrow functions in callback to preserve the meaning of this. More info on this here.
You are initializing the chart before the series is initialized in the BindBarChart() function. Wrap it in *ngIf to initialize it after the chartOptions property is defined.

Controller (*.ts)

plotOptions: {
  series: {
    animation: {
      duration: 200
    },
    events: {
      afterAnimate: () => this.ChartHighlight()
    }
  }
},

Template (*.html)

<ng-container *ngIf="!!chartOptions">
  <highcharts-chart 
    style="display: inline-block" 
    [Highcharts]="Highcharts" 
    [options]="chartOptions"
    [(update)]="updatechart" 
    [callbackFunction]="chartcallback"
  ></highcharts-chart>
</ng-container>

I've modified your Stackblitz.

How to call a function after Highchart animation complete In Angular?

1 Answers1