This is a directive for an easy usage of Highcharts with angular.
{
"angular": "^15.1.1",
"highcharts": "^10.3.3"
}# install angular-highcharts-es and highcharts
yarn add angular-highcharts-es highcharts# install angular-highcharts-es and highcharts
npm i --save angular-highcharts-es highcharts// app.module.ts
import { ChartModule } from "angular-highcharts-es";
@NgModule({
imports: [
ChartModule, // add ChartModule to your imports
],
})
export class AppModule {}// chart.component.ts
import { Chart } from "angular-highcharts-es";
@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-es";
import * as exporting from "highcharts/es-modules/masters/modules/exporting.src";
import * as more from "highcharts/es-modules/masters/highcharts-more.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