Using Angular

This tutorial will show you every step you need to use amCharts 4 with Angular.

VERSION INFO This tutorial deals with Angular2 or later. If you are using AngularJS 1.x, please refer to this tutorial instead.

First, create a new Angular project:

npx -p @angular/cli ng new my-project
cd my-project

Edit the package.json and add --prod to the "build" script:

"scripts": {
  ...
  "build": "ng build --prod",
  ...
},

You can now run your project by using this command:

npm start

If you load http://localhost:4200/ in a browser, you should see your new project!

Now it's time to add in an amCharts 4 chart. Use this command to install amCharts 4:

npm install @amcharts/amcharts4

You must now add in the following code to the src/app/app.component.html file:

<div id="chartdiv" style="width: 100%; height: 500px"></div>

Lastly, in the src/app/app.component.ts file you must add in the following code:

You have to add in the imports at the top, and also set the theme:

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

NOTE If you want to support older browsers, make sure you set up polyfills. Click here for detailed instructions.

Then you have to inject the NgZone service and add in an ngAfterViewInit method which creates the chart:

private chart: am4charts.XYChart;

constructor(private zone: NgZone) {}

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

    // ... chart code goes here ...

    this.chart = chart;
  });
}

Lastly you have to add in an ngOnDestroy method, which disposes the chart:

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

Here is a full working example:

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();
      }
    });
  }
}

Now you can run npm start again and you should see a chart.

IMPORTANT Currently amCharts 4 does not fully support TypeScript's strict mode. Please click here for more details.