Repository navigation
[BUG]: scattergl and splom hover ignores marker size for overlapping points #8082
Description
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.jswithscatterglandsplom - Each marker's radius can be taken from the sizes that
scattergl/convert.jsalready computes - Large traces search a spatial tree within
hoverdistanceof 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
Activity
adimalkar commentedon Nov 11, 2026
I reproduced this on
main(90f954a) with real pointer events in Chrome, and I have a fix ready if you'd like a PR.It follows your notes:
dx/dy/dxymath inscatter/hover.jsinto two exported functions,getAxisDistanceandgetPointDistance, without changing it.scatterglandsplomnow score points with them. Each radius is half of thesizes/sizethatconvertalready computes for the WebGL markers.scattergluses the spatial index, the search box grows by the largest marker radius.scatterpolarglgets the fix throughscattergl.Before and after, comparing the WebGL trace with its SVG counterpart:
main[6, 20]at the same pointsplom, sizes[6, 20]scatterpolarglvsscatterpolar, sizes[6, 20]About the blast radius: with markers of equal size, ties still go to the trace drawn last (#8077). Two things change for every WebGL plot with markers:
hoverdistanceof the marker's edge, as inscatter.spikedistanceand the label order inxhovermode use the same scoring asscatter.scatter. Before, WebGL picked the nearest center. This changed five expectations inscatterpolargl_test.js. Their default pointer is 3.7px from point 2 and 5.8px from point 26 of 'Trial 3', and both markers have a 6px radius.scatterpolarpicks point 26 for the same figure, andscatterpolarglnow does too.The hover label still anchors at the marker center in WebGL.
scatteranchors it at the edge. I left that out to keep this change focused.