Installation

npm install amcharts/amcharts3-angular2 --save

How to use

In your HTML file, load the amCharts library using <script> tags:

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

In your Angular2 module, import the amCharts directive and place it into the declarations:

import { AmChartsDirective } from "amcharts3-angular2/amcharts.directive";

@NgModule({
  declarations: [ AmChartsDirective ]
})

Use the <amCharts> tag in your template:

@Component({
  template: `<amCharts [id]="id" [options]="chart" [style.width.%]="100" [style.height.%]="100"></amCharts>`
})

Specify the chart config in your component:

export class AppComponent {
  id = "chartdiv";

  chart = {
    "type": "serial",
    "theme": "light",
    "dataProvider": []
    ...
  };
}

If you want to dynamically change the chart config after the chart has been created, you first need to create a copy of the existing config:

// Make a copy of the existing config
this.chart = JSON.parse(JSON.serialize(this.chart));

// Change the config
this.chart.dataProvider = [...];

Alternatively, you can use a function to create a new config:

function makeConfig(dataProvider) {
  return {
    "type": "serial",
    "theme": "light",
    "dataProvider": dataProvider
    ...
  };
}

// Change the config
this.chart = makeConfig([...]);

Why do you need to make a copy of the config? Even if you change the properties of the object, the object itself has not changed, and therefore Angular2 does not update the AmCharts directive.

But if you make a copy of the object, then Angular2 realizes that the object is different, and so it updates the AmCharts directive. This is an issue with Angular2, and there isn't much we can do about it.

Recommend Projects