Tooltip Formatter Callback Context

Hi, i am trying to write a custom tooltip formatter. But when i use the options.tooltip.formatter callback. The this context inside the formatter callback gets bound to the tooltip and so i cant access my component data.

You can see this issue here: http://plnkr.co/edit/0ZJ29O8YqxvNW5486CDI?p=preview

[Nelladel]

This has to do with lexical scopes. There is a way how you can solve the issue, and it involves including in the Highchart’s closure a reference to the component’s this. Anywhere you like (for instance in the ngOninit lifecycle hook -once the chart object has been initialised-) do something like this:

ngOnInit() {
    var comp = this;
    this.chart.options.tooltip.formatter = function() {
        console.log(this); // points to the Highchart's formatter scope
        console.log(comp); // points to the Component's scope    
    }
}

This way you can reference methods, properties, or injected dependencies in the component, as well as the series, point, and any other information from the formatter’s scope.

[matthiaskomarek]

Bind or Arrow Functions dont solve the problem, as you can see on my provided plunker: the actual value of the hovered datapoint is the this context inside the tooltip formatter function. If i use bind or an arrow function, i will set the context to my component and i will lose the datapoint value.