Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Not getting hoverData callback responses?

Hello, I am trying to replicate the functionality in the Update Graphs on Hover example at Part 4. Interactive Graphing and Crossfiltering | Dash for Python Documentation | Plotly. I have this example and a modified version of multiple-hover-data.py working from python source code of multiple-hover-data working fine.

In my program, I am setting points on a graph in a loop using the following definition:

            fig.add_trace(go.Scatter(mode="markers+text",
                                     x=[x],
                                     y=[y],
                                     marker={'color': color,
                                             'size': size},
                                     text=tt,
                                     textposition='middle left',
                                     textfont=dict(
                                         size=12,
                                         color=self.dash.color['font']
                                     ),
                                     hoverinfo=hi,
                                     hovertemplate=ht,
                                     showlegend=False))

and returning

return html.Div([dcc.Graph(figure=fig)])

I am using this unorthodox manner to display 1000-5000 points in a tight X,Y grid of circles instead of any x,y that matches their data values which the hovertext displays with different dropdown options drawing or not drawing many of the points. All the hovertext works perfectly however my callback to get the hoverData:

@app.callback(
    dash.dependencies.Output('graph_temp-capsector', 'children'),
    [dash.dependencies.Input('graph_grid-capsector', 'hoverData')])
def callback_hoverdata_capsector(hoverdata):
    print(hoverdata)

gets no response other than an initial None when the graph is created.

What do I need to do to get hoverData callback responses? Do I need to transition from using go.Scatter to px.scatter or load additional data into the dcc.Graph?

figured this one out myself too. At least it was a Sunday.

The problem was that my

[dash.dependencies.Input('graph_grid-capsector', 'hoverData')]

was the div that I put my graph inside, not the graph itself. I started with the top example from https://dash.plotly.com/interactive-graphing and got it working loading all of my data into a df and the df into px.scatter. It might take me a while to get all my old formatting back but at least I have the hoverData callbacks working.