How to use with Angular CLI

[tarnasky]

The "How to use" steps in the README do not show how to use this library with the Angular CLI. I think that would be helpful. Also, it would be better to install amcharts3 via npm rather than pointing to www.amcharts.com.

Here are the revised steps I had to take:

Installation

npm install amcharts3 --save
npm install amcharts3-angular2 --save

How to use

1. Add required script files to .angular-cli.json depending on your requirements. Here is an example:

      "scripts": [
        "../node_modules/amcharts3/amcharts/amcharts.js",
        "../node_modules/amcharts3/amcharts/xy.js",
        "../node_modules/amcharts3/amcharts/themes/light.js",
        "../node_modules/amcharts3/amcharts/plugins/export/export.min.js"
      ],

2. Add images used by amCharts to as an asset in .angular-cli.json:

      "assets": [
        "assets",
        "favicon.ico",
        "../node_modules/amcharts3/amcharts/images"
      ],

3. If required, add any styles (CSS files) that are part of the library to .angular-cli.json:

      "styles": [
        "styles.scss",
        "../node_modules/amcharts3/amcharts/plugins/export/export.css"
      ],

4. In your app module, import the AmChartsModule module and add it to the imports:

import { AmChartsModule } from "amcharts3-angular2";

@NgModule({
  imports: [
    AmChartsModule
  ]
})
export class AppModule {}

5. Inject the AmChartsService into your app component, create a <div> element with an id, then use the makeChart method to create the chart (note that you must specify the path in node_modules to amcharts3 or some dependent scripts and images will not be loaded):

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AmChartsService } from "amcharts3-angular2";

@Component({
  template: `<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>`
})
export class AppComponent implements OnInit, OnDestroy {
  private chart: any;

  constructor(private AmCharts: AmChartsService) {}

  ngOnInit() {
    this.chart = this.AmCharts.makeChart("chartdiv", {
      "type": "serial",
      "theme": "light",
      "dataProvider": []
      ...
    });
    this.chart.path = "/node_modules/amcharts3/amcharts/";
  }

  ngOnDestroy() {
    this.AmCharts.destroyChart(this.chart);
  }
}

The first argument to makeChart must be the same as the <div>'s id. The id can be whatever you want, but if you display multiple charts each chart must have a different id

When you are finished with the chart, you must call the destroyChart method. It's good to put this inside the ngOnDestroy method.

6. If you want to change the chart after the chart has been created, you must make the changes using the updateChart method:

// This must be called when making any changes to the chart
this.AmCharts.updateChart(this.chart, () => {
  // Change whatever properties you want, add event listeners, etc.
  this.chart.dataProvider = [];

  this.chart.addListener("init", () => {
    // Do stuff after the chart is initialized
  });
});

[Pauan]

@tarnasky Thanks! I'll consider adding your steps to the README.

[BrkCoder]

Excellent

[achyutgp]

Installing AmCharts using npm install amcharts3 --save failed saying no registry found with name amcharts3.

I followed below steps to install amcharts3.

[racerhere]

The correct packages are:

npm install amcharts/amcharts3 --save
npm install @amcharts/amcharts3-angular --save

The ones mentioned by @tarnasky are not AoT compatible and do not follow Angular Package Format.

[vl4d]

Same goes for if you'd like to use this library with ammap, I had to add the following to my .angular-cli.json file for my map needs, with the ammaps package being:

npm install amcharts/ammap3 --save

For Scripts (include the theme/map and if export plugin is needed)

"scripts": [
        "../node_modules/ammap3/ammap/ammap.js",
        "../node_modules/ammap3/ammap/maps/js/worldHigh.js",
        "../node_modules/ammap3/ammap/themes/light.js",
        "../node_modules/ammap3/ammap/plugins/export/libs/fabric.js/fabric.min.js",
        "../node_modules/ammap3/ammap/plugins/export/libs/FileSaver.js/FileSaver.min.js",
        "../node_modules/ammap3/ammap/plugins/export/libs/jszip/jszip.min.js",
        "../node_modules/ammap3/ammap/plugins/export/libs/pdfmake/pdfmake.min.js",
        "../node_modules/ammap3/ammap/plugins/export/export.min.js"
 ]

