highcharts

Highstock and XRange - Tooltip Issue


I plotted some data with Highstock and XRange.

Example: https://jsfiddle.net/ihtus/efh5zdp3/15/

The issue: when 2 bars have same start timestamp, on mouse hover on upper bar => tooltip showed for the wrong bottom bar.

How is it possible to fix it?

enter image description here

Highcharts.stockChart('container', {
chart: {
    type: 'xrange'
},
title: {
    text: 'Highcharts X-range'
},
xAxis: {
    type: 'datetime'
},
yAxis: {
    title: {
        text: ''
    },
    categories: ['Prototyping', 'Development', 'Testing'],
    reversed: true
},
tooltip: {
    crosshairs: false,
  useHTML: true,
        formatter: function () {
            return this.yCategory;
        }
},
series: [{
    name: 'Project 1',
    // pointPadding: 0,
    // groupPadding: 0,
    borderColor: 'gray',
    pointWidth: 20,
    data: [{
        x: '2014-11-21',
        x2: '2014-12-02',
        y: 0,
        partialFill: 0.25
    },
    {
        x: '2014-12-02',
        x2: '2014-12-05',
        y: 1
    },
    {
        x: '2014-12-07',
        x2: '2014-12-08',
        y: 2
    }, 
            {
        x: '2014-12-07',
        x2: '2014-12-08',
        y: 1
    },
    {
        x: '2014-12-09',
        x2: '2014-12-19',
        y: 1
    },
    {
        x: '2014-12-10',
        x2: '2014-12-23',
        y: 2
    }],
    dataLabels: {
        enabled: true
    }
}]

});


Solution

  • In this setting, where you use stockChart, you need to disable tooltip.split, which is enabled by default on stock, see the API reference.