plotly.js Hover labels across shared axes

As reported by a Dash community user: https://community.plot.ly/t/two-graphs-one-hover/6400/5

They would like hover labels to appear on all traces across all y-axes with shared x-axes. Right now, they only appear in the subplot that you are hovering in.

Oct 23 '17 18:10 chriddyp

Yeah - maybe under a new hovermode.

In the meantime: https://plot.ly/javascript/hover-events/#coupled-hover-events

Oct 23 '17 18:10 etpinard

If so, I think it would hinge on the id attribute.

Oct 23 '17 18:10 rreusser

After some searching came across this Subplots Hover problem with closest data

Nov 06 '17 05:11 deechiw

Would it make a difference if the graphs were in separate Divs, as inHide/show graph based on drop down selections. Will the hover still be applicable, actually a vertical line would do it better

Dec 05 '17 03:12 deechiw

👍 for this feature.

I'm trying to implement a workaround using the "coupled hover events", yet so far I was unable to have it working.

Here my attempt so far: https://codepen.io/anon/pen/MXMqQa

Jul 06 '18 13:07 lordgordon

@lordgordon here is a working pen from the community forums

Sep 25 '19 21:09 eddy-geek

So, after digging a bit, here is a solution that works for me, based on great work by others in the community.

The main tricks are

dynamically get plot names
use visdcc.Runjs to reload the javasript on graph change, to reattach the event handler to the re-created plot. (other approaches like setTimeout and dash_defer_js_import work the first time only)

JS_STR = '''

var plotid = 'theplotname'
var plot = document.getElementById(plotid)

plot.on(
  'plotly_hover',
  function (eventdata) {
    Plotly.Fx.hover(
      plotid,
      { xval: eventdata.xvals[0] },
      Object.keys(plot._fullLayout._plots) // ["xy", "xy2", ...]
    );
  });
'''

layout = html.Div([
    dcc.Graph(id='theplotname'),
    visdcc.Run_js(id='hover-js')  # <-- add this
])

@app.callback(
    [Output('theplotname', 'figure'),
     Output('hover-js', 'run'),  # <-- add this
    ], [... inputs...])
def foo(inputs):
    figure = ...
    fig.update_layout(hovermode='x')   # "compare"
    return figure, JS_STR  # <-- add this

Sep 25 '19 23:09 eddy-geek

Any way of achieving this with python API?

May 11 '20 19:05 LukaPitamic

@LukaPitamic , it would be great for R plotly too, it is a very nice feature.

May 28 '20 03:05 GitHunter0

@fmgithub2017 totally agree, I was trying to find a way around it but could not find any good solution

May 28 '20 16:05 LukaPitamic

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $15k-$20k

What Sponsorship includes:

Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
Tests for this feature
Long-term support (continued support of this feature in the latest version of Plotly.js)
Documentation at plotly.com/javascript
Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
Possibility of integrating this feature with Dash
Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.

Sep 10 '20 19:09 jackparmer

here's a good example, but wonder how it's possible to Python API so to speak

https://covid19-projections.com/path-to-herd-immunity/

Apr 05 '21 04:04 immartian

This seems to work somehow. But is this possible with the Python API? https://codepen.io/maio93/pen/OQxoZx Screenshot 2022-01-29 at 08 29 32

A similar solution (also JS): https://stackoverflow.com/questions/35281746/plotly-js-hover-across-multiple-subplots

Jan 29 '22 07:01 1081

Hi guys, don't know if this is the right forum but I will give it a shot. Has anyone tried to implement this hover function in python Plotly?

https://codepen.io/duyentnguyen/pen/LRVbyY

Jul 07 '22 21:07 Hans-Christian-1995

@Hans-Christian-1995 I looked into it, but couldn't find a way to do it with Python API method. Since we are doing everything in JLab JS method was a no-go. But this feature would make so much sense for us.

Jul 11 '22 07:07 LukaPitamic

@LukaPitamic , thank you for checking :). I agree, this feature would be very nice to have in Plotly. Is there any ways this can be developed?

Jul 11 '22 08:07 Hans-Christian-1995

@Hans-Christian-1995 my comment above was for python (which this is probably not the right place to discuss). Unfortunately I think the solution stopped working with more recent versions of plotly, but it's certainly a good starting point.

Jul 11 '22 10:07 eddy-geek

Hi, It'll be great to have this feature for python, any updates?