With the release of amCharts Angular plugin 1.2 we've made some significant changes. If you were using this plugin before, make sure you read below and update your code accordingly, so that you can use the plugin in the most efficient way.
We have retired the <amCharts>
element in favor of AmChartsService
.
While we will continue supporting the old way for now, we strongly suggest updating your code to use the new syntax.
Below are examples of the old and new usage.
Creating the chart
Old syntax
@Component({ template: `<amCharts [id]="id" [options]="options" [style.width.%]="100" [style.height.px]="500"></amCharts>` }) export class AppComponent { private id = "chartdiv"; private options = { "type": "serial", "theme": "light", "dataProvider": [] ... }; }
New syntax
import { AmChartsService } from "amcharts3-angular2"; @Component({ template: `<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>` }) export class AppComponent { private chart: any; constructor(private AmCharts: AmChartsService) {} ngOnInit() { this.chart = this.AmCharts.makeChart("chartdiv", { "type": "serial", "theme": "light", "dataProvider": [] ... }); } ngOnDestroy() { this.AmCharts.destroyChart(this.chart); } }
Dynamically updating the chart
Old syntax
changeChart() { // Make a copy of the existing config this.options = JSON.parse(JSON.serialize(this.options)); // Change the config this.options.dataProvider = [...]; }
Or
makeConfig(dataProvider) { return { "type": "serial", "theme": "light", "dataProvider": dataProvider ... }; } changeChart() { this.options = this.makeConfig([...]); }
New syntax
changeChart() { this.AmCharts.updateChart(this.chart, () => { this.chart.dataProvider = [...]; }); }