[BUG]: When using scattergl and zooming in significantly, the lines and dots fail to align
Open
Nobody has claimed this yet.
bug
P3
size: 1
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
Description
Description
When using scattergl, I found that if I zoom in too much, the lines and dots do not align properly.
Screenshots/Video
Steps to reproduce
Click the "zoom" function in the toolbox and continuously zoom in on the points until the points and lines are misaligned.
JavaScript
<html>
<head>
<!-- Plotly.js -->
<meta charset="UTF-8" />
<script
src="https://cdn.plot.ly/plotly-3.3.0.min.js"
charset="utf-8"
></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#graphDiv {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="graphDiv"></div>
<script>
const rand = () => Math.random()
var x = [1, 5, 10]
var data = [
{
type: 'scattergl',
mode: 'lines+markers',
line: { color: '#b55400' },
y: [0.000014, 0.000015, 0.000012],
hoverinfo: 'skip',
},
{
type: 'scattergl',
mode: 'lines+markers',
},
]
var layout = {
dragmode: 'pan',
title: { text: '' },
uirevision: 'true',
xaxis: { zeroline: false, tickformat: ',d' },
yaxis: { zeroline: false, tickformat: '.6f', automargin: true },
responsive: true,
}
const graphDiv = document.getElementById('graphDiv')
Plotly.react(graphDiv, data, layout, {
displayModeBar: true,
responsive: true,
})
</script>
</body>
</html>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided JavaScript reproduction using Plotly.react and the scattergl trace in lines+markers mode; repeatedly zoom in to observe when the lines and dots diverge. Trace the scattergl rendering and zoom behavior until the coordinate handling is clear, then verify that the lines and markers remain aligned at extreme zoom levels.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100