Plot margins do not reset on Plotly.react() if layout.legend.xref or yref are set to "container"
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 18.3k
- Forks
- 2k
- Ø Merge
- 2 T. 12 Std.
- Gemergte PRs (30 T.)
- 28
Beschreibung
I have designed an use case where there is no data to display on the chart: please imagine an user selecting from a list of countries to display some data and the selected country has no data to be displayed. I have all the data available, the page doesn't need to be refreshed (we're trying to keep it dynamic) so the Plot needs to be updated.
Please check this pen: https://codepen.io/bleah1/pen/NWOoZXd where, after 4 seconds, both plots are updated.
As such, I update the Plot using Plotly.react() with no data and a special layout:
const noDataChartLayout = {
width: 400,
autosize: true,
title: null,
margin: { t: 0, b: 0, pad: 0 },
// showlegend: false,
legend: {
yref: "paper",
xref: "paper",
y: 0,
x: 0
},
hovermode: false,
dragmode: false,
xaxis: {
visible: false
},
yaxis: {
visible: false
},
annotations: [
{
text: "Chart unavailable.<br>No matching data found.",
xref: "paper",
yref: "paper",
showarrow: false,
font: {
size: 20
}
}
]
};
The issue is that when the legend is set with the new layout.legend.xref / yref features to container the margins of the plot do not reset even after updating the layout.
I've tried using or commenting the following layout props:
// showlegend: false,
legend: {
yref: "paper",
xref: "paper",
y: 0,
x: 0
},
but the annotations still aren't centered when using layout.legend.xref / yref set to container.
With container:
With paper:
I would like to use the new layout.legend.xref / yref features because with them I don't need to manually calculate legend.x and y positioning and layout.margin for each view size for each chart.
Any thoughts ?
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Reproduziere das Verhalten im verlinkten CodePen und konzentriere dich auf das Plotly.react()-Update, das die Legendenwerte xref/yref in "container" ändert und anschließend das Layout ohne Daten wiederherstellt. Verfolge, wie sich die Container-Legende auf die Plot-Ränder und die Positionierung der Annotation auswirkt; abgeschlossen ist die Aufgabe, wenn die Ränder zurückgesetzt und die Annotation nach dem Update zentriert ist und dem Verhalten der Paper-Referenz entspricht.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript
- Bereich
- data-visualization
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 42/100