How to access different contexts of 'this' in HighCharts callback (Angular / Typescript)

Question

I am using HighCharts within an Angular / Typescript project. Generally it works fine, but now I got stuck:

When clicking on a point I want to get more information about that point from an http service. HighCharts provides the possibility to add a callback function: http://api.highcharts.com/highstock/plotOptions.series.point.events.click

The problem is that I need information about the point (the point information is bind to 'this'), but also invoke the service where 'this' refers to the class instance.

@Component({
    // ...
})
export class ChartComponent {

    chart: any;

    constructor(private dataService: DataService) {    }

    onPointClick(point: any) {
        this.dataService.getPointDetails(point) // then ...
    }

    buildDataChart() {
        let Highcharts = require('highcharts/highstock');
        this.chart = new Highcharts.StockChart({
            // ...
            plotOptions: {
                series: {
                    point: {
                        events: {
                            click: // How to implement this function?
                        }
                    }
                }
            }
        });
    }
}

I tried different things without success:

click: function() {
    console.log('Point information ' + this.x + ' ' + this.y);
    // outside of Angular scope and service cannot be reached.
}

With this I am also outside of Angular scope

click: this.onPointClick

Now I am inside Angular scope, but have no access to point information:

click: this.onPointClick.bind(this)

Here I am also inside Angular scope, but have no access to point information:

click: () => this.onPointClick(this)

Does anybody know how I can take the point information and invoke the service with this? The only thing I can think of right now would be some global dom-elements, but this does not seem very nice.

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Salketer, Jul 25 '17 at 08:47

score 6 · Accepted Answer · answered Jul 25 '17 at 08:51

6

You should use the event parameter send through the click event and define your handler (onPointClick) as a field value of your component class. No need for bind or weird this context this way. Within the event the point is defined at event.point:

export class ChartComponent {

    chart: any;

    constructor(private dataService: DataService) {    }

    onPointClick = (event: any) => {
        this.dataService.getPointDetails(event.point);
    };

    buildDataChart() {
        let Highcharts = require('highcharts/highstock');
        this.chart = new Highcharts.StockChart({
             plotOptions: {
                series: {
                    point: {
                        events: {
                            click: this.onPointClick
                        }
                    }
                }
            }
        });
    }
}

answered Jul 25 '17 at 08:51

Poul Kruijt

69,713
12
145
149

Thank you, I did not know that the point is available within the event, because first it only showed that it is type of MouseEvent. I use the callback like this, which works fine `click: (event) => this.onPointClick(event)` – simdevmon Jul 25 '17 at 10:07
Excellent answer! I'll add that even if your handler is assigned under another option level (e.g. plotOptions.series.events), the this context will still be a Highcharts.Point object under event.point (but you can still access the series context through event.point.series). Though [this JSFiddle](https://stackblitz.com/edit/react-hketvd?file=index.js) also references event.target.category from a plotOptions.series.point.events handler, I found that only worked for a mouseOver handler and not click. So I guess there's a secret API of what contexts are added to what kinds of event handlers? – Galen Long May 16 '19 at 17:33
You'll want to use `event.target` to get highcharts data – JRodl3r Oct 18 '21 at 15:25

How to access different contexts of 'this' in HighCharts callback (Angular / Typescript)

1 Answers1