Highcharts Dynamic tooltip positioning

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.