Customizing Highcharts – Tooltip Positioning

A callback function to place the tooltip in a default position. The callback receives three parameters: labelWidth, labelHeight and point, where point contains values for plotX and plotY telling where the reference point is in the plot area. Add chart.plotLeft and chart.plotTop to get the full coordinates. The return should be an object containing x and y values, for example { x: 100, y: 100 }.

However,positioneris much more than just the default position of the tooltip. It takes the following syntax

JavaScript

1

2

3

4

5

6

7

tooltip:{

positioner:function(labelWidth,labelHeight,point){

vartooltipX,tooltipY;

// ... Calculations go here ... //

return{x:tooltipX,y:tooltipY};

}

}

Note the three arguments labelWidth, labelHeight & point at your disposal, these seem to be sufficient for most of the use cases to calculate a desired tooltip position. labelWidth and labelHeight are the width and height that your tooltip requires, hence you can use them for edge cases to adjust your tooltip and prevent it from spilling out of the chart or even worse getting clipped. Let us see an example of positioning the tooltip to the right of the point.

1

2

3

4

5

6

7

8

9

positioner:function(labelWidth,labelHeight,point){

vartooltipX,tooltipY;

tooltipX=point.plotX+chart.plotLeft+20;

tooltipY=point.plotY+chart.plotTop-20;

return{

x:tooltipX,

y:tooltipY

};

}

Keen eyes would have noticed a problem while hovering over the December points, the tooltip goes outside the chart area. Let’s fix this using the labelWidth, this tells us how much space would the tooltip need. Using the labelWidth along side pointX we can find the far right of the tooltip and compare that with the plot’s width, if it goes outta bounds, we position the tooltip to the left instead. Try fiddling with the rightmost points on the series.

1

2

3

4

5

6

7

8

9

10

11

12

13

positioner:function(labelWidth,labelHeight,point){

vartooltipX,tooltipY;

if(point.plotX+labelWidth>chart.plotWidth){

tooltipX=point.plotX+chart.plotLeft-labelWidth-20;

}else{

tooltipX=point.plotX+chart.plotLeft+20;

}

tooltipY=point.plotY+chart.plotTop-20;

return{

x:tooltipX,

y:tooltipY

};

}

Sometimes, all we may want is a static location for the tooltip, like one of the corners of the chart. At the same time, we might not want the tooltip to eclipse any datapoints. We could simply assign the bottom left corner (chart.plotLeft,chart.plotTop + chart.plotHeight – labelHeight) as the tooltip’s position, and make use of the all the three parameters to determine if the current point falls behind the tooltip’s default location, if so, move the tooltip to the top right of the point. Hover over any point and observe the tooltip stays at the corner, now hover over the point at the bottom left and see the tooltip give way to the point.

He has been a preacher of Highcharts since he got acquainted with it at work & now attempts to help developers on Stack Overflow with his little knowledge. He occasionally blogs about Highcharts & has been a reviewer of the Highcharts Cookbook recently.

Jugal relishes playing Ping-Pong, solving puzzles or trying his luck at a Bowling alley. To know of what he learns, experiments and explores visit http://jugal.me/ or follow his blog, A Humble Opinion, @ https://ahumbleopinion.com/