Center tooltip for highcharts area chart - highcharts

Question

Since highcharts does not have a column chart where I can set height and width of each column, I have to use an area chart to accomplish this. So basically I am using area charts to draw rectangles. The problem with area charts is that the tooltip is not centered but is always shown above one edge of the rectangle. Plus, I am drawing multiple rectangles on top of each other causing to show the tooltip of the wrong rectangle.
$('#container').highcharts({
chart: {
type: 'area',
zoomType: 'x'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
enabled: false
}
},
plotOptions: {
area: {
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
fillOpacity: 1
}
},
tooltip: {
enabled: true
},
series: [{
name: 'Year',
color: '#0d233a',
data: [
[Date.UTC(2017, 0, 1), 0],
[Date.UTC(2017, 0, 1), 4],
[Date.UTC(2017, 11, 31), 4],
[Date.UTC(2017, 11, 31), 0]
],
zIndex: 4,
fillColor: '#0d233a',
lineColor: '#fff'
}, {
name: 'Half year',
id: 'Half',
color: '#2f7ed8',
data: [
[Date.UTC(2017, 0, 1), 0],
[Date.UTC(2017, 0, 1), 10],
[Date.UTC(2017, 5, 31), 10],
[Date.UTC(2017, 5, 31), 0]
],
zIndex: 3,
fillColor: '#2f7ed8',
lineColor: '#fff'
}, {
name: 'Half year',
linkedTo: 'Half',
data: [
[Date.UTC(2017, 6, 1), 0],
[Date.UTC(2017, 6, 1), 6],
[Date.UTC(2017, 11, 31), 6],
[Date.UTC(2017, 11, 31), 0]
],
zIndex: 3,
fillColor: '#2f7ed8',
lineColor: '#fff'
}]
});
For an example see this fiddle.
You can see that the tooltip is not centered and that a wrong tooltip is shown when hovering the dark blue rectangle. Does anyone know how to fix this?

Answer 1

If all the columns within one series are the same width, you can try to do this with a normal column chart, using tightly packed columns and multiple xAxis:
...
xAxis: [{
type: 'datetime',
}, {
type: 'datetime',
}],
plotOptions: {
column: {
grouping: false,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
},
},
series: [{
name: 'Year',
data: [
[Date.UTC(2016, 0, 1), 3],
[Date.UTC(2017, 0, 1), 4],
],
zIndex: 4,
color: '#222'
}, {
name: 'Half year',
xAxis: 1,
data: [
[Date.UTC(2016, 0, 1), 8],
[Date.UTC(2016, 6, 1), 11],
[Date.UTC(2017, 0, 1), 10],
[Date.UTC(2017, 6, 1), 6],
],
zIndex: 3,
color: 'royalblue',
}],
http://jsfiddle.net/j1fnkt01/3/
Note: Zooming won't work properly until the x-axes can be properly linked (linkedTo), and this issue prevents us from doing that right now.

Answer 2

You can use tooltip.followPointer to get desired result
Whether the tooltip should follow the mouse as it moves across columns, pie slices and other point types with an extent. By default it behaves this way for scatter, bubble and pie series by override in the plotOptions for those series types.
For touch moves to behave the same way, followTouchMove must be true also.
Defaults to false.
Tooltip will be
tooltip: {
enabled: true,
followPointer: true
},
Fiddle demo
Update
Use plotOptions.area.trackByArea to show tooltip properly
So plotOptions will be
plotOptions: {
area: {
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
fillOpacity: 1
},
series: {
trackByArea: true,
stickyTracking: false,
}
},
updated fiddle