Tooltips & selected series on precise hover

[darkocejkov]

Hello!
I am working on a project that uses Highcharts, specifically the React (https://github.com/highcharts/highcharts-react) wrapper. I am finding most things very simple to configure, but am having issues trying to understand what exactly to do in order to achieve my goal.

I've noticed that Highcharts tooltips and mouseOver interactions work for the "closest" series/point, but I would like my chart to have a precise mouse over, or at least being able to change the range of how it judges the nearest series. For example, it would be amazing to be able to specify either 0 for a precise range, or a small px value for a near-precise mouse over interaction. This is specifically because I have charts that use the selected/active ability with shared tooltips. Here is a visualization:





This is a demo I have been playing around with trying to better understand: https://jsfiddle.net/9fyz3p2k/8/.
Essentially my question is about how to enable `stickyTracking` for a line's point, so that when hovering over a point, it can set other lines across series to inactive, but display the tooltip across the series.
- stickyTracking ON for the line - so that I can toggle series inactivity/selected series
- stickyTracking OFF for the chart - so that I can have a tooltip shared across the series.

Thanks!

[michal.f]

Hello and welcome on our fourm!

You can customize stickyTracking to work only for a specific one of the series by setting it directly in the series settings.

Demo: https://jsfiddle.net/BlackLabel/xa35stbn/
API: https://api.highcharts.com/highcharts/s ... kyTracking

Let me know if this is exactly what you had in mind!

Regards!

[darkocejkov]

Thanks for the reply!
Unfortunately, your answer is not what I had in mind. I believe I am a bit mis-understood here as it's quite difficult to explain so I'll try again.

I'm looking to have the hovered series be precise to the cursor instead of being active to the nearest point. Simultaneously having a tooltip always appear that follows the cursor. With sticky tracking enabled, the tooltip appears on exact hover which I do not desire.

This is a visualization of what I'm experiencing:

Where the selected series is judged based off the NEAREST series to the cursor. In this image, the cursor is not directly over Series 2, but Series 2 is selected as it is the closest series.

I would like to instead have a tooltip appear across (shared) the series.


while simultaneously only having hovered state when the cursor is directly over the series, not based on the nearest.


To put it differently:
- tooltips should act in the way that it does not require a direct hover over a series to display
- hover states should act in the way that it requires a direct hover to maintain a currently hovered series.

the main problem here being that it's not easy to "decouple" these two things. Whenever I turn stickyTracking to false, the tooltip no longer displays hovering over the chart area, but only on direct hover. Whenever stickyTracking is set to true, it displays the tooltip as needed, but it selects the nearest series.

[michal.f]

Hi!

Unfortunately, but your requirements are very unusual. With the help of API you are not able to achieve such tooltip functionality.

You can try to overwrite the current code responsible for the tooltip's operation: https://www.highcharts.com/docs/extendi ... highcharts, but this requires spending much more time and goes beyond the scope of forum support. If you have an Adventage+ license with active premium support then you can write on Technical Support Live Chat: https://www.highcharts.com/blog/support/

Regards!

[darkocejkov]

Ah, that is quite unfortunate, but it's totally fine - just a very particular requirement.
Thank you very much for helping however, really appreciate it.