Plot margins do not reset on Plotly.react() if layout.legend.xref or yref are set to "container"
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 18.3k
- Forks
- 2k
- Merge moyen
- 2 j 12 h
- PR mergées (30 j)
- 28
Description
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 ?
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Reproduisez le comportement dans le CodePen lié, en vous concentrant sur la mise à jour de Plotly.react() qui modifie xref/yref de la légende en "container", puis restaure la mise en page sans données. Suivez l’impact de la légende du conteneur sur les marges du graphique et le positionnement de l’annotation ; le travail est terminé lorsque les marges sont réinitialisées et que l’annotation est centrée après la mise à jour, conformément au comportement de la référence papier.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript
- Domaine
- data-visualization
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 42/100