Highcharts for your Angular2 project
npm install angular2-highcharts> Highcharts chart components for Angular apps. š Live Demo
npm install angular2-highcharts --save
$3
TypeScript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular2-highcharts';
import { App } from './App';@NgModule({
imports: [
BrowserModule,
ChartModule.forRoot(require('highcharts')
],
declarations: [App],
bootstrap: [App]
})
export class AppModule {}
`$3
No any additional setup needed$3
You should add appropriate mapping to your js
...
map: {
...
'angular2-highcharts': 'node_modules/angular2-highcharts',
'highcharts': 'node_modules/highcharts',
}
...
packages: {
...
highcharts: {
main: './highcharts.js',
defaultExtension: 'js'
},
'angular2-highcharts': {
main: './index.js',
defaultExtension: 'js'
}
}
`Usage
$3
#### Create First Chart Component
Main charts functionality provided by the
component and its options property.`TypeScript
import { Component } from '@angular/core';@Component({
selector: 'simple-chart-example',
template:
})
export class App {
constructor() {
this.options = {
title : { text : 'simple chart' },
series: [{
data: [29.9, 71.5, 106.4, 129.2],
}]
};
}
options: Object;
}
š Live Demo$3
Highcharts itself provides bunch of events, and you still can use them with angular2-higcharts via the property of the chart component. But it is not an angular way to handle events like this. So that angular2-higcharts provides EventEmitter wrappers for highcharts events. ChartEvent is an angular2-higcharts class which simply wraps original Highcharts events (chartEvent.originalEvent) and adds event handler context (chartEvent.context) since it differs depending on events.#### Chart Events
All the events from the options.chart.events are available as output properties of the
chart component.`HTML
`
TypeScript
onChartSelection (e) {
this.from = e.originalEvent.xAxis[0].min.toFixed(2);
this.to = e.originalEvent.xAxis[0].max.toFixed(2);
}
`
š Live Demo#### Series Events
To use series events the same way you need to add the
component as a child of your chart. The only purpose of this auxiliary component is to provide access to options.plotOptions.series.events API`HTML
{{serieName}} is hovered
`
TypeScript
onSeriesMouseOver (e) {
this.serieName = e.context.name;
}
`
š Live Demo
#### Point Events Similary you can use the
to access to options.plotOptions.series.point.events API.
`HTML
{{point}} is selected
`
š Live Demo
#### Axis Events Similary you can use the
or yAxes to access to options.xAxis.events or options.yAxis.events API.
`HTML
{{minX}} - {{maxX}}
{{minY}} - {{maxY}}
`
TypeScript
onAfterSetExtremesX (e) {
this.minX = e.context.min;
this.maxX = e.context.max;
}
onAfterSetExtremesY (e) {
this.minY = e.context.min;
this.maxY = e.context.max;
}
`
š Live Demo
$3
angular2-higcharts provides possibility to interact with native
chart object.`TypeScript
@Component({
selector: 'my-app',
directives: [CHART_DIRECTIVES],
template:
})
class AppComponent {
constructor() {
this.options = {
chart: { type: 'spline' },
title: { text : 'dynamic data example'}
series: [{ data: [2,3,5,8,13] }]
};
setInterval(() => this.chart.series[0].addPoint(Math.random() * 10), 1000);
}
chart : Object;
options: Object;
saveInstance(chartInstance) {
this.chart = chartInstance;
}
}
š Live Demo$3
Also you need to change your setup.`diff
...
@NgModule({
...
imports: [
BrowserModule,
ChartModule.forRoot(
- require('highcharts')
+ require('highcharts/highstock')
)
]
})
`š Live Demo
$3
Also you need to change your setup.`diff
...
@NgModule({
...
imports: [
BrowserModule,
ChartModule.forRoot(
- require('highcharts')
+ require('highcharts/highmaps')
],
})
`š Live Demo
$3
Any other modules like highcharts-3d, highcharts-exporintg and etc. can be also added in after main chart module`diff
...
@NgModule({
...
imports: [
BrowserModule,
ChartModule.forRoot(
require('highcharts'),
+ require('highcharts/highchart-3d'),
+ require('highcharts/modules/exporting')
],
})
`Check out structure of the
folder to find necessary module.š Live Demo
$3
`diff
...
const Highcharts = require('highcharts');Highcharts.setOptions({
colors: ['#50B432']
});
@NgModule({
...
imports: [
BrowserModule,
ChartModule.forRoot(
- require('highcharts'),
+ Highcharts,
],
})
`š Live Demo
##More Examples
Here are some common charts examples with Webpack integration https://github.com/gevgeny/angular2-highcharts/tree/master/examples/webpack
##FAQ
#### Why don't my series, title, axes and etc redraw after I update initial options ?
Because
is just a thin wrapper of the Highcharts library and doesn't bind to initial options. I understand that you expect more angular-way behaviour like data binding with appropriate redrawing. But it is barely possible to implement it without redundant complications and performance decrease because almost all options can be dynamic. So my idea was to avoid any additional logic more than just a sugar (like events for series and options). In the other hand Highcharts has great API for dynamic manipulations with chart and angular-highcharts` provides you access to the original chart object.