Plotly.js: 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.