Highcharts for your Angular2 project
1 person uses it
Author: 1986803?v=3 gevgeny


Angular2 charting components based on Highcharts. Live Demo

npm version npm dependencies


npm install angular2-highcharts --save


Basic Usage

Main charts functionality provided by the chart component and its options property.

Live Demo

Handling Events

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.

Chart Events

All the events from the are available as output properties of the chart component.

Live Demo

Series Events

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 API

Live Demo

Point Events

Similary you can use the point to access to API.

Live Demo

Dynamic Interaction with Chart Object

angular2-higcharts provides possibility to interact with native HighchartsChartObject chart object.

Live Demo

Access to the Highcharts Static Members

angular2-highcharts exports native Highcharts object to interact with its static members. Live Demo

Highstock and Highmaps

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


MIT @ Eugene Gluhotorenko

comments powered by Disqus
This page was last updated over 2 years ago.