[email protected]
Posts: 1
Joined: Thu Apr 29, 2021 3:50 pm

Tooltip collision line avoidance

Hello,

I am wishing to achieve googles stock chart tooltip within highcharts - https://www.google.com/finance/quote/UKX:INDEXFTSE

The implementation would be to have the tooltip appear at the very top of a chart by default - but if the price line appears at the top aswell - for the tool tip to appear at the bottom of the chart. (Tooltip collision avoidance with price line)

Attached is an attempt which forces the tooltip to the very top of the chart - but this doesnt quite solve how to avoid the price line

http://jsfiddle.net/dajohosm/f8ov7hjy/49/

Is this possible?
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Tooltip collision line avoidance

Hello dajohosm!

Welcome to our forum and thanks for contacting us with your question!

Using tooltip positioner function we can specify the position of the tooltip of the chart. In the demo below I've split the positions of tooltips into two places. The date tooltip is on the top and the value tooltip is at the bottom. You can adjust these x and y values to your preferences.

API references:
https://api.highcharts.com/highstock/tooltip.positioner

Demo:
http://jsfiddle.net/BlackLabel/sr9twyag/

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Usage”