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 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

`HTML






{{serieName}} is hovered


`
`TypeScript
onSeriesMouseOver (e) {
this.serieName = e.context.name;
}
`
Live Demo
#### Point Events

Similary you can use the point to access to options.plotOptions.series.point.events API.
`HTML







{{point}} is selected


`
Live Demo
#### Axis Events

Similary you can use the xAxis 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 HighchartsChartObject chart object.

`TypeScript
import * as Highcharts from 'highcharts';

@Component({
selector: 'my-app',
template:
(load)="saveInstance($event.context)">


})
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

$3

#### Set background image
`TypeScript
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:


})
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;
}
`
#### Use Roboto font in global settings
`TypeScript
import { Component } from '@angular/core';
import * as HighChartsTypings from 'highcharts';
import {Highcharts} from 'angular2-highcharts/dist/HighChartsWrapper'

@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],
}]
};

// 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;
}
`


$3

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

$3

`TypeScript
import * as HighCharts from 'highcharts';
@Component({
selector: 'stock-chart-example',
template:
})
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;
}
`
Live Demo

##More Examples

Here are some common charts examples with Webpack integration https://github.com/gevgeny/angular2-highcharts/tree/master/examples

##FAQ

#### Why don't my series, title, axes and etc redraw after I update initial options ?

Because angular-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 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

#### Why don't my series, title, axes and etc redraw after I update initial options ?

Because @rijine/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 @rijine/ngx-highcharts` provides you access to the original chart object.

License