plotly / plotly/react-plotly.js

Margins not updating correctly in pie chart after manual resizing

Offen
#354 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
1.1k
Forks
138
Ø Merge
3 T. 2 Std.
Gemergte PRs (30 T.)
4

Beschreibung

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:

  1. Render a pie chart with segments [39,61]
  2. Set the plot size to an incorrect size, e.g. width: 40, height: 255
  3. Correct the plot size to valid values, e.g. width: 400, height: 255

Plot, before resizing:
Image

Plot, after resizing as described:
Image

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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, das Problem in einer React-App mit plotly.js 3.0.x und react-plotly.js 2.6.0 zu reproduzieren, indem du ein Kreisdiagramm mit den Segmenten [39,61] verwendest. Verfolge das Layout-Update nach der Änderung der Breite von 40 auf 400 und vergleiche es mit dem Fall [10,90]. Als erledigt gilt die Aufgabe, wenn Größenänderungen und Aktualisierungen des Randes den verfügbaren Platz für das Kreisdiagramm neu berechnen, ohne eine Änderung der font-size zu erfordern.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
data-visualization, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.