Slow UI due to multiple event generation in Angular 2

[AlexanderLukin]

I tried to use AmCharts in my Angular 2 app and noticed sufficient problem.

When I create a new instance of any AmChart chart, it looks like this instance started to generate tons of events per second and make UI of my app extremely slow.

Here is the working plunker. Angular 2 ngDoCheck hook is called each time when some event occurred. In a browser console, you may see multiple DoCheck!!! records. As AmCharts generates events so frequently, this lifecycle hook is called in parent component and their child components also frequently and noticeably slow the UI. The similar problem takes place for other charts. I've tested it for AmPieChart and the bug is reproduced.

Here is the full code of the AmCharts component based on this Stackoverflow answer.

@Directive({
    selector: 'chart'
})
export class amChartDirective {
    constructor() {
        var chart = new AmCharts.AmStockChart();
    }
    
    public ngDoCheck() {
      console.log('DoCheck!!!')
    }
}

[martynasma]

Hey,

Would you be able to direct this question in our Angular2 repo?

https://github.com/amcharts/amcharts3-angular2

[AlexanderLukin]

It's not a problem with amcharts3-angular2 directive, but with amcharts3 library itself. As you can see in my plunker, there is no amcharts3-angular2 on it, just Angular 2 and AmCharts. I believe, this issue can be reproduced without Angular 2, but I didn't build such test case.

[martynasma]

Sorry, managed to miss your reply somehow.

Would you be able to reproduce the issue without Angular2?

[AlexanderLukin]

Sorry, but I don't have much time to do it now. Maybe later I can return to this.

[martynasma]

OK. Sounds good. Just post it here when you have the time.