Currently, I am implementing a chart that displays the timeline of activities using an x range. However, I have encountered an issue with the popup displaying data information when hovering over the bars.
The problem arises specifically on the first date of each month where the displayed information is inaccurate.
Below is a snippet of my code:
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
},
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
}
}]
});
I expect the output to be in the following format:
Wednesday, Jan 1, 2014 - Monday, Jun 2, 2014 Project: Proto
However, the current output appears as:
January 2014 - June 2014 Project: Proto
Your assistance in resolving this issue would be greatly appreciated.
Thank you.