How to display Highcharts x-axis time stamp labels inside tooltip?

In my chart I have these time stamp that are displayed on the x-axis enter image description here

How do I make them display in the tooltip when I hover over to certain point in the chart?

Highcharts.chart('container', {
    ...
    xAxis: {
      labels: {
        formatter: function() {
          let seconds = this.value * 5;
          let t = new Date(1900, 1, 1, 9, 30, 0);
          t.setSeconds(t.getSeconds() + this.value * 5);
          return `${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`
        }
      },
      tickInterval: 2
    },
 });

Can someone please help as I am not able to figure this out?

Answer

You can use the same approach in pointFormatter as in the labels formatter function.

            tooltip: {
                pointFormatter: function(){
                    let t = new Date(1900, 1, 1, 9, 30, 0);
                    t.setSeconds(t.getSeconds() + this.x * 5);
                    
                    return `
                        Time: ${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}
                        Y: ${this.y} 
                        Value: ${this.value}
                    `
                }
            }

Live demo: https://jsfiddle.net/BlackLabel/jf9x8y3q/

API Reference: https://api.highcharts.com/highcharts/tooltip.pointFormatter

Leave a Reply

Your email address will not be published. Required fields are marked *