Pasar función de devolución de llamada a labelFormatter en la leyenda de Highchart en TypeScript

Estoy intentando usar HighCharts en Angular2 usando TypeScript.

Estoy intentando formatear el texto de mi leyenda, con una imagen para que aparezca junto a él. La leyenda de HighChart tiene la propiedad labelFormatter para proporcionar una función de devolución de llamada.

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

Función de devolución de llamada para formatear cada una de las etiquetas de la serie. La palabra clave this se refiere al objeto de la serie, o al objeto punto en el caso de gráficos circulares. Por defecto se imprime el nombre de la serie o del punto.

Pero no sé cómo pasar una función de callback en TypeScript a la propiedad labelFormatter.

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

Pero estoy obteniendo undefined para el objeto seriesDetails.

y si usara this palabra clave en cualquier lugar, se refiere a ese componente en lugar de a la información de la serie.

Respuesta #1

Según la documentación:

Función de devolución de llamada para formatear cada una de las etiquetas de la serie. La palabra clave this se refiere al objeto de la serie, o al objeto de punto en el caso de gráficos circulares. Por defecto se imprime el nombre de la serie o del punto.

Supongo que tienes mal "this" en la función de flecha. En mi opinión, la forma más sencilla es simplemente seguir la sintaxis de la documentación (jsfiddle):

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

Respuesta #2

Deberías escribir tu código así:

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

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

Generará el siguiente código JS y funcionará como esperas (Test es el nombre de mi clase):

Test.prototype.updateChart = function () {
    var newOptions = {
        legend: {
            useHTML: true,
            itemMarginBottom: 10,
            enabled: true,
            floating: true,
            align: 'center',
            verticalAlign: 'top',
            labelFormatter: this.getLegendLabel,
            y: 35
        }
    };
};
Test.prototype.getLegendLabel = function () {
    console.log(this);
};