Am Charts In Angular

In this blog, we will learn about how to create amChart-4 in angular. Charts are useful way to display the data visualization and amCharts is one of the powerfull library for charts.

Step 1: Create an Angular Application

ng new amChart

Step 2: Install node_modules

npm install

Step 3: Install amChart packages

npm install @amcharts/amcharts4

Step 4: In index.html, add below script

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

Step 5: In app.component.html

<app-chart></app-chart>

Step 6: Add new Component

ng g c chart

Step 7: In chart.component.ts file

import { Component, Inject, NgZone, PLATFORM_ID,OnInit } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent {
  private chart: am4charts.XYChart|any;
  valueAxis:any;

  constructor(@Inject(PLATFORM_ID)private platformId: any, private zone: NgZone) { }

  browserOnly(f: () => void) {
    if (isPlatformBrowser(this.platformId)) {
      this.zone.runOutsideAngular(() => {
        f();
      });
    }
  }

  ngAfterViewInit() {
    this.browserOnly(() => {
      am4core.useTheme(am4themes_animated);

      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;

      this.valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
      this.valueAxis.tooltip.disabled = true;
      this.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.browserOnly(() => {
      if (this.chart) {
        this.chart.dispose();
      }
    });
  }
}

Step8:In chart.component.html

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

Step9:Now Run the Application

npm start

That’s it.