Building interactive charts with AmCharts in Angular

AmCharts is one of the widely used JavaScript-based interactive charts and maps programming libraries and tools. In this post we will look at how to integrate the AmCharts into Angular project.

Prerequisites

Before getting started, make sure you have the following dependencies installed:

• Angular CLI: This is used to create and manage Angular projects. If you don’t already have it installed, you can install it by running npm install -g @angular/cli.

Step 1: Create a new Angular project

To create a new Angular project, open a terminal window and run the following command:

ng new ng-amcharts

Replace ng-amcharts with the name of your project. This will create a new Angular project with the specified name and install all the necessary dependencies.

Step 2: Add the dygraphs library to your project

To use AmCharts in your Angular project, you’ll need to first install the dependencies. Navigate to the project’s root directory and install the AmCharts library using npm:

cd ng-amcharts
npm install @amcharts/amcharts4 --save

Step 3: Configure AmCharts in Angular

Open the angular.json file in the project directory and add the AmCharts scripts to the scripts array:

"scripts": [
  "node_modules/@amcharts/amcharts4/core.js",
  "node_modules/@amcharts/amcharts4/charts.js",
  "node_modules/@amcharts/amcharts4/themes/animated.js"
]

Step 4: Create a new component

Generate a new component to display the chart by running the following command:

ng generate component chart

Step 5: Implement the chart component

Open the generated chart.component.ts file and import the necessary AmCharts modules:

import { Component, OnInit, 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';

Next, for the chart component class and implement the chart logic:

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

  constructor(private zone: NgZone) {}

  ngOnInit() {
    this.zone.runOutsideAngular(() => {
      am4core.useTheme(am4themes_animated);

      // Create chart instance
      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.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();
      }
    });
  }
}

Step 6: Create the chart template

Open the generated chart.component.html file and add a element with the id set to “chartdiv“:

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

Step 7: Style the chart component

Open the generated chart.component.css file and add any custom styling you require.

Step 8: Use the chart component

Open the app.component.html file and add the component tag to use the chart component.

<app-chart></app-chart>

And, also don’t forget to declare the chart component in the app.module.ts!!.

That’s it! You have now created an interactive chart using AmCharts in Angular. Go ahead and configure the chart settings, data, series, axes, cursor, and scrollbar based on your specific requirements.

Note: AmCharts is free with one limitation. You can consider buying a license!. PFB screenshot.

Conclusion:

• We have created a sample angular project using angular-cli.
• We have integrated AmCharts into Angular project and added a simple line chart component with sample data.

Checkout Github repo for complete code sample!.