score:1

Accepted answer

You can customize tooltip content using tooltip.formatter callback function and format dates as you like using Highcharts.dateFormat() method. Check the code and demo posted below.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<div id="container"></div>

JS:

Highcharts.chart('container', {
  chart: {
    type: 'xrange',
    styledMode: true
  },
  title: {
    text: 'Highcharts X-range'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: ''
    },
    categories: ['Proto', 'Dev', 'Test'],
    reversed: true
  },
  tooltip: {
    formatter: function() {
      var point = this,
        series = point.series,
        color = point.color || series.chart.options.colors[point.colorIndex],
        firstDate = Highcharts.dateFormat('%A, %b %e, %Y', point.x),
        secondDate = Highcharts.dateFormat('%A, %b %e, %Y', point.x2),
        header = '<span style="font-size: 10px">' + firstDate + ' - ' + secondDate + '</span><br/>',
        content = '<span style="color:' + color + '">\u25CF</span> ' + series.name + ': <b>' + point.yCategory + '</b><br/>';

      return header + content;
    }
  },
  series: [{
    name: 'Project',
    pointWidth: 20,
    data: [{
      x: Date.UTC(2014, 0, 1),
      x2: Date.UTC(2014, 5, 2),
      y: 0,
      partialFill: 0.25
    }, {
      x: Date.UTC(2014, 2, 1),
      x2: Date.UTC(2014, 3, 19),
      y: 1
    }, {
      x: Date.UTC(2014, 11, 1),
      x2: Date.UTC(2014, 11, 23),
      y: 2
    }],
    dataLabels: {
      enabled: true
    }
  }]

});

Demo:
https://jsfiddle.net/BlackLabel/3wbscy6q/

API reference:
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/class-reference/Highcharts#.dateFormat
https://api.highcharts.com/highcharts/tooltip.dateTimeLabelFormats


Related Query

More Query from same tag