Navigator onhover/mouseover event

[Majonez69]

Hi!

Basically what I need is a mouseover event on the navigator itselft. If I'm right this is not supported still (I think I've seen some threads about it not being available, also think I've voted for this feature to be implemented next, although I can't find where) but all in all I need it
Reason - we're using just the navigator of a chart (we're hiding the actual chart, leaving just the navigator).

I've seen that there's a mouseover event handler available for navigator plotbands (https://api.highcharts.com/highstock/na ... .mouseover) so I've tried that - between each series point I've introduced a plot band and provided some event handlers. While it looks like it's there it is not working as expected unfortunately. The reason is probably the z-index which if too high provides the proper behaviour however it blocks any other interactions with the navigator (dragging handles, clicking) as it's overlapping it's elements, or if it's too low then the events on the plot bands are not triggered, cause the plot bands are underneath the navigator elements.

Am I going in good direction here, or simply put that thing will not work and there's no solution whatsoever (even a hacky one) to support mouseover events on the navigator?

Best regards
Marcin

[dawid.d]

Hi!

Thanks for contacting us with your question!

I don't quite understand what exactly you want to achieve at this point. Do you need to refer to the event when hovering the entire navigator itself, hovering the plot bands or handling the whole mouse events behaviour in the navigator like the markers hover state, tooltip etc?

If you meant hovering the whole navigator, you can try adding a mouseover event to the SVG group of elements that make up the navigator, as in the demo below.
Demo: https://jsfiddle.net/BlackLabel/07afy6tb/

When it comes to capturing the mouseover event on the plot band, everything will work if the series is defined inside the navigator, as in the demo below.
Demo: https://jsfiddle.net/BlackLabel/oydgnj5c/

If nothing of this helped, please specify what you would like to achieve more precisely. I'll do my best to help you.
I'm waiting for your reply.

Best regards!

[Majonez69]

Oh sure, haven't mentioned that when hovering over a particular place on the navigator I would like to be able to get the values from the navigator series associated with the position of the cursor. So in the first example you've provided, instead of alerting the page that there was a hover effect I would like to tell specifically that : "Mouse is over navigator, the value for Oct 21st is 144.84", then while moving the mouse also update that message to follow the cursor and tell which navigator series point is being hovered over.

For similar purposes on an actual chart we've used a tooltipFormatter, which reads the values on each mousemove over the chart - need a solution like this for the navigator itself. Is that clearer?
I don't really need the plot bands, that just was my try to solve my problem, as I've assigned the proper values as plot band label, to which I have access when the `mouseover` event is triggered on them.

Regards

[dawid.d]

Hi,

Thanks for the clarification, it's much easier for me now to help!

As in the demo below, you can call the mousemove event for the whole chart. Then limit the range with navigator dimensions and convert pixel values to axis units using the toValue method. (See: https://api.highcharts.com/class-refere ... is#toValue)

Demo: https://jsfiddle.net/BlackLabel/3jxgandy/

Let me know if that was what you were looking for!
Regards!

[Majonez69]

That might actually work!
Just 2 things I need to ask:

1) The demo navigator has no handles (extremes), I guess that's due to the configuration/options itself, but would the same solution work on a navigator with range handles? Will check that myself as well, but just wandering if there are any drawbacks of mixing those 2?
2) What I ideally need is the y value on the series, not like pixel position on the chart itself. Having the X value I can calculate the Y value, so that's not a big deal and it should work still, but just thinking out loud if there's any way to get the series Y value. Otherwise, the X value seemed to be calculated and approximated, is that correct? I wonder If I can somehow use the `findNearestPointBy` method to get the series point I need.

All in all thank you so much for your help!

[dawid.d]

Hi,

1) Yes, that will also work.
2) That's what you get. Ultimately, the x and y values displayed are not pixel positions, they are in axis units. If you need the value of x as a number and not a date, I'm sending you a new demo.

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

Regards

[Majonez69]

This is exactly it then, and that will do perfectly! Thank you very much for your thorough help, appreciate it!

Best regards

[dawid.d]

You're welcome!

In case of any further questions, feel free to contact us again.
Kind regards!

[Majonez69]

Hi again!

The code is working as expected so wanted to confirm it's all good, just one question came to my mind the other day: cleanup.
If the mouseover event is being added to the charts when it's loaded, is it required to remove the event listener on the chart's destruction? If so, how can you achieve that?

Best regards

[dawid.d]

Hi,

This is not required, when destroying the chart, all events are deleted.

But just fyi, to remove an event just use the Highcharts.removeEvent method.
API: https://api.highcharts.com/class-refere ... ent%3CT%3E

Regards!

[Majonez69]

Yeah did that, just wasn't sure how to tigger the cleanup while the chart is destroyed.
In the end, as I'm using react, I've extracted the logic of adding the event listeners to a `useEffect` hook, returning a callback to cleanup afterwards.
The `load` event on the chart just sets up a flag indicating it's loaded, so I know when to trigger that.
Maybe that's an overkill though, as you said Highcharts is taking care of it, but just wanted to make sure we got this covered.

Thanks again for all the help Dawid!

[dawid.d]

You're welcome!

In case of any further questions, feel free to contact us again.
Best regards!