plotly / plotly/dash

Hovertext not always visible

Open
#1,638 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

Please provide us your environment, so we can easily reproduce the issue.
dash 1.20.00
dash-core-components 1.16.0
dash-html-components 1.1.3
dash-renderer 1.9.1
dash-table 4.11.3
plotly 4.14.3
displaying with chrome 90.0.4430.212
Windows 10; monitor resolution set to 1920x1080

Hovertext is not always able to be made visible when scrolling over the plotted data. This bug is difficult to reproduce, and definitely varies depending on the operating system's screen resolution. In the example below, it is impossible for me to hover over the data point with a y value of 9.0. Yet if I set the screen resolution to 1680x1050 or 800x600 the same input works fine. When it does not work, if I click in the graph and activate "show closest data on hover" then I can hover over the data - but I want to be using the "compare data on hover" in my real plots with many more traces/lines on them. Actually, in my real app, I am explicitly requesting hovermode 'x'.

I expect the hover data to always be available, regardless of monitor resolution.

reproducible code example (though the indentation is messed up when I paste it in)

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
dcc.Graph(id='graph',
figure={'data': [{'x': ['1986-07-29','1994-04-05','1994-04-08','1994-04-18','2021-05-10'], 'y': [1.0, 2.0, 9.0, 3.0, 10.0],
'type': 'scattergl'}],
'layout': {'width': 1847.6, 'margin': dict(l=50.6, r=11.92),
'xaxis': dict(range=['1986-06-20 21:18:43.20','2021-06-17 02:41:16.80'] ) } }
) ])

if __name__ == '__main__':
app.run_server(debug=True, port=8052)

Screen recording showing the problem is also attached.
https://user-images.githubusercontent.com/25270381/117925765-f0476400-b2b4-11eb-8dc2-cc4ccb5afc04.mp4

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 with the reported dcc.Graph example and app.run_server entry point, then compare hover behavior across the listed screen resolutions, Chrome, and hover modes. Use the attached recording and verify that the y=9.0 point and other plotted data consistently expose hover information regardless of resolution.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.