Hover labels across shared axes

[chriddyp]

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.

[etpinard]

Yeah - maybe under a new hovermode.

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

[rreusser]

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

[deechiw]

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

[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

[lordgordon]

👍 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

[eddy-geek]

@lordgordon here is a working pen from the community forums

[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

[LukaPitamic]

Any way of achieving this with python API?

[GitHunter0]

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

[LukaPitamic]

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

[jackparmer]

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.

[immartian]

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/

[1081]

This seems to work somehow. But is this possible with the Python API?
https://codepen.io/maio93/pen/OQxoZx

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

[Hans-Christian-1995]

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

[LukaPitamic]

@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.

[Hans-Christian-1995]

@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?

[eddy-geek]

@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.

[maguerreberry]

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

[AlanCPSC]

This addition would be fantastic! It would be much appreciated if the Plotly team could consider incorporating it into their roadmap for 2024. 👍

[LukaPitamic]

I totally agree, keep the good work!

[archmoj]

This would be resolved by #6947.

[LukaPitamic]

awesome!!!
can't wait