title: How to customize tooltip in Highchart?
body: <p>I want my tooltip to show the range of time according to the x-axis. <br>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 :)</p>
  
  <p><a href="https://i.stack.imgur.com/a0xbs.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/a0xbs.jpg" alt="enter image description here"></a></p>
  
  <p><strong>This is my code</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Highcharts.chart('container', {
      chart: {
          type: 'areaspline'
      },
      title: {
          text: '&lt;b&gt;Power consumption&lt;/b&gt;'
      },
      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
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>