Margins not updating correctly in pie chart after manual resizing
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Aptitud para principiantes
- 35/100
- Tipo de issue
- Error
- Claridad
- Bastante claro
- Estado de actividad
- Estancado
- Stack tecnológico
- javascript, react
- Área
- data-visualization, frontend
Línea de trabajo
Empieza reproduciendo el problema en una aplicación React con plotly.js 3.0.x y react-plotly.js 2.6.0, usando un gráfico circular con los segmentos [39,61]. Traza la actualización del layout después de cambiar el ancho de 40 a 400 y compárala con el caso [10,90]. Se considera completado cuando los cambios de tamaño y las actualizaciones de los márgenes recalculan el espacio disponible para el gráfico circular sin requerir un cambio en font-size.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
When dynamically updating a pie chart, I encountered an issue where the available space for the pie chart does not update properly after changing the plot size.
For my setup, the plot is rendered using Plotly in a React app. The plot state is managed using useState() and the layout updates are triggered via useEffect() whenever a user changes the settings object (for plot width, height, font, etc). The update is performed like this:
setPlot((prevPlot) => ({
...prevPlot,
layout: {
...prevPlot.layout,
width: displaySizes.width,
height: displaySizes.height,
margin: {
...prevPlot.layout.margin,
t: settings.marginTop,
b: settings.marginBottom,
l: settings.marginLeft,
r: settings.marginRight,
},
// other layout updates
},
}));
Used versions are "plotly.js": "^3.0.0", "plotly.js-dist-min": "^3.0.1", "react-plotly.js": "^2.6.0".
Steps to reproduce the described bug:
- Render a pie chart with segments [39,61]
- Set the plot size to an incorrect size, e.g. width: 40, height: 255
- Correct the plot size to valid values, e.g. width: 400, height: 255
Plot, before resizing:
Plot, after resizing as described:
The visible margins are now way larger than what is defined in the layout and much larger than necessary, since the pie chart could take up more space (like before). Changing the margins or plot size has no effect on the margins; only randomly increasing or decreasing the text size causes the plot to reset and render correctly.
It seems like the issue is related to the segment ratio: It only occurs when the pie segments are similar (e.g. [39, 61]), but not when they differ a lot (e.g. [10, 90]).
None of the approaches I came across online (such as Plotly.Plots.resize() or using the revision prop) solved this problem.
- Lenguaje dominante
- JavaScript
- Estrellas
- 1.1k
- Forks
- 138
- Merge medio
- 3 d 2 h
- PR fusionados (30 d)
- 4
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
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.
Más de plotly/react-plotly.js
-
P3 plotly-internal size: 1 task
Dificultad 3/5 1-2 días Aptitud para principiantes 45/100
plotly/react-plotly.js#386 ·
-
enhancement P3 size: 1
Dificultad 3/5 1-2 días Aptitud para principiantes 65/100
plotly/react-plotly.js#380 · 7 comentarios ·
-
Dificultad 4/5 3-5 días Aptitud para principiantes 48/100
plotly/react-plotly.js#358 · 1 comentario ·
-
Dificultad 3/5 1-2 días Aptitud para principiantes 30/100
plotly/react-plotly.js#353 · 1 comentario ·
-
Dificultad 4/5 3-5 días Aptitud para principiantes 35/100
plotly/react-plotly.js#352 · 1 comentario ·