plotly / plotly/plotly.js

Hover info is sticky on touch interfaces even after the source graph is changed

Open
#6,783 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug cs P2 sev-2
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

On touch interface, hover info displays when a data point is clicked. This is perfect. Although, the info seems to be sticky even after changing the source graph . I haven’t found a straightforward way to change this. 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.

Below is a minimal working example and and some screenshots to illustrate. The app has a dropdown menu and an a graph. The graph changes with the dropdown selection. The hover info lingers even if the graph is change using the dropdown. Ideally, the label could disappear when the source graph is changed. This would be great for a touch interface friendly UX as the hover label is a nice way to pack in more info on a small display like mobile.

Thanks for looking into this! @Coding-with-Adam

minitest_screenshot

# 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)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the minimal Dash app in the issue on a touch interface, selecting a data point, and changing the dropdown source graph. Trace how the graph update interacts with the captured click or hover state; done means the old hover label disappears when the source graph changes without breaking touch hover behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.