Improve the efficiency of animations about amcharts4

[martynasma]

Does this happen with the same chart outside Angular?

Can you share the particular chart you are testing with, so that we can experiment ourselves?

Thanks!

[xire28]

Issue can be reproducted with the example code you provided:
https://github.com/amcharts/amcharts4/blob/master/dist/es2015/examples/angular/simple-line-chart/src/app/app.component.ts

Without angular and also not interacting with the page:
15-20% CPU:
https://codepen.io/team/amcharts/pen/ZoOyOz

100% CPU:
https://codepen.io/team/amcharts/pen/MGVbNV

25% CPU:
https://codepen.io/team/amcharts/pen/qYVVEa
etc...

Can be reproducted in firefox 52.8.0 and chrome 66.0.3359.139 (probably on other browsers too)

Changed the issue subject accordingly

Best regards,

[Pauan]

Yeah, Angular's Zones tend to cause big performance problems (for third-party code, and also sometimes for Angular code!)

Zones cause some performance overhead, but that's not the real problem: the problem is that on every frame (or anytime anything changes in amCharts), Angular will do dirty checking of everything (including your app).

That's just how Angular is designed to work, so I'm not sure if there's anything we can do in amCharts to fix it, but you can fix it yourself by disabling Zones:

import { Component, NgZone } from "@angular/core";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

am4core.useTheme(am4themes_animated);

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  private chart: am4charts.XYChart;

  constructor(private zone: NgZone) {}

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      let chart = am4core.create("chartdiv", am4charts.XYChart);
      chart.paddingRight = 20;

      let data = [];
      let visits = 10;
      for (let i = 1; i < 366; i++) {
        visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
        data.push({ date: new Date(2018, 0, i), name: "name" + i, value: visits });
      }

      chart.data = data;

      let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
      dateAxis.renderer.grid.template.location = 0;

      let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
      valueAxis.tooltip.disabled = true;
      valueAxis.renderer.minWidth = 35;

      let series = chart.series.push(new am4charts.LineSeries());
      series.dataFields.dateX = "date";
      series.dataFields.valueY = "value";

      series.tooltipText = "{valueY.value}";
      chart.cursor = new am4charts.XYCursor();

      let scrollbarX = new am4charts.XYChartScrollbar();
      scrollbarX.series.push(series);
      chart.scrollbarX = scrollbarX;

      this.chart = chart;
    });
  }

  ngOnDestroy() {
    this.zone.runOutsideAngular(() => {
      if (this.chart) {
        this.chart.dispose();
      }
    });
  }
}

[Pauan]

We have updated our Angular tutorial to disable Zones, so future projects won't run into this problem.

[xire28]

The issue is present without angular so zone.js is not entirely responsable, see provided examples in my previous comment.

Can you open the issue again ?

Best regards,

[xire28]

Used UC instead of CPU in my previous mesurements.

Comparing realtime graph (15.1% CPU, 5% GPU):
https://codepen.io/team/amcharts/pen/MGVbNV
To highchart equivalent (6% CPU, 20% GPU):
https://www.highcharts.com/demo/dynamic-update/dark-unica

Amchart does not seem to use the GPU as much as possible and results in lags.

Interacting with:
https://codepen.io/team/amcharts/pen/qYVVEa
Shows high CPU usage (30%) in the task manager and very low GPU usage

Best regards,

[Pauan]

@xire28 Yes, we are aware that there are some things we can do to optimize our animations.

[calvinanderson]

@Pauan is there anything you can advise doing or disabling to increase responsiveness and performance?

[Pauan]

@calvinanderson You can try disabling animations (by using a non-animated theme, such as themes/material).

Other than that, I think the best you can do is wait for us to optimize it.

If you have some V4 code which is consistently slow, you can send it to us (either in a Codepen or a Gist) and we'll try to optimize it.

[martynasma]

Hi there,

We've come a long way since this was first reported. A lot of performance enhancing improvements were introduced.

I'm going to go ahead and close this. But please, anyone, if you still feel there are significant shortcomings in performance, please let us know.