Angular2 + amCharts

Angular2 using amCharts

It is assumed that you have knowledge of angular2.

AMCharts: https://www.amcharts.com/

Download amCharts

Download Javascript Charts of amChart library: https://www.amcharts.com/download/

(At time of writing this blog, I have downloaded "amcharts_3.20.20.free")
 Extract contents of downloaded zip file.

Create project

I am creating a new module amChartsDemo

        ng new amChartsDemo

Copy "amcharts" folder from extracted zip file and paste in amChartsDemo project. So folder structure is like "amChartsDemo/amcharts".

Install amcharts module in project

        npm install amcharts/amcharts3-angular2 --save 

This step was necessary to add amcharts module into our project.

Gitlab link for module: https://github.com/amcharts/amcharts3-angular2

Since we have access to "amcharts" module now, we need to add it into declarations in "app.module.ts".
        import { AmChartsDirective } from "amcharts3-angular2/amcharts.directive";
        ...
        declarations: [ AmChartsDirective ]

And then we need to add javascript files we are going to use in "angular-cli.json". So "scripts" looks like
      "scripts": [
        "../amcharts/amcharts.js",
        "../amcharts/serial.js"
      ]

Create chart

Create a new component to create chart

        cd amChartsDemo/src/app

        ng g c bar-chart

Remove specs file and CSS as we will not be using them.

In HTML file, write following as a place for chart

------------------------- bar-chart.component.html -------------------------
<amCharts [id]="id" [options]="chart" style="height:400px; width: 500px"></amCharts>
------------------------- end -------------------------

id --> used to identify chart

options --> used to identify chart object that will be used to create chart

style --> styling for chart

Edit bar-chart.component.ts as below. Our component just contains "id" of chart. And the "chart" object that will be used to render chart.

------------------------- bar-chart.component.ts -------------------------

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html'
})
export class BarChartComponent {
  id = "chartdiv";

  chart = {
    "type": "serial",
    "theme": "light",
    "valueAxes": [ {
      "axisAlpha": 0,
      "position": "left",
      "title": "income (thousand) in Indian Rupees"
    }],
    "categoryField": "year",
    "categoryAxis": {
      "gridPosition": "start",
      "labelRotation": 45
    },
    "startupDuration": 1,
    "graphs": [{
      "balloonText": "[[category]]: [[value]]",
      "fillColorsField": "color",
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "valueField": "income",
      "fillColors": "green"
    }],
    "chartCursor": {
      "categoryBalloonEnabled": false,
      "cursorAlpha": 0,
      "zoomable": false
    },
    "dataProvider": [{
                    "year": 2005,
                    "income": 23.5
                },
                {
                    "year": 2006,
                    "income": 26.2
                },
                {
                    "year": 2007,
                    "income": 30.1
                },
                {
                    "year": 2008,
                    "income": 29.5
                },
                {
                    "year": 2009,
                    "income": 24.6
                }],
      "export": {
        "enabled": true
      }
  };
}

------------------------- end -------------------------

Note:
In AMChart terminology
        - X axis is called category

        - Y axis is called values

Chart object detail
"type" --> type of chart (serial in our case)
"valueAxes" --> information about Y axis
"categoryField" "categoryAxis" --> information about X axis
"graphs" --> graph rendering information
"dataProvider" --> data input for chart to be rendered. This is array of java objects. "categoryField" is one of the properties. "graphs.valueField" is another property.

Add chart to display

Now add this chart to "app.component.html" so that it can be displayed. Note: component's tag: "app-bar-chart"

       

Output