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 highcharts
npm
# install angular-highcharts and highcharts
npm i --save angular-highcharts highcharts
Usage 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]): void
Adds a point to a serie
removePoint(pointIndex: number, [serieIndex: number = 0], [redraw: boolean = true], [shift: boolean = false]): void
Removes a point from a serie
addSeries(series: ChartSerie): void
Adds a series to the chart
removeSeries(seriesIndex: number): void
Remove 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