Highcharts use loal date instead of utc date in tooltip

Question

I am using Highcharts and I want that the tooltip content would be displayed as following: local date : value (instead of the default format categorie name : value) so I used tooltip.formatter like this:

tooltip: {
   formatter() { 
      return `${Highcharts.dateFormat('%H:%M:%S', +new Date(this.x))}:  <b>
                ${new Intl.NumberFormat().format(this.y)}</b>` 
   }
}

The problem now is, that I am displaying local date on the xaxis and now the date on the tooltip is utc date but I want it also to be local date: see jsfiddle.

I cannot use global.useUTC because it is deprecated since v6.0.5.

Is there any way to display the date exactly as date on xaxis so that the tooltip displays : date : value (it would be even better if I don't have to use Highcharts.dateFormat inside tooltip.formatter since the format is not always '%H:%M:%S' and it will vary with the provided data) ?

I think this has been answered in another thread. https://stackoverflow.com/questions/85116/display-date-time-in-users-locale-format-and-time-offset — It Grunt, Apr 21 '21 at 21:38
Hi @Amani Ben Azzouz, the `global.useUTC` option is deprecated because it is moved to `time.useUTC`: https://api.highcharts.com/highstock/time.useUTC — ppotaczek, Apr 22 '21 at 09:44

score 1 · Accepted Answer · answered Apr 21 '21 at 21:52

Use the chart time to format the tooltip:

// Store a reference to the chart
const stockChart = Highcharts.stockChart('container', {

  // ...

  tooltip: {
    formatter() {
      // Use the time object of the chart to format the date
      return `${stockChart.time.dateFormat('%H:%M:%S', +new Date(this.x))}:  <b>${new Intl.NumberFormat().format(this.y)}</b>` 
     }               
   }

  // ...

})

Demo in JSFiddle

Highcharts use loal date instead of utc date in tooltip

1 Answers1