Migrating to amCharts Angular plugin 1.2

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 = [...];
  });
}