Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[BUG]: `scattergl` and `splom` hover ignores marker size for overlapping points

Open
  • Is something wrong?
#8,082 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

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

Research direction

Reproduce the overlapping-marker example in the browser devtools, then compare scatter/hover.js with the scattergl and splom hover paths. Read the marker sizes computed in scattergl/convert.js and trace how the spatial-tree search uses hoverdistance. Done means WebGL hover ranking matches scatter for marker size and x-hovermode without unintended changes elsewhere.

Written by the indexing model from the issue text.

Description

bug P3 size: 3
Description

If markers of different sizes overlap, scatter and scattergl show different hover labels. scatter includes the marker radius in the hover distance, and a smaller marker wins while the pointer is near its center (src/traces/scatter/hover.js). scattergl and splom measure only the distance to the marker center, so the marker drawn on top always wins. scatterpolargl inherits this through scattergl.

scattergl also uses a plain |dx| in x hovermode, but scatter changes the shape of dx inside the marker radius. That difference can rank close points differently.

This is a follow-up to #8077, which fixed ties between equal distances.

Steps to reproduce
  • Open Plotly devtools
  • Run this snippet in the browser devtools
Plotly.newPlot(gd, {
    data: [
        { type: 'scatter', name: 'A', mode: 'markers', marker: { size: 6 }, x: [1], y: [0] },
        { type: 'scatter', name: 'B', mode: 'markers', marker: { size: 20 }, x: [1], y: [0] }
    ],
    layout: { hovermode: 'closest' }
});
  • Hover the center of the shared point
  • Note that the label shows A
  • Change both traces to type: 'scattergl' and hover again
  • Note that the label shows B
Notes
  • A fix probably means sharing the scoring functions in scatter/hover.js with scattergl and splom
  • Each marker's radius can be taken from the sizes that scattergl/convert.js already computes
  • Large traces search a spatial tree within hoverdistance of the pointer, so the search box also has to grow by the largest marker radius
  • This would changed hover results for every WebGL plot with markers of different sizes, so we need to be careful about the blast radius
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
1d 21h
Merged PRs (30d)
21

Getting set up

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.

More from plotly/plotly.js

All issues in plotly/plotly.js

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.