Passing callback function to labelFormatter in highchart legend in typescript

Question

I am trying to use HighCharts in Angular2 using typescripts.

I am trying to format my legend text, with image to show up next to it. HighChart legend has labelFormatter property to provide callback function.

http://api.highcharts.com/highcharts#legend.labelFormatter

Callback function to format each of the series' labels. The this keyword refers to the series object, or the point object in case of pie charts. By default the series or point name is printed.

But I dont know how to pass callback function in typescripts to labelFormatter property.

updateChart(): void {
    let newOptions = {
        legend: {
            useHTML: true,
            itemMarginBottom: 10,
            enabled: true,
            floating: true,
            align: 'center',
            verticalAlign: 'top',
            labelFormatter: (s) => this.getLegendLabel(s),
            y: 35
       }
    }
}

getLegendLabel(seriesDetails) {
    console.log(seriesDetails);
}

But I am getting undefined for seriesDetails object.

and if I used this keyword anywhere it refers to that component rather than series information.

Answer 1

According to the documentation:

Callback function to format each of the series' labels. The this keyword refers to the series object, or the point object in case of pie charts. By default the series or point name is printed.

I guess you've got wrong "this" in the fat arrow function. IMHO the simpliest way just follow documentation syntax (jsfiddle):

labelFormatter: function () {
    return this.name + ' (click to hide)';
}