For Styles

"styles": [
        "../node_modules/ammap3/ammap/plugins/export/export.css"
      ]

[achyutgp]

@vl4d there is no need to add fabric, filesaver, jszip and pdfmake to .angular-cli.json. Export plugin will lazy load the necessary script files. But, we need set to chart path property to point "../node_modules/ammap3/ammap"

[gokulraj809040]

please provide a working example for amcharts3-angular2 as don't know how to pass data into dataprovider

[Pauan]

@gokulraj809040 We have a working example here.

You can set the dataProvider when making the chart:

this.chart = this.AmCharts.makeChart("chartdiv", {
  "dataProvider": []
});

Or you can change the dataProvider after the chart has been created:

this.AmCharts.updateChart(this.chart, () => {
  this.chart.dataProvider = [];
});

[gokulraj809040]

thanks.

[jrpereirajr]

In order to get assets working, I've been need to write assets section like described in angular-cli documentation. Furthermore, I've been used export plugin, so its assets also has been imported (lines 5 to 7).

"assets": [
  "assets",
  "favicon.ico",
  { "glob": "**/*", "input": "../node_modules/amcharts3/amcharts/images", "output": "./amcharts/images/" },
  { "glob": "**/*", "input": "../node_modules/amcharts3/amcharts/plugins/export/lang", "output": "./amcharts/plugins/export/lang/" },
  { "glob": "**/*", "input": "../node_modules/amcharts3/amcharts/plugins/export/libs", "output": "./amcharts/plugins/export/libs/" },
  { "glob": "**/*", "input": "../node_modules/amcharts3/amcharts/plugins/export/shapes", "output": "./amcharts/plugins/export/shapes/" }
],

My package.json: "angular/core": "^4.2.4", "angular/cli": "1.3.2", "amcharts3": "github:amcharts/amcharts3", "amcharts3-angular2": "^1.2.1",

[RiccardoGai]

Thank you for the guide, i suggest to add on the readme. Anyway, i had to add some file on angular-cli.json, because i had some 404 on browser console.

 "scripts": [
        "../node_modules/amcharts3/amcharts/amcharts.js",
        "../node_modules/amcharts3/amcharts/xy.js",
        "../node_modules/amcharts3/amcharts/serial.js",
        "../node_modules/amcharts3/amcharts/themes/light.js",
        "../node_modules/amcharts3/amcharts/plugins/export/export.min.js",
        "../node_modules/amcharts3/amcharts/plugins/export/libs/fabric.js/fabric.js",
        "../node_modules/amcharts3/amcharts/plugins/export/libs/FileSaver.js/FileSaver.js",
        "../node_modules/amcharts3/amcharts/plugins/export/libs/jszip/jszip.js",
        "../node_modules/amcharts3/amcharts/plugins/export/libs/pdfmake/pdfmake.js"
 ],

[jeslomo]

Hi,

Anyone can add "AmStock" and you can use in Angular4 Project?

[Pauan]

@jeslomo Yes, you can use AmStock:

1. Add the following <script> tags to your index.html file:

   <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
   <script src="https://www.amcharts.com/lib/3/serial.js"></script>
   <script src="https://www.amcharts.com/lib/3/amstock.js"></script>
   <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
   

2. Use the stock type for the configuration:

   ngAfterViewInit() {
     this.chart = this.AmCharts.makeChart("chartdiv", {
       "type": "stock",
   
       "dataSets": [{
         "fieldMappings": [{
           "fromField": "value",
           "toField": "value"
         }],
         "dataProvider": this.chartData,
         "categoryField": "date"
       }],
   
       "panels": [{
         "stockGraphs": [{
           "valueField": "value"
         }]
       }],
   
       ...
     });
   }
   

The configuration is exactly the same as with AmCharts v3, so you can learn more from our demos and documentation.

[lauritowal]

How to use armchart with angular cli for Angular5?

[Manzar-Alam]

{ "glob": "**/*", "input": "../node_modules/amcharts3/amcharts/images", "output": "./amcharts/images/" },

Thank you @tarnasky it solved my problem.