` 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.\n\n#### Chart Events \n\nAll the events from the [options.chart.events](http://api.highcharts.com/highcharts#chart.events) are available as output properties of the `chart` component.\n\n```HTML\n \n```\n```TypeScript\nonChartSelection (e) {\n this.from = e.originalEvent.xAxis[0].min.toFixed(2);\n this.to = e.originalEvent.xAxis[0].max.toFixed(2);\n}\n```\nš [Live Demo](http://plnkr.co/edit/vdgKVJOymMYhiyqZrPma?p=preview)\n\n#### Series Events \n\nTo 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](http://api.highcharts.com/highcharts#plotOptions.series.events) API\n\n```HTML\n\n \n \n\n{{serieName}} is hovered
\n```\n```TypeScript\nonSeriesMouseOver (e) {\n this.serieName = e.context.name;\n}\n```\nš [Live Demo](http://plnkr.co/edit/GkaJlk2UJjbTwsPyGXGC?p=preview)\n#### Point Events \n\nSimilary you can use the `point` to access to [options.plotOptions.series.point.events](http://api.highcharts.com/highcharts#plotOptions.series.point.events) API.\n```HTML\n\n \n \n \n\n
{{point}} is selected
\n```\nš [Live Demo](http://plnkr.co/edit/TpKoJ60n4vyIDWxHNUkg?p=preview)\n#### Axis Events \n\nSimilary you can use the `xAxis` or `yAxes` to access to [options.xAxis.events](http://api.highcharts.com/highcharts#xAxis.events) or [options.yAxis.events](http://api.highcharts.com/highcharts#yAxis.events) API.\n```HTML\n\n \n \n\n
{{minX}} - {{maxX}}
\n
{{minY}} - {{maxY}}
\n```\n```TypeScript\nonAfterSetExtremesX (e) {\n this.minX = e.context.min;\n this.maxX = e.context.max;\n}\nonAfterSetExtremesY (e) {\n this.minY = e.context.min;\n this.maxY = e.context.max;\n}\n```\nš [Live Demo](http://plnkr.co/edit/c4ojcIRVOOwq7xmk9kfx?p=preview)\n### Dynamic Interaction with Chart Object\n\nangular2-higcharts provides possibility to interact with native `HighchartsChartObject` chart object.\n\n```TypeScript \n@Component({\n selector: 'my-app',\n directives: [CHART_DIRECTIVES],\n template: `\n \n \n `\n})\nclass AppComponent {\n constructor() {\n this.options = {\n chart: { type: 'spline' },\n title: { text : 'dynamic data example'}\n series: [{ data: [2,3,5,8,13] }]\n };\n setInterval(() => this.chart.series[0].addPoint(Math.random() * 10), 1000);\n }\n chart : Object;\n options: Object;\n saveInstance(chartInstance) {\n this.chart = chartInstance;\n }\n}\n```\nš [Live Demo](http://plnkr.co/edit/OQSFSKisIIWAH0megy4d?p=preview)\n\n### Highstock \n```\n\n```\nAlso you need to change your `@NgModule` setup.\n\n```diff\n...\n@NgModule({\n ...\n imports: [\n BrowserModule, \n ChartModule.forRoot(\n- require('highcharts')\n+ require('highcharts/highstock')\n )\n ]\n})\n```\n\nš [Live Demo](http://plnkr.co/edit/2xSewTZ9b213vA0ALmFq?p=preview)\n\n### Highmaps\n```\n\n```\nAlso you need to change your `@NgModule` setup.\n\n```diff\n...\n@NgModule({\n ...\n imports: [\n BrowserModule, \n ChartModule.forRoot(\n- require('highcharts')\n+ require('highcharts/highmaps')\n ],\n})\n```\n\nš [Live Demo](http://plnkr.co/edit/AmDfKwhRhshFn3CPprkk?p=preview)\n\n\n### Add Highcharts Modules\nAny other modules like highcharts-3d, highcharts-exporintg and etc. can be also added in `@NgModule` after main chart module\n\n```diff\n...\n@NgModule({\n ...\n imports: [\n BrowserModule, \n ChartModule.forRoot(\n require('highcharts'),\n+ require('highcharts/highchart-3d'),\n+ require('highcharts/modules/exporting')\n ],\n})\n```\n\nCheck out structure of the `node-modules/highcharts` folder to find necessary module.\n\nš [Live Demo](http://plnkr.co/edit/sz6OfccvAetQcBX8KFXy?p=preview)\n\n\n\n### Access to the Highcharts Static API \n\n```diff\n...\nconst Highcharts = require('highcharts');\n\nHighcharts.setOptions({\n colors: ['#50B432']\n});\n\n@NgModule({\n ...\n imports: [\n BrowserModule, \n ChartModule.forRoot(\n- require('highcharts'),\n+ Highcharts,\n ],\n})\n```\n\nš [Live Demo](http://plnkr.co/edit/uCtPFUExmZFG0diOvbXS?p=preview)\n\n##More Examples\n\nHere are some common charts examples with Webpack integration https://github.com/gevgeny/angular2-highcharts/tree/master/examples/webpack\n\n##FAQ\n\n#### Why don't my series, title, axes and etc redraw after I update initial options ?\n\nBecause `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](http://api.highcharts.com/highcharts#Chart) for dynamic manipulations with chart and `angular-highcharts` [provides you access](#dynamic-interaction-with-chart-object) to the original chart object.\n\n## License\nMIT @ Eugene Gluhotorenko\n\n\n","maintainers":[{"name":"gevgeny","email":"e.gluhotorenko@gmail.com"}],"time":{"modified":"2022-06-13T03:00:48.380Z","created":"2016-03-03T16:28:24.761Z","0.0.1":"2016-03-03T16:28:24.761Z","0.0.2":"2016-03-03T22:05:36.289Z","0.0.3":"2016-03-05T20:27:11.919Z","0.0.4":"2016-03-19T09:31:00.325Z","0.0.5":"2016-03-19T13:12:17.208Z","0.0.6":"2016-03-25T06:31:48.760Z","0.0.7":"2016-04-11T09:53:08.002Z","0.0.8":"2016-04-12T13:27:58.439Z","0.1.0":"2016-05-11T13:47:33.203Z","0.1.1":"2016-06-29T13:27:56.436Z","0.2.1":"2016-08-21T06:57:47.602Z","0.3.1":"2016-09-26T21:23:03.483Z","0.3.2":"2016-09-27T17:43:17.419Z","0.3.3":"2016-10-01T07:30:15.822Z","0.3.4":"2016-10-02T21:29:24.245Z","0.3.5":"2016-10-29T10:20:04.114Z","0.4.0":"2016-10-30T13:57:27.920Z","0.4.1":"2016-10-30T21:09:36.669Z","0.4.3":"2017-02-02T07:53:58.245Z","0.5.5":"2017-02-12T19:58:03.894Z"},"homepage":"https://github.com/gevgeny/angular2-highcharts#readme","keywords":["angular","charts","highcharts","highstock","highmaps"],"repository":{"type":"git","url":"git+https://github.com/gevgeny/angular2-highcharts.git"},"author":{"name":"Eugene Gluhotorenko"},"bugs":{"url":"https://github.com/gevgeny/angular2-highcharts/issues"},"license":"MIT","readmeFilename":"README.md","users":{"constantin.stoica":true,"marco-g":true,"drummer149":true,"sesamechee":true,"avernon2":true,"ssljivic":true,"adit.cmarix":true,"peteryeah":true,"chad007":true,"hsueing3":true,"junchao":true}}