Angular 4 AmChart

Question

I've Angular project where I'm trying to integrate amCharts. I've html page which looks like:

<div class="col-md-12">
        <div id="chartdiv" style="width: 100%; height: 500px"></div>
</div>

and Component which I copied from documentation but for some reason it does not work:

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: 'page',
    styleUrls: ['./page.scss'],
    templateUrl: './page.html'
})
export class PageComponent {
    private chart: am4charts.XYChart;

    constructor(private service: PageService,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();
            }
        });
    }

}

But I'm still getting error EXCEPTION: Uncaught (in promise): TypeError: {} is not a constructor TypeError: {} is not a constructor. Unhandled Promise rejection: {} is not a constructor ; Zone: angular ; Task: Promise.then ; Value: TypeError: {} is not a constructor. I've tried to debug it and error is caused when I use am4core. As I said I've copied the code from documentation, but it still not working.

score 1 · Accepted Answer · answered Sep 17 '19 at 18:01

1

the issue is the init method which should be ngOnInit instead of ngAfterViewInit. the rest is fine. https://stackblitz.com/edit/angular-gu9tkx

the difference is here

answered Sep 17 '19 at 18:01

emrhzc

1,347
11
19

score 0 · Answer 2 · answered Sep 17 '19 at 14:07

0

I've just created a new angular application with amchart4 without any error following the guide. Which version of Angular and TypeScript are you using? As the guide say, AmChart require TypeScript 2.8 or later.

answered Sep 17 '19 at 14:07

Riccardo Gai

421
1
6
19

That must be it. I've v2.1.5 – Andria Toria Sep 17 '19 at 14:13
@AndriaToria I am using v2.7.3 but it still works fine for me. Have you tried creating graph like this: this.zone.runOutsideAngular(() => { let chart = am4core.create("chartdiv", am4charts.XYChart); // ... chart code goes here ... this.chart = chart; }); – Shrutika Patil Sep 24 '19 at 14:03

score 0 · Answer 3 · answered Jan 17 '21 at 19:10

0

I apply these lines under "compilerOptions" in "tsconfig.json"

"noImplicitAny": false,
"strictNullChecks": false,

answered Jan 17 '21 at 19:10

chelo_medrano

1
1

score -1 · Answer 4 · edited Mar 25 '20 at 08:15

-1

You are using ngAfterViewInit(),ngOnDestroy() Lifecycle Hooks, therefore you just need to implement the interface.

export class PageComponent implements OnDestroy,AfterViewInit {

edited Mar 25 '20 at 08:15

mohammed wazeem

1,310
1
10
26

answered Mar 25 '20 at 06:14

Hans

308
7
20

Angular 4 AmChart

4 Answers4