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?
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
}
}]
});
In this setting, where you use stockChart, you need to disable tooltip.split, which is enabled by default on stock, see the API reference.