Richeeyyy
Posts: 10
Joined: Wed Nov 10, 2021 1:35 pm

Make graph appear only when hovered over marker

Hello,

I have two points A and B in a line series where the graph between them has a lineWidth of 0 (I will refer to this as "non-visible"). When I hover over the markers or over the non-visible graph line between them, the graph line becomes visible (lineWidthPlus of 5).

Now, if there is a point C of a different series in between the two points A and B of the first series (close to the non-visible graph of the first series), I cannot reach point C's tooltip. Once I get close to the graph of the first series (and point C), the graph and the tooltip of point A or B are shown rather than the tooltip of Point C. Even though I am close to point C, the graph of the first series has priority over point C regarding the hovering. The fiddle listed below shows the setup of the problem. For some reason the problem does not occur there. It must be one of the components used in my project that provoke this problem. However, the fiddle gives a good hint what my problem ist about.

In order to make it possible to reach point C's tooltip it would be nice if the first series' non-visible graph could only show when hovered over the markes and NOT the (non-visible) graph in between the markers. Is that possible? Or do you have another solution to this?

I already tried reducing the snap with no positive outcome.

Thank you in advance from Germany!

https://jsfiddle.net/bo1y4zL5/
Blue series is the first series, black is the second.
Richeeyyy
Posts: 10
Joined: Wed Nov 10, 2021 1:35 pm

Re: Make graph appear only when hovered over marker

Correction (bold):
In order to make it possible to reach point C's tooltip it would be nice if the first series' non-visible graph could only show when hovering over the markers and NOT the (non-visible) graph in between the markers.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Make graph appear only when hovered over marker

Hi,

Thanks for contacting us with your question!

Try to disable stickyTracking on the blue series and let me know if that resolve the problem.

Demo
https://jsfiddle.net/BlackLabel/b0edko4z/

In the other case, could you please reproduce your chart to the fiddle? It's hard to tell what configuration could cause this problem without taking look at your code.

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
Richeeyyy
Posts: 10
Joined: Wed Nov 10, 2021 1:35 pm

Re: Make graph appear only when hovered over marker

Thanks for the answer! stickyTracking is disabled..

The fiddle has all the settings that are used in our project's graph. The problem occurs in every single graph. We wrote our own Java classes that deal with highcharts in order to build our graphs.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Make graph appear only when hovered over marker

Hi,

I think didn't understand you correctly at a previous time. To prevent the tooltip from switching or closing when touched or pointed you can use stickOnContact option.

API Reference:
https://api.highcharts.com/highcharts/t ... kOnContact

Demo
https://jsfiddle.net/BlackLabel/13q8cra5/

Let me know if that was what you were looking for,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
Richeeyyy
Posts: 10
Joined: Wed Nov 10, 2021 1:35 pm

Re: Make graph appear only when hovered over marker

Thanks for the reply!

stickOnContact is set to false.

Unfortunately, stickOnContact = true makes the problem even worse. Once I get close to the graph, it shows the graph's closest point's tooltip rather than point C's tooltip. With stickOnContact, now it's even harder to get to point C's tooltip.

I appreciate your efforts, thank you!
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Make graph appear only when hovered over marker

Hi,

Could you please make a gif showing the behaviour of the series at your project? It will help me with a better understanding of the problem and find the best solution.

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
Richeeyyy
Posts: 10
Joined: Wed Nov 10, 2021 1:35 pm

Re: Make graph appear only when hovered over marker

Of course, here are two images.

(1) https://gifyu.com/image/S2UuD
(2) https://gifyu.com/image/S2UQ8

In (1) you can see the chart and point C without hovering. There are two series (green with point C and blue).

Now, if I try to hover over point C, the tooltip of the blue series always pops up (2). The curser is not shown in the image because it is deactivated when screenshotting. The curser was directly on point C in the image.

I would expect that point C's tooltip is shown rather than the tooltip of the blue series.
Richeeyyy
Posts: 10
Joined: Wed Nov 10, 2021 1:35 pm

Re: Make graph appear only when hovered over marker

And here is a GIF (took a little longer to make that).

https://gifyu.com/image/S2UWB

I hope it's big enough, maybe you need to zoom in with your browser.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Make graph appear only when hovered over marker

Hi,

Thank you for preparing a gif! It confirmed my previous assumptions, that stickyTracking to false should definitely help in this case.
I would recommend to disabled stickyTracking again but for all series.

Code: Select all

plotOptions:{
		series: {
		stickyTracking: false
		}
	},

You can also check various configurations of findnearestpointby.
API: https://api.highcharts.com/highcharts/s ... estPointBy
or
tooltip.snap
API: https://api.highcharts.com/highcharts/tooltip.snap

Make sure what version of Highcharts you are using - the recommended version is the latest - 9.3.2

Your chart looks much more expanded than in the fiddle, but if it's full configuration and If the above doesn't help, it seems it could be a problem with your Java classes.

Let me know if that worked for you,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
Richeeyyy
Posts: 10
Joined: Wed Nov 10, 2021 1:35 pm

Re: Make graph appear only when hovered over marker

Unfortunately it didn't. :( I asked my employer to let me post our exact data. And here is a fiddle that shows the problem. This is the graph 1:1 as it is used in our project.

https://jsfiddle.net/Lcwqo2r3/1/

Try reaching the second blue dot (at 14:35:05 on x-axis and 8000€ on y-axis). It is possible, but it's not easy. Most of the time, the green graph's tooltip is shown rather than the blue dot's tooltip. Zooming makes it slightly easier, but it doesn't solve the problem.

Thank you so much!
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Make graph appear only when hovered over marker

Thank you for providing the demo. It was really helpful because after tests I realized that I misled you.

In fact, when we disable stickyTracking for overlapping series, the mouseOut event can't be triggered because series have the same area around them. It causes the inability of showing the tooltip of the covered point.

To sum up, for line series default stickyTracking is true and that's how it should be set up.

Demo:
https://jsfiddle.net/BlackLabel/8kxLdfa0/

I wasn't able to check it on your first demo, because it shows a different configuration than at your project, but your gif should have guided me. My apologies!

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
Richeeyyy
Posts: 10
Joined: Wed Nov 10, 2021 1:35 pm

Re: Make graph appear only when hovered over marker

That works! Thank you so so much, you have no idea how happy I am right now! :)

I guess I didn't understand the concept of stickyTracking before, but now I do thanks to you!

Have a great weekend and greetings from Germany!
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Make graph appear only when hovered over marker

You're welcome! Have a great weekend too! :)
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”