How to customize tooltip in Highchart?

highcharts, javascript, jquery

Solution

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/

Problem

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> ```

Original source