Black Lives Matter. Please consider donating to Black Girls Code today.

Shared vertical hover line with separate plots

Has anybody created a way for multiple plots to share a vertical hover cursor? I’m trying to something similar to this D3 implementationhttps://jsfiddle.net/evu06039/2/.

I threw together a quick pen for you to get you started (hover over graph 1, a spikeline will also show on graph 2)
https://codepen.io/p1ho/pen/VdJOZB

This is probably not the best implementation, but this is just to show it’s possible.

Basically, if we can assume the 2 charts have the same height and width, we can assume the spikelines you want to show on both graphs are identical.

So what you can do is on any “plotly_hover” event on graph 1, you clone the DOM elements inside the
<g class=“hoverlayer”></g> container from the first graph, and append them to the second graph.

And then on any “plotly_unhover” event, you just have to remember to clear the <g class=“hoverlayer”></g> container in the second graph.

Hope this helps!

1 Like