Fortunately, this documentation comment has a list of all the members that are guaranteed to exist on this. (If there were no documentation, you could always console.log(this) from your function and look at what's there.) In essence, you'd have to write a TypeScript interface that declares all of the members with the proper types:

interface TooltipFormatterContext {
    percentage: number;  // Is this correct?
    // ...

and then use this interface as your this type. If you want to properly represent shared vs. non-shared tooltips, you'd need two different interfaces similar to the current TooltipOptions that fix shared to false and true respectively and have the corresponding this types for the formatter, and then you'd define TooltipOptions as a union type of the two interfaces.


The problem with working out the type of this with these function calls is that the third-party api can bind whatever object it wants to it.

tooltip.formatter(); // this refers to someHighChartsObject
tooltip.formatter(); // this refers to someOtherHighChartsObject

Inside of the function, it's a bit difficult to specify the type of this as it could be anything including one not defined by their documentation. In your specific case, it should be of type Highcharts.PointObject or Highcharts.ChartObject which you could technically specify with the following:

const that: Highcharts.PointObject = this;;


  • It's not possible to redefine the type of this so you're cloning the object just to get stronger typing.
  • If there's no documentation, or they use an undocumented type, you have to inspect this and write your own interface.


It's not possible to simply add in stronger typing to the this object in an function that is called by third-party code.


Highcharts exports the types you need. Just do the following:

import Highcharts from 'highcharts`;


tooltip: {
  formatter(this: Highcharts.TooltipFormatterContextObject) {
    // your code

Related Query

More Query from same tag