Search code examples
reactjstypescripthighchartstooltipformatter

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


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?


Solution

  • 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) {}