Hovering for points on non-overlaying y-axes for same x-value (and same plot)

[Abildtoft]

Hi,

For a medical app, I have created a plot wherein i stack 4 y-axes (e.g., 'yaxis' has domain [0.00, 0.24], 'yaxis2' has [0.25, 0.48], ...), while they all share the same date x-axis. My reason for stacking them instead of overlaying them is not only that they each represent quite disparate ranges (each with their own unit), but also have quite different 'sub-ranges' (e.g., what range constitutes an 'acceptable' value).

Stacking instead of overlaying, however, breaks the 'x'-hovermode insofar as it limits itself to only look for points with the same x-value as the 'originally hovered'-point within overlaying subplots. When I tried to write my own "plotly_hover" event handler, I realized that Plotly.Fx.hover does not allow for the specification of a subplot per point (in the array one can supply in the 'evt' variable), but can only be specified generically for all points with the 'subplot' variable.

Am I missing a workaround that still allows me to use your awesome built-in hover functionality without attempting to rewrite it myself, or dropping it in favor of the dirtiness of dynamically adding and removing annotations?

In any case, thanks for an awesome library.

[etpinard]

I realized that Plotly.Fx.hover does allow for the specification of a subplot per point

This example: https://plot.ly/javascript/hover-events/#triggering-hover-events should answer your question.

If not, could you please paste a link to a reproducible example on codepen / jsbin / jsFiddle as mentioned in our contributing guidelines ?

[Abildtoft]

I'm so new to GitHub that I didn't even realize that there were contributing guidelines, my mistake for not checking before writing. As for your quote, I mistakenly left out a "not" as should be clear from the context. I apologize for the poor quality of my input.

As jsFiddle of my graph is available here.

The example you linked - which I used as my starting point - provides no 'subplot' variable to Plotly.Fx.hover which then defaults to 'xy' (and in the given example, that is the only x & y combination). As you can see in the code for Fx.hover (from line 66663 in plotly.js version 1,6.0), subplot is given not per point but generically for all points. And in my use case, this means that i cannot (to the best of my knowledge) trigger hovering for points on xy, xy1, etc. at the same time when using Fx.hover, being limited to one subplot at a time.

I hope this makes my issue more understandable and I do recognize that this is probably a (very) fringe use case.

Thank you for your time

[john-soklaski]

I have a need for this as well. I've previously prototyped an implementation that allows fx.hover to take an array of subplots.

I've updated your jsFiddle with my forked version:
https://jsfiddle.net/2v2qp0hy/2/

You can see my changes here:
https://github.com/john-soklaski/plotly.js/tree/subplot_hover

[etpinard]

@john-soklaski your patch is looking good. Would you mind making a PR to this repo?

[Abildtoft]

@john-soklaski and @etpinard thanks for the help, this was exactly what I was looking for.

[john-soklaski]

@etpinard Thanks! I intend to submit a PR, but hadn't had a chance to write unit tests or test with a graph with horizontal hovering. Would you prefer I send a PR now and those things can come after?

There is also this behavior if the points on the other plots don't share an x value, but are near-enough:

I'm not sure what the behavior should be here. Any thoughts?

[etpinard]

Would you prefer I send a PR now and those things can come after?

Yes, please make a PR out of the patch you wrote already. We'll take the discussion from there.

There is also this behavior if the points on the other plots don't share an x value

Looks like what you have mimics what is displayed on a multi-trace / single-set-of-axes plot with layout.hovermode set to 'x'. I believe this is the behavior we want.

[john-soklaski]

I've created PR #301 to add this feature

[etpinard]

Closed via #301