plotly / plotly/react-plotly.js
Margins not updating correctly in pie chart after manual resizing
Nessuno ha ancora preso questa issue.
- Lingua principale
- JavaScript
- Stelle
- 1.1k
- Fork
- 138
- Merge medio
- 3g 2h
- PR unite (30g)
- 4
Descrizione
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.
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia riproducendo il problema in un'app React con plotly.js 3.0.x e react-plotly.js 2.6.0, usando un grafico a torta con i segmenti [39,61]. Traccia l'aggiornamento del layout dopo aver modificato la larghezza da 40 a 400 e confrontalo con il caso [10,90]. Il lavoro è completato quando il ridimensionamento e gli aggiornamenti dei margini ricalcolano lo spazio disponibile per il grafico a torta senza richiedere una modifica di font-size.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react
- Ambito
- data-visualization, frontend
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100