Graph hover info lingers when using Dash app on mobile after the graph has been changed

Dash Python
1

Simple Dash app with a dropdown menu and an a graph. The graph changes with the dropdown selection. The graph shows hover data as usual and works perfectly on a computer.

When used on mobile / tablet the hover info shows up when a data point is clicked. The hover info lingers until you click somewhere else, even if the graph is change using the dropdown.

Can someone help with a solution for this?

Thank you!

2

Hello @vrg,

Welcome to the community!

I’d try having your hoverData clear upon changing the chart’s figure. This should help you in this case.

3

hello! thanks for the response. I’ve tried something like this but it does not seem to do the trick:

@app.callback(
Output(‘bar-chart’, ‘figure’),
Output(‘bar-chart’,‘hoverData’),
Input(‘my_dropdown’, ‘value’))

def update_chart(selected_option):
if selected_option == ‘opt1’:
figure = x
elif selected_option == ‘opt2’:
figure = y
return figure, None

4

Try returning an empty dict {} instead of None

5

thanks for the feedback. Just tried this, doesn’t seem to be it!

7

Here is a minimal working example. On touch interface, the hover info is sticky when the dropdown value and source graph are changed. I’ve tried using various parameters like clear_on_unhover, hoverData, hoverinfo, selectedpoints. Looks like the interaction gets captured as a click on touch so I tried to work with properties like clickData. Ideally, looking for the label to disappear when the dropdown is changed so it isn’t referencing the incorrect data point on the graph. thanks guys!

# Import modules
import plotly.graph_objs as go
import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output

# App layout 
app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'Graph 1', 'value': 1},
            {'label': 'Graph 2', 'value': 2}
        ],
        value=1
    ),
    dcc.Store(id='click-data-store'),
    dcc.Graph(id='graph')
])
  
# Dropdown graph callback
@app.callback(
  Output('graph', 'figure'),
  [Input('dropdown', 'value')]
)
def update_graph(selected_value):
  figure = go.Figure()

  if selected_value == 1:
      figure.add_trace(go.Bar(x=['ABCT','DEFR','GHIP'], y=[4, 5, 6], name='Graph 1'))
  elif selected_value == 2:
      figure.add_trace(go.Bar(x=['JKWW','STVP','CXYZ'], y=[3, 10, 4], name='Graph 2'))
  
  return figure

# Run app
if __name__ == '__main__':
    app.run_server(debug=False, host="0.0.0.0", port=1005)
8

Lots of sample apps and documentation examples seem to work the same way. This sample app on the dash gallery seems to work around the issue if you check out the first two graphs and change the dropdowns.

9

Hey, I know this post is pretty old, but I was having the same issue and saw this post, as well as a bug report on github. After some playing around, I found that if I returned the entire dcc.graph component in my callback and gave the component a unique id (which I did with python’s time module), whenever I called the function and updated the graph, the popup would no longer be sticky on my phone.

import time

layout = html.div(id="graphdiv")

@app.callback(
    Output("graphdiv", "children"),
    Input("dropdown", "value")
)
def updateGraph(selected):

      ...

      return dcc.Graph(id=str(time.time()), figure=generatedGraph)

This exact way wouldn’t work if you needed to use the graph in an input, but you may be able to use pattern matching callbacks and change the id to be a dictionary with a standard type and varying id to make the graph a usable input. (This link explains this better: https://dash.plotly.com/pattern-matching-callbacks)