angular-highcharts v17.0.1
angular-highcharts
This is a directive for an easy usage of Highcharts with angular.
Requirements
{
"angular": "^15.1.1",
"highcharts": "^10.3.3"
}Installation
yarn
# install angular-highcharts and highcharts
yarn add angular-highcharts highchartsnpm
# install angular-highcharts and highcharts
npm i --save angular-highcharts highchartsUsage Example
// 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));
}
}API Docs
Chart
The Chart object.
Type: class
Constructor
new Chart(options: Options)Properties
ref: Highcharts.Chart;Deprecated. Please use ref$.
ref$: Observable<Highcharts.Chart>Observable that emits a Highcharts.Chart - Official Chart API Docs
Methods
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
StockChart
The Chart object.
Type: class
Constructor
new StockChart(options);Properties
ref: Highstock.Chart;Deprecated. Please use ref$.
ref$: Observable<Highstock.Chart>Observable that emits a Highstock.Chart
MapChart
The Chart object.
Type: class
Constructor
new MapChart(options);Properties
ref;Deprecated. Please use ref$.
ref$;Observable that emits a Highmaps.Chart
Using Highcharts modules
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.
Example
// 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 { }Troubleshooting
Compile Issues
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.
Loading Highcharts Modules manually
See Official Highcharts Docs: http://www.highcharts.com/docs/getting-started/install-from-npm
Demo
License
MIT © Felix Itzenplitz
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago