Official Angular 2 plugin for amCharts V3
npm install @amcharts/amcharts3-angularOfficial Angular plugin for amCharts V3
Installation
============
* If you are using Angular 12 or higher:
``
npm install @amcharts/amcharts3-angular --save
* If you are using Angular 5 to 11:
`
npm install @amcharts/amcharts3-angular^2.2.5 --save
* If you are using Angular 2 to 4:
`
npm install @amcharts/amcharts3-angular@^1.5.0 --save
How to use
==========
1) In your index.html file, load the amCharts library using
`
If you are using stock charts, you should use these
`
If you are using maps, you should use these
`
If you are using other chart types, you should change serial.js to the chart type that you are using:
`html`
----
2) In your app component, import the AmChartsModule module and add it to the imports:
`typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { AmChart, AmChartsService, AmChartsModule } from '@amcharts/amcharts3-angular';
@Component({
selector: 'app-root',
standalone: true,
// Add the import here
imports: [CommonModule, RouterOutlet, AmChartsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
`
----
3) Inject the AmChartsService into your app component, create a
element with an id, then use the makeChart method to create the chart:`html
`typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { AmChart, AmChartsService, AmChartsModule } from '@amcharts/amcharts3-angular';@Component({
selector: 'app-root',
standalone: true,
// Add the import here
imports: [CommonModule, RouterOutlet, AmChartsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
private chart: AmChart | undefined;
// Inject the service here
constructor(private AmCharts: AmChartsService) {}
ngAfterViewInit() {
this.chart = this.AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": []
...
});
}
ngOnDestroy() {
if (this.chart) {
this.AmCharts.destroyChart(this.chart);
}
}
}
`The first argument to
must be the same as the 's id. The id can be whatever you want, but if you display multiple charts each chart must have a different idWhen you are finished with the chart, you must call the
method. It's good to put this inside the ngOnDestroy method.----
4) If you want to change the chart after the chart has been created, you must make the changes using the
updateChart method:`typescript
// This must be called when making any changes to the chart
this.AmCharts.updateChart(this.chart, () => {
// Change whatever properties you want
this.chart.dataProvider = [];
});
`----
5) If you want to add event listeners, use the
method:`typescript
this.AmCharts.addListener(this.chart, "init", (e) => {
// Do stuff when the event happens
});
`The
method returns a function which you can call if you want to stop listening to the event:`typescript
const stop = this.AmCharts.addListener(this.chart, "init", (e) => {
// Do stuff when the event happens
});// Call the stop function when you want to stop listening to the event
stop();
`----
6) Rather than using
you can instead use the tag in your template:`typescript
@Component({
template:
})
export class AppComponent {
public options = {
"type": "serial",
"theme": "light",
"dataProvider": []
...
};
}
This is much easier than using
, but you cannot call the AmCharts methods, and it is difficult to change the chart options, so it works best for charts which do not change.----
You can see some examples in the
examples directory.Changelog
$3
* Adding in support for Angular 20 and 21$3
* Adding in support for Angular 19$3
* Adding in support for Angular 18$3
* Adding in support for Angular 17$3
* Adding in support for Angular 16$3
* Adding in support for Angular 15$3
* Adding in support for Angular 14$3
* Adding in support for Angular 13$3
* Adding in support for Angular 12 Ivy$3
* Upgrading to Angular 9 - 12$3
* Upgrading to Angular 8$3
* Upgrading to Angular 7$3
* Adding in StockEvent and StockLegend constructors for dynamically adding stock events/legend.$3
* Adding in StockPanel and StockGraph constructors for dynamically adding stock panels/graphs.$3
* Adding in addInitHandler, addPrefix, clear, formatDate, formatNumber, and stringToDate methods to AmChartsService$3
* Upgrading to Angular 5
* Removing the Quickstart Seed example$3
* Adding in method$3
* Undeprecating the AmChartsDirective
* Adding in option for AmChartsDirective$3
* Adding in all of the global properties to the AmChartsService$3
* Updating to the latest version of the Angular compiler$3
* Adding in support for Angular 4
* Deprecating the element in favor of the new AmChartsService`