1

I've read the docs regarding typescript on Highcharts but I still don't have it very clear how to use types in highcharts.js functions.

For example, I have a formatter function on my tooltip options and it admits a parameter this. How do I type it?

Right now I'm using any but that's just to bypass the typescript errors. I don't want to manually type it in case Highcharts updates its content in future versions, so I assume there's a proper way of doing it?

const options = {
    tooltip: {
      outside: true,
      formatter: function (this: any): string {  // <---- need to replace `any` here
      }
    }
} 

What type should I use there? And how do I find out exactly which of them should I use?

I've tried using Highcharts.TooltipFormatterCallbackFunction as that's what seems to be indicated in the callback docs.

formatter: function (this: Highcharts.TooltipFormatterCallbackFunction): string {

But it doesn't seem to recognize the property y inside the this object. this.y. Perhaps that's the return type? Where do I look for the one for this?

enter image description here

Same problem with plotOptions.column.point.events.mouseOver:

plotOptions: {
    column: {
        point: {
            events: {
                mouseOver: function (this: any) { //<-- here
                    this.graphic.attr({
                       fill: this.y < 0 ? "red" : "blue",
                    });
                }
            }
        }
    }
}

1 Answer 1

2

You can chech the proper types in the Highcharts API.

For this in a tooltip formatter function use: Highcharts.TooltipFormatterContextObject

For this in a mouse over callback function use: Highcharts.Point


API Reference:

https://api.highcharts.com/class-reference/Highcharts#.TooltipFormatterCallbackFunction

https://api.highcharts.com/class-reference/Highcharts#.PointMouseOverCallbackFunction

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.