plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.94k stars 1.86k forks source link

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

Open Jjnnrr opened 11 months ago

Jjnnrr commented 11 months ago

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)
Coding-with-Adam commented 10 months ago

Thanks for opening this issue, @Jjnnrr . I can confirm that I opened this Dash app on my mobile and encountered the same bug.

@alexcjohnson this is the mobile bug I mentioned to you several days ago.

Jjnnrr commented 10 months ago

Hey guys,Hope you are doing well. Just wanted to flag that I noticed the same issue with spike lines on touch interface. Spike lines are sticky even after the source graph is changed.Thanks 🙏 Best,Varun On Nov 20, 2023, at 10:21 PM, Adam @.***> wrote: Thanks for opening this issue, @Jjnnrr . I can confirm that I opened this Dash app on my mobile and encountered the same bug. @alexcjohnson this is the mobile bug I mentioned to you several days ago.