How to customize tooltip in Highchart?

Question

I want my tooltip to show the range of time according to the x-axis.
The image below shows what I want. So if anyone knows how can I do that, please let me know or suggest me. Thank you :)

This is my code

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: '<b>Power consumption</b>'
    },
    xAxis: {
      categories: [
                    '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00',
                    '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00',
                    '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
                    '21:00', '22:00', '23:00'
                  ]
      },
    yAxis: {
        title: {
            text: 'Power (watt)'
        }
    },
    tooltip: {
      borderColor: '#2c3e50',
      shared: true
    },
    plotOptions: {
        areaspline: {
            marker: {
                enabled: true,
                symbol: 'circle',
                radius: 3,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        },
        series: {
          fillOpacity: 0.5
        }
    },
    series: [{
        name: 'Today ',
        data: [3, 4, 3, 5, 4, 10, 12, 3, 4, 3, 5, 4, 10, 12, 3, 4, 3, 5, 4, 10, 12, 3, 4, 3],
        color: '#2ecc71',
        zIndex: 1
    }, {
        name: 'Yesterday ',
        data: [1, 3, 4, 3, 3, 5, 4, 1, 3, 4, 3, 3, 5, 4, 1, 3, 4, 3, 3, 5, 4, 1, 3, 4],
        color: '#bdc3c7',
        zIndex: 0
    }],
    
    exporting: {
      buttons: {
        contextButtons: {
          enabled: false,
          menuItems: null
         }
      },
      
    enabled: false
    },

    credits: {
      enabled: false
    }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

You can build your own tooltip with the use of tooltip.formatter. In your case, you need to edit header of the tooltip.

formatter: function (tooltip) {     
  const header = `<span style="color: blue;">${this.x} - ${this.x.replace(/:00/, ':59')}</span><br/>`

  return header + (tooltip.bodyFormatter(this.points).join(''))
}

example: http://jsfiddle.net/cynysyhb/

Answer 2

Highcharts allow you to pass tooltipFormatter calback that allows to pretty much define your tooltip in any way.

http://api.highcharts.com/highcharts/tooltip

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/formatter-simple/

 tooltip: {
        useHTML: true,
        formatter: function () {
            console.log(this); // just to see , what data you can access
            return 'The value for <b>' + this.x +
                '</b> is <b>' + this.y + '</b>';
        }
    }

You would also want to set the tooltip mode to be html

http://api.highcharts.com/highcharts/tooltip.useHTML

You may check which data you have access to inside the callback by sending it to the console from inside the tooltip formatter. If you need something else, then you can pass it along with datapoints, when creating the series.

I hope this helps.