plotly / plotly/plotly.js

Hover label order for overlapping points is backwards when using WebGL

Open
#4,999 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

In a scatter plot with overlapping points, when the hovermode is set to closest, the usual behavior is to show only the information of the trace that is the most in the foreground, that is the latest one to be added, equivalently the one with largest trace number.

example: https://plotly.com/~frseguin/3/

I have noticed that when using WebGL, the information shown is instead of the trace most in the background, equivalently the trace with the smallest number. I do not know if this behavior is intended or not, but seeing as it is different from the regular scatter plot, I thought it might be a bug.

example: https://plotly.com/~frseguin/5/

My use case is the following. I have a line plot on which I want to highlight certain points with markers, but not all of them. I am adding a markers trace for those points on top of the lines trace so that it is visible. I also want the hover info to display the info from markers. At the moment, in WebGL, I can't seem to be able to do both (Trace on top and display hover info).

Thank you very much for your help.

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 reproducing the two linked examples and compare hover selection for overlapping points in regular scatter and WebGL scatter with hovermode set to closest. Trace the WebGL hover behavior and verify that the foreground/latest trace is selected; done when WebGL matches regular scatter while preserving marker visibility.

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
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.