CODEWITHSUNDEEP
highcharts
Ron
Ron

Reputation: 3

Highcharts Dynamic tooltip positioning

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/

Upvotes: 0

Views: 1703

Answers (3)

JurgenBlitz
JurgenBlitz

Reputation: 113

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

Upvotes: 0

Mark
Mark

Reputation: 108517

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.

Upvotes: 0

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

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

Upvotes: 1

Related Questions