This is a fork based on https://github.com/gevgeny/angular2-highcharts
Highcharts chart components for Angular apps. π Live Demo
- Setting Up
- Install angular2-highcharts
- Setup App @NgModule
- Usage
- Basic Usage
- Handling Events
- Dynamic Interaction with Chart Object
- Tooltip Formatter for Chart Object
- Highstock
- Highmaps
- Add Highcharts Modules
- Access to the Highcharts Static API
- More Examples
- FAQ
- License
npm install @rijine/ngx-highcharts --save
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from '@rijine/ngx-highcharts';
import { App } from './App';
@NgModule({
imports: [
BrowserModule,
ChartModule.forRoot(require('highcharts'))
],
declarations: [App],
bootstrap: [App]
})
export class AppModule {}
No any additional setup needed
You should add appropriate mapping to your systemjs.config.js
...
map: {
...
'@rijine/ngx-highcharts': 'node_modules/@rijine/ngx-highcharts',
'highcharts': 'node_modules/highcharts',
}
...
packages: {
...
highcharts: {
main: './highcharts.js',
defaultExtension: 'js'
},
'@rijine/ngx-highcharts': {
main: './index.js',
defaultExtension: 'js'
}
}
Main charts functionality provided by the chart
component and its options
property.
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'simple-chart-example',
template: `
<chart [options]="options"></chart>
`
})
export class App {
constructor() {
this.options = {
title : { text : 'simple chart' },
series: [{
data: [29.9, 71.5, 106.4, 129.2],
}]
};
}
options: Highcharts.Object;
}
π Live Demo
Highcharts itself provides bunch of events, and you still can use them with @rijine/ngx-highcharts via the options
property of the chart
component. But it is not an angular way to handle events like this. So that @rijine/ngx-highcharts provides EventEmitter<ChartEvent>
wrappers for highcharts events. ChartEvent
is an @rijine/ngx-highcharts class which simply wraps original Highcharts events (chartEvent.originalEvent
) and adds event handler context (chartEvent.context
) since it differs depending on events.
All the events from the options.chart.events are available as output properties of the chart
component.
<chart [options]="options" (selection)="onChartSelection($event)"> </chart>
onChartSelection (e) {
this.from = e.originalEvent.xAxis[0].min.toFixed(2);
this.to = e.originalEvent.xAxis[0].max.toFixed(2);
}
π Live Demo
To use series events the same way you need to add the series
component as a child of your chart. The only purpose of this auxiliary component is to provide access to options.plotOptions.series.events API
<chart [options]="options">
<series (mouseOver)="onSeriesMouseOver($event)">
</series>
</chart>
<p><b>{{serieName}}</b> is hovered<p>
onSeriesMouseOver (e) {
this.serieName = e.context.name;
}
π Live Demo
Similary you can use the point
to access to options.plotOptions.series.point.events API.
<chart [options]="options">
<series>
<point (select)="onPointSelect($event)"></point>
</series>
</chart>
<p><b>{{point}}</b> is selected<p>
π Live Demo
Similary you can use the xAxis
or yAxes
to access to options.xAxis.events or options.yAxis.events API.
<chart [options]="options">
<xAxis (afterSetExtremes)="onAfterSetExtremesX($event)"></xAxis>
<yAxis (afterSetExtremes)="onAfterSetExtremesY($event)"></yAxis>
</chart>
<p>{{minX}} - {{maxX}}<p>
<p>{{minY}} - {{maxY}}<p>
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
@rijine/ngx-highcharts provides possibility to interact with native HighchartsChartObject
chart object.
@Component({
selector: 'my-app',
template: `
<chart [options]="options"
(load)="saveInstance($event.context)">
</chart>
`
})
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 : Highcharts.ChartObject;
options: Highcharts.Options;
saveInstance(chartInstance) {
this.chart = chartInstance;
}
}
π Live Demo
angular2-higcharts provides possibility to override the native highcharts tooltip formatter (instead of using the highcharts callback)
@Component({
selector: 'my-app',
template: `
<chart [options]="options"
[tooltipFormatter]="formatter">
</chart>
`
})
class AppComponent {
constructor() {
this.options = {
chart: { type: 'spline' },
title: { text : 'dynamic data example'}
series: [{ data: [2,3,5,8,13] }]
};
}
chart : Highcharts.ChartObject;
options: Highcharts.Options;
formatter: (point) {
return `x: point.x y: point.y`
}
}
π Live Demo
<chart type="StockChart" [options]="options"></chart>
Also you need to change your @NgModule
setup.
...
@NgModule({
...
imports: [
BrowserModule,
ChartModule.forRoot(
- require('highcharts'),
+ require('highcharts/highstock')
)
]
})
π Live Demo
<chart type="Map" [options]="options"></chart>
Also you need to change your @NgModule
setup.
...
@NgModule({
...
imports: [
BrowserModule,
ChartModule.forRoot(
- require('highcharts'),
+ require('highcharts/highmaps')
)
],
})
π Live Demo
Any other modules like highcharts-3d, highcharts-exporintg and etc. can be also added in @NgModule
after main chart module
...
@NgModule({
...
imports: [
BrowserModule,
ChartModule.forRoot(
require('highcharts'),
+ require('highcharts/highchart-3d'),
+ require('highcharts/modules/exporting')
)
],
})
Check out structure of the node-modules/highcharts
folder to find necessary module.
π Live Demo
...
const Highcharts = require('highcharts');
Highcharts.setOptions({
colors: ['#50B432']
});
@NgModule({
...
imports: [
BrowserModule,
ChartModule.forRoot(
- require('highcharts'),
+ Highcharts
)
],
})
π Live Demo
##Merge
Highcharts itself provides bunch of events, and you still can use them with angular2-higcharts via the options
property of the chart
component. But it is not an angular2 way to handle events like this. So that angular2-higcharts provides EventEmitter<ChartEvent>
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.
All the events from the options.chart.events are available as output properties of the chart
component.
<chart [options]="options" (selection)="onChartSelection($event)"> </chart>
onChartSelection (e) {
this.from = e.originalEvent.xAxis[0].min.toFixed(2);
this.to = e.originalEvent.xAxis[0].max.toFixed(2);
}
To use series events the same way you need to add the series
component as a child of your chart. The only purpose of this auxiliary component is to provide access to options.plotOptions.series.events API
<chart [options]="options">
<series (mouseOver)="onSeriesMouseOver($event)">
</series>
</chart>
<p><b>{{serieName}}</b> is hovered<p>
onSeriesMouseOver (e) {
this.serieName = e.context.name;
}
Similary you can use the point
to access to options.plotOptions.series.point.events API.
<chart [options]="options">
<series>
<point (select)="onPointSelect($event)"></point>
</series>
</chart>
<p><b>{{point}}</b> is selected<p>
Similary you can use the xAxis
or yAxes
to access to options.xAxis.events or options.yAxis.events API.
<chart [options]="options">
<xAxis (afterSetExtremes)="onAfterSetExtremesX($event)"></xAxis>
<yAxis (afterSetExtremes)="onAfterSetExtremesY($event)"></yAxis>
</chart>
<p>{{minX}} - {{maxX}}<p>
<p>{{minY}} - {{maxY}}<p>
onAfterSetExtremesX (e) {
this.minX = e.context.min;
this.maxX = e.context.max;
}
onAfterSetExtremesY (e) {
this.minY = e.context.min;
this.maxY = e.context.max;
}
angular2-higcharts provides possibility to interact with native HighchartsChartObject
chart object.
import * as Highcharts from 'highcharts';
@Component({
selector: 'my-app',
template: `
<chart [options]="options"
(load)="saveInstance($event.context)">
</chart>
`
})
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 : Highcharts.ChartObject;
options: Highcharts.Options;
saveInstance(chartInstance) {
this.chart = chartInstance;
}
}
If you want to use the extra stylings like the one in highcharts.js demo, you will need to get the Highchart static members, from Highcharts' node_modules
. Note that in angular2-higchcharts
we have already included highcharts
as node_modules
, so you do not need to do npm install highcharts
anymore. A wrapper is infact provided that you can use to access to the native API.
Make sure you import the correct variables. Examples are given below
To use the typings:
import * as HighChartsTypings from 'highcharts';
To use the Highchart's StaticMember wrapper (do not be confused with the typings):
import {Highcharts} from 'angular2-highcharts/dist/HighChartsWrapper'
import { Component } from '@angular/core';
import * as HighChartsTypings from 'highcharts'; // this is imported by typescript just for the typings, from index.d.ts
import {Highcharts} from 'angular2-highcharts/dist/HighChartsWrapper'//this ons is required by node, from highcharts.js' node_modules
@Component({
selector: 'simple-chart-example',
template: `
<chart [options]="options"></chart>
`
})
export class App {
constructor() {
this.options = {
title : { text : 'simple chart' },
series: [{
data: [29.9, 71.5, 106.4, 129.2],
}]
};
Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
proceed.call(this);
this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';
});
}
options: HighChartsTypings.Options;
}
import { Component } from '@angular/core';
import * as HighChartsTypings from 'highcharts';
import {Highcharts} from 'angular2-highcharts/dist/HighChartsWrapper'
@Component({
selector: 'simple-chart-example',
template: `
<chart [options]="options"></chart>
`
})
export class App {
constructor() {
this.options = {
title : { text : 'simple chart' },
series: [{
data: [29.9, 71.5, 106.4, 129.2],
}]
};
// Load the fonts
Highcharts.createElement('link', {
href: 'https://fonts.googleapis.com/css?family=Roboto:400,700',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
let defaultGlobalOptions:HighChartsTypings.GlobalOptions;
defaultGlobalOptions = {
chart: {
backgroundColor: null,
style: {
fontFamily: 'Roboto'
}
}
}
Highcharts.setOptions(defaultGlobalOptions);
}
options: HighChartsTypings.Options;
}
The Highchart modules are not really ES6 compatiable so access to highcharts native API depends on environment configuration See the SystemJS and Webpack examples apps
- https://github.com/gevgeny/angular2-webpack-starter-and-angular2-highcharts/blob/master/src/app/home/home.component.ts
- https://github.com/gevgeny/angular2-quickstart-and-angular2-highcharts/blob/master/app/app.component.ts
The type
property allows you to specify chart type. Possible values are:
Chart
(Default value)StockChart
Map
(To use this type you need to load the 'highcharts/modules/map' module additionally. Live Demo)
import * as HighCharts from 'highcharts';
@Component({
selector: 'stock-chart-example',
template: `<chart type="StockChart" [options]="options"></chart>`
})
export class StockChartExample {
constructor(jsonp : Jsonp) {
jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=JSONP_CALLBACK').subscribe(res => {
this.options = {
title : { text : 'AAPL Stock Price' },
series : [{
name : 'AAPL',
data : res.json(),
tooltip: {
valueDecimals: 2
}
}]
};
});
}
options: HighCharts.Option;
}
##More Examples
Here are some common charts examples with Webpack integration https://github.com/gevgeny/angular2-highcharts/tree/master/examples
##FAQ
Because angular-highcharts
is just a thin wrapper of the [Highcharts](http:/ /www.highcharts.com/) 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.
##More Examples Here are some common charts examples with Webpack integration https://github.com/gevgeny/angular2-highcharts/tree/master/examples/webpack
##FAQ
Because @rijine/ngx-highcharts
is just a thin wrapper of the [Highcharts](http:/ /www.highcharts.com/) 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 @rijine/ngx-highcharts
provides you access to the original chart object.
MIT @ Eugene Gluhotorenko MIT @ rijine