Highcharts Dynamic tooltip positioning - highcharts

Question

We are doing a proof of concept with Highcharts so I need to replicate a chart from another system. The other system has the charts laid out as shown on the jsfiddle page. I created 4 axis, and positioned each axis X pixels left of the prior one. the problem is the tooltip for axis 1-3 hover over axis 0. Is there a way to figure out what axis I am hovering, or is there another way to do this layout? I tried using the positioner function, could not get anywhere.
positioner: function (boxWidth, boxHeight, point) {
}
JSFiddle example http://jsfiddle.net/oabg7kjw/

Answer 1

It is known bug reported here
Workaround (using positioner): http://jsfiddle.net/oabg7kjw/1/
tooltip: {
positioner: function(w, h, p) {
return {
x: p.plotX + this.chart.hoverSeries.xAxis.left - w/2,
y: p.plotY
}
}
},
Docs:
- http://api.highcharts.com/highcharts#tooltip.positioner

Answer 2

Another option here is to drop the mutli-axis approach and create one with repeating categories. You'd then need to place each bar at the appropriate category.
categories: ['FY 04', 'FY 05', 'FY 06', 'FY 07', 'FY 08', 'FY 09', 'FY 10', 'FY 11', 'FY 12', 'FY 13',
'FY 04', 'FY 05', 'FY 06', 'FY 07', 'FY 08', 'FY 09', 'FY 10', 'FY 11', 'FY 12', 'FY 13',
'FY 04', 'FY 05', 'FY 06', 'FY 07', 'FY 08', 'FY 09', 'FY 10', 'FY 11', 'FY 12', 'FY 13',
'FY 04', 'FY 05', 'FY 06', 'FY 07', 'FY 08', 'FY 09', 'FY 10', 'FY 11', 'FY 12', 'FY 13'],
In your data:
series: [{
...
data: [[0,147], [1,123], [2,139], [3,127], [4,102], [5,116], [6,59], [7,80], [8,72], [9,91]]
}, {
...
data: [[10,154], [11,102], [12,62], [13,77], [14,11], [15,33], [16,227], [17,145], [18,75], [19,101]]
}, {
etc...
Updated fiddle here.

Answer 3

As old as this topic is, there is another workaround I have found to center the tooltip dynamically either vertically or horizontally. 7 years later this might still help someone:
Assuming your container has been inserted in your project like this:
<div #myChart id="myChart" class="graph-container"></div>
Then you can use the width or height of the div itself to center the tooltip:
....
tooltip: {
positioner: function () {
let customXPosition = (document.getElementById('myChart').offsetWidth / 2);
return {
x: customXPosition,
y: 200
};
},
...
The same approach can be used with height (or the y axis) by using .offsetHeight instead