Accepted answer

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(''))



Using tooltip.formatter, you have access to a lot of information about the current point(s), for example the data series and their x-axis.

Building on Highchart's own example:

tooltip: {
    formatter: function () {
        var point = this.points[0].point,
            cats = point.series.xAxis.categories;

        var catIndex = point.index,
            currCat = cats[catIndex],  //..or simply "this.x"
            nextCat = cats[catIndex+1] || '';

        var s = '<b>' + currCat + ' - ' + nextCat + '</b>';

        $.each(this.points, function () {
            s += '<br/>' + + ': ' +
                this.y + 'm';

        return s;
    shared: true


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

 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

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.

Related Query

More Query from same tag