This is a directive for an easy usage of Highcharts with angular.
{ "angular": "^15.1.1", "highcharts": "^10.3.3" }# install angular-highcharts and highcharts yarn add angular-highcharts highcharts# install angular-highcharts and highcharts npm i --save angular-highcharts highcharts// app.module.ts import { ChartModule } from 'angular-highcharts'; @NgModule({ imports: [ ChartModule // add ChartModule to your imports ] }) export class AppModule {}// chart.component.ts import { Chart } from 'angular-highcharts'; @Component({ template: ` <button (click)="add()">Add Point!</button> <div [chart]="chart"></div> ` }) export class ChartComponent { chart = new Chart({ chart: { type: 'line' }, title: { text: 'Linechart' }, credits: { enabled: false }, series: [ { name: 'Line 1', data: [1, 2, 3] } ] }); // add point to chart serie add() { this.chart.addPoint(Math.floor(Math.random() * 10)); } }The Chart object.
Type: class
new Chart(options: Options)ref: Highcharts.Chart;Deprecated. Please use ref$.
ref$: Observable<Highcharts.Chart>Observable that emits a Highcharts.Chart - Official Chart API Docs
addPoint(point: Point, [serieIndex: number = 0]): voidAdds a point to a serie
removePoint(pointIndex: number, [serieIndex: number = 0], [redraw: boolean = true], [shift: boolean = false]): voidRemoves a point from a serie
addSeries(series: ChartSerie): voidAdds a series to the chart
removeSeries(seriesIndex: number): voidRemove series from the chart
The Chart object.
Type: class
new StockChart(options);ref: Highstock.Chart;Deprecated. Please use ref$.
ref$: Observable<Highstock.Chart>Observable that emits a Highstock.Chart
The Chart object.
Type: class
new MapChart(options);ref;Deprecated. Please use ref$.
ref$;Observable that emits a Highmaps.Chart
To use Highcharts modules you have to import them and provide them in a factory (required for aot). You can find the list of available modules in the highcharts folder ls -la node_modules/highcharts/modules.
Hint: Highcharts-more is a exception, you find this module in the root folder. Don't forget to use the modules with the .src suffix, minimized highcharts modules are not importable.
// app.module.ts import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts'; import * as more from 'highcharts/highcharts-more.src'; import * as exporting from 'highcharts/modules/exporting.src'; @NgModule({ providers: [ { provide: HIGHCHARTS_MODULES, useFactory: () => [ more, exporting ] } // add as factory to your providers ] }) export class AppModule { }If you expiring typing errors while you build/serve your angular app the following could be helpful:
// override options type with <any> chart = new Chart({ options } as any);This is very useful when using gauge chart type.
See Official Highcharts Docs: http://www.highcharts.com/docs/getting-started/install-from-npm
MIT © Felix Itzenplitz