[BUG]: Polar plot zoom function wipes internal layout settings and incorrect range for dblclick zoomout function
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
Description
Description
Haven't seen if this is an issue in other plot types, but currently working on a polar plot.
There is a problem when if you initialize a plot with empty traces with autorange: true or with range not specified and then update the data, the zoomout dbl click does not accurately zoom out to the full range of the dataset, it defaults to a range of [0, 1].
Secondly the zoom button from the barmenu will wipe some layout settings of the plot.
For example in a polar plot dragmode: false disable user to rotate the plot. However when the user zooms in,
the user is able to rotate the plot.
The following code snippet will be able to reproduce the above mentioned issues on codepen.
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-3.1.2.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
var data = [
{
r: Array(8).fill(0),
// r: [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],
theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
name: "11-14 m/s",
marker: { color: "rgb(106,81,163)" },
type: "barpolar"
},
{
// r: [57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],
r: Array(8).fill(0),
theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
name: "8-11 m/s",
marker: { color: "rgb(158,154,200)" },
type: "barpolar"
},
{
// r: [40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],
r: Array(8).fill(0),
theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
name: "5-8 m/s",
marker: { color: "rgb(203,201,226)" },
type: "barpolar"
},
{
// r: [20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5],
r: Array(8).fill(0),
theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
name: "< 5 m/s",
marker: { color: "rgb(242,240,247)" },
type: "barpolar"
}
];
var layout = {
title: {
text: "Wind Speed Distribution in Laurel, NE"
},
font: { size: 16 },
legend: { font: { size: 16 } },
polar: {
radialaxis: {
ticksuffix: "%",
angle: 45
},
angularaxis: {
direction: "clockwise"
}
},
dragmode: false
};
var newData = {
r: [
[77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],
[57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],
[40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],
[20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5]
]
};
const updatedLayout = {
polar: {
radialaxis: {
range: [0, 100] // Update only the radial axis range
}
}
};
Plotly.react("myDiv", data, layout);
Plotly.update("myDiv", newData);
Steps to reproduce
- Plot unable to be rotated
- Click on zoom on plot bar menu
- Select area in plot to zoom in
- Bug reproduced
- Plot able to be rotated
- Double click in plot to zoom out
- Unable to zoom out to full range
- Radial axis range set to [0, 1]
Notes
Also if you use Plotly.update("myDiv", newData), although only range was meant to be set, other radialaxis layout settings was reset from the update
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 reproduction using Plotly.react and Plotly.update, focusing on polar plots, zoom controls, autorange, and double-click zoomout. The payload names no repository files or tests; done means preserving layout settings such as dragmode and radialaxis configuration while restoring the full data range after zoomout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100