CODEWITHSUNDEEP
angulareventshighcharts
KarLito
KarLito

Reputation: 55

Adding Highchartsevent after creation

I wan't to add and remove events after the creation of the chart. The problem is that I can't get the properties of the chart by handling the event. Like:

event.xAxis[0].min

I created a example:

https://stackblitz.com/edit/angular-sw9fbo?file=src%2Fapp%2Fapp.component.ts Line 55:

private addEvents(): void {    
      Highcharts.addEvent(this.chartTarget.nativeElement, 'selection', (event) => {
      // problem can't get xAxis or any properties of the chart
      console.log('selection->x-min: ', event.xAxis[0].min); 
    });
}

Edit:

Updated Stackblitz

Upvotes: 1

Views: 130

Answers (1)

Daniel
Daniel

Reputation: 3514

Your code has two little flaws, that break the behavior:

First, you need to actually call your addEvents method. instead of this.addEvents; in line 43, you need to call this.addEvents();

Second, the Highcharts.addEvent()-method expects you to pass the actual chart object - not the reference to its container. So change line 50 to

Highcharts.addEvent(this.chart, 'selection', (event) => {

to pass the chart created above.

Edit:

To remove your TypeScript compile errors and get full autocomplete functionality, you need to manually install the appropriate type-package from npm.

npm install --save @types/highcharts

import the specific Event Type accordingly`at the top of your File.

import {ChartSelectionEvent} from 'highcharts';

and finally add the Type accordingly to the function signature.

Highcharts.addEvent(this.chart, 'selection', (event: ChartSelectionEvent ) => {

I updated your stackblitz code accordingly.

Upvotes: 1

Related Questions