amCharts Angular Tutorial

What is amCharts?

amCharts has a wide varity of charts and maps and is a great choice as a charting library. It is highly customizable and responsive. The primary concerns with amCharts are around its cost for commercial use and the size/load time for the underlying package.

What is Angular?

Angular is a popular open-source framework developed by Google for building dynamic web applications. It's part of a broader ecosystem that includes tools and libraries designed to work together to enable efficient development of high-quality applications. Angular is known for its robustness, scalability, and ability to create single-page applications (SPAs) that offer a smooth, native-like user experience. Angular has a component-based architecture, enabling great modularity. Additionally, it is great at syncing data between a view and a model. It can have a steep learning curve, but has a great community and high performance.

amCharts Angular Code Example

This example demonstrates how to integrate the amCharts library into an Angular application. We will create a simple bar chart. Ensure you have Angular CLI installed and set up before proceeding.

Step 1: Create a New Angular Project

Open your terminal or command prompt and run the following command to create a new Angular project:

ng new amcharts-angular-example

Navigate into your project folder:

cd amcharts-angular-example

Step 2: Install amCharts

Install amCharts 4 packages via npm by running:

npm install @amcharts/amcharts4

Step 3: Import amCharts in Angular

Open the app.module.ts file and add import statements for amCharts. Although amCharts does not need to be imported into the AppModule, it's a good practice to organize your imports and dependencies:

// app.module.ts

// Other imports
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);


Step 4: Create a Component for the Chart

Create a new Angular component where the chart will be rendered:

ng generate component bar-chart

In the bar-chart.component.ts, add the code to create a simple bar chart:

// bar-chart.component.ts

import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";

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

 constructor(private zone: NgZone) {}

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

     // Add data
     chart.data = [{
       "category": "Category 1",
       "value": 50
     }, {
       "category": "Category 2",
       "value": 35
     }];

     // Create axes
     let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
     categoryAxis.dataFields.category = "category";

     let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

     // Create series
     let series = chart.series.push(new am4charts.ColumnSeries());
     series.dataFields.valueY = "value";
     series.dataFields.categoryX = "category";

     this.chart = chart;
   });
 }

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


In the bar-chart.component.html, add a div for the chart:

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

Step 5: Add the Component to Your App

In your app.component.html, include the bar-chart component:

<app-bar-chart></app-bar-chart>

Now, run your Angular application:

ng serve

Navigate to http://localhost:4200/ to view your chart.