formatter callback function, how to do it?

Based on my limited experience, it looks like most of work for create a highchart is about specifying the config object (which by itself is pretty powerful). But I haven’t figured out a way to write formatter callback function. Obviously I can’t access the chart data with this.y. What would be the right way to define my own formatter function?

Thanks.

[realbugger]

@kirjs you’re right. All I need is to pass it as part of the config object. Actually that’s the first thing I did. However, it turned out that I mistakenly used ES6 arrow function to define formatter callback function, where this means differently than defining it with function keyword.

This was how I did it initially.

...
// Wrong. 'this' here refers to the current react component, this.y is undefined
formatter: () => this.y + ' %' 
...

Once I change to the vanilla function definition, problem solved.

...
// Correct. 'this' here refers to the data point 
formatter: function() {return this.y + ' %';} 
...

I never paid much attention to the nuance of arrow function. Now lessons learned. Closing the thread.

[keithdmoore]

For anybody using TypeScript, here is the solution:

tooltip: {
   formatter: function() {
       var self: any = this;
       return self.point.category; 
   }               
},