Angular2 charting components based on Highcharts. Live Demo
- Installation
- Usage
- Basic Usage
- Handling Events
- Dynamic Interaction with Chart Object
- Access to the Highcharts Static Members
- Highstock and Highmaps
- Using Highchart Modules
- FAQ
- License
npm install angular2-highcharts --save
Main charts functionality provided by the chart component and its options property.
import { Component } from 'angular2/core';
import { CHART_DIRECTIVES } from 'angular2-highcharts';
@Component({
selector: 'simple-chart-example',
directives: [CHART_DIRECTIVES],
template: `
<chart [options]="options"></chart>
`
})
export class SimpleChartExample {
constructor() {
this.options = {
title : { text : 'simple chart' },
series: [{
data: [29.9, 71.5, 106.4, 129.2],
}]
};
}
options: HighchartsOptions;
}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 to access to options.xAxis.events API.
<chart [options]="options">
<xAxis (afterSetExtremes)="onAfterSetExtremes($event)"></xAxis>
</chart>onAfterSetExtremes (e) {
this.min = e.context.min;
this.max = e.context.max;
}Similary you can use the yAxis to access to options.yAxis.events API.
<chart [options]="options">
<yAxis (afterSetExtremes)="onAfterSetExtremes($event)"></yAxis>
</chart>onAfterSetExtremes (e) {
this.min = e.context.min;
this.max = e.context.max;
}angular2-higcharts provides possibility to interact with native HighchartsChartObject 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 : HighchartsChartObject;
options: HighchartsOptions;
saveInstance(chartInstance) {
this.chart = chartInstance;
}
}angular2-highcharts exports native Highcharts object to interact with its static members.
import { Highcharts } from 'angular2-highcharts';
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B']
});The type property allows you to specify chart type. Possible values are:
Chart(Default value)StockChartMap(To use this type you need to load the 'highcharts/modules/map' module additionally. Live Demo)
@Component({
selector: 'stock-chart-example',
directives: [CHART_DIRECTIVES],
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: HighchartsOptions;
}You can load Highcharts modules via ES6 import and then plugin the module via calling appropriate function . Here is more details about Highcharts modules loading: http://www.highcharts.com/docs/getting-started/install-from-npm
import {Highcharts} from 'angular2-highcharts';
import Highcharts3d from 'highcharts/highcharts-3d';
Highcharts3d(Highcharts);
##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.
MIT @ Eugene Gluhotorenko
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent