@kiwigrid/ngx-highcharts
This is a fork based on https://github.com/gevgeny/angular2-highcharts
Highcharts chart components for Angular apps. š Live Demo
Table of Contents
- Setting Up - Install angular2-highcharts - Setup App @NgModule - Usage - Basic Usage- [Setup App Module](#setup-app-module)
- [Create First Chart Component](#create-first-chart-component)
- Handling Events- [Chart Events](#chart-events)
- [Series Events](#series-events)
- [Point Events](#point-events)
- [Axis Events](#axis-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
- LicenseSetting Up
Install @kiwigrid/ngx-highcharts
npm install @kiwigrid/ngx-highcharts --save
Setup App @NgModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from '@kiwigrid/ngx-highcharts';
import { App } from './App';
@NgModule({
imports: [
BrowserModule,
ChartModule.forRoot(require('highcharts'))
],
declarations: [App],
bootstrap: [App]
})
export class AppModule {}
For angular-cli and other Webpack environments
No any additional setup neededFor SystemJS environment
You should add appropriate mapping to yoursystemjs.config.js
...
map: {
...
'@kiwigrid/ngx-highcharts': 'node_modules/@kiwigrid/ngx-highcharts',
'highcharts': 'node_modules/highcharts',
}
...
packages: {
...
highcharts: {
main: './highcharts.js',
defaultExtension: 'js'
},
'@kiwigrid/ngx-highcharts': {
main: './index.js',
defaultExtension: 'js'
}
}
Usage
Basic Usage
Create First Chart Component
Main charts functionality provided by thechart
component and its options
property.import { Component } from '@angular/core';
@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: Object;
}
š Live DemoHandling Events
Highcharts itself provides bunch of events, and you still can use them with @kiwigrid/ngx-highcharts via theoptions
property of the chart
component. But it is not an angular way to handle events like this. So that @kiwigrid/ngx-highcharts provides EventEmitter<ChartEvent>
wrappers for highcharts events. ChartEvent
is an @kiwigrid/ngx-highcharts 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 thechart
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 DemoSeries Events
To use series events the same way you need to add theseries
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 DemoPoint Events
Similary you can use thepoint
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 DemoAxis Events
Similary you can use thexAxis
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 DemoDynamic Interaction with Chart Object
@kiwigrid/ngx-highcharts provides possibility to interact with nativeHighchartsChartObject
chart object.@Component({
selector: 'my-app',
directives: [CHART_DIRECTIVES],
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 : Object;
options: Object;
saveInstance(chartInstance) {
this.chart = chartInstance;
}
}
š Live DemoTooltip Formatter for Chart Object
angular2-higcharts provides possibility to override the native highcharts tooltip formatter (instead of using the highcharts callback)@Component({
selector: 'my-app',
directives: [CHART_DIRECTIVES],
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 : Object;
options: Object;
formatter: (point) {
return `x: point.x y: point.y`
}
}
š Live DemoHighstock
<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
Highmaps
<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
Add Highcharts Modules
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
Access to the Highcharts Static API
...
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/webpackFAQ
Why don't my series, title, axes and etc redraw after I update initial options ?
Because@kiwigrid/ngx-highcharts
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 @kiwigrid/ngx-highcharts
provides you access to the original chart object.