Question 72998 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to set formatter function for tooltip in highcharts using react with typescript? – Reactjs

I have a chart with columnrange type which should display some timelines. I have my time in UTC. It displays well on yAxis because of property ‘type: "datetime"‘, but in tooltip it displays time in seconds. I want to format it.

I was trying to use constructions like this:

formatter() {

}

or like this:

formatter: function() {

}

but they are not allowed here and all I get is an error "'type' is declared here"

The only available way to use formatter for me is:

formatter: (ctx) => {
            
}

Where ctx refers to Highcharts.tooltips. But, arrow function does not allow me to get the y value by using this keyword. Please, tell me, what should I try?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was trying different ways to use function() in order to access this.y and found the solution:

    tooltip: {
  formatter: function(ctx) {
              
  }
}

    All the ways works fine, I just need to pass context variable to function, either formatter(ctx): {} or formatter: function(ctx) {}


  2. 0

    You can use the below notation with typed function parameters:

    tooltip: {
  formatter: function(
    this: Highcharts.TooltipFormatterContextObject,
    tooltip: Highcharts.Tooltip
) {
    ...
  }
}

    Live demo: https://stackblitz.com/edit/react-starter-typescript-ms2duw

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search