Hover labels solution using JavaScript

[Sravanthi-Gogadi]

Can someone please provide a clear example for this? I am having difficulty in implementing this logic.

I tried the same one but no luck
@eddy-geek @chriddyp

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

Originally posted by @eddy-geek in #2114 (comment)

[eddy-geek]

I confirm this stopped working for me months ago, after an upgrade, and I didn't have the time to hack plotly.js again 😢

[gvwilson]

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for several years, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Thanks for your help - @gvwilson