Plot margins do not reset on Plotly.react() if layout.legend.xref or yref are set to "container"
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- JavaScript
- Estrellas
- 18.3k
- Forks
- 2k
- Merge medio
- 2 d 12 h
- PR fusionados (30 d)
- 28
Descripción
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 ?
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Reproduce el comportamiento del CodePen enlazado, centrándote en la actualización de Plotly.react() que cambia xref/yref de la leyenda a "container" y luego restaura el diseño sin datos. Sigue cómo la leyenda del contenedor afecta a los márgenes del gráfico y al posicionamiento de la anotación; se considera terminado cuando los márgenes se restablecen y la anotación queda centrada después de la actualización, coincidiendo con el comportamiento de la referencia en papel.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript
- Área
- data-visualization
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 42/100