plotly / plotly/react-plotly.js

Margins not updating correctly in pie chart after manual resizing

Open
#354 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.1k
Forks
138
Avg merge
3d 2h
Merged PRs (30d)
4

Description

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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue in a React app with plotly.js 3.0.x and react-plotly.js 2.6.0, using a pie chart with segments [39,61]. Trace the layout update after changing the width from 40 to 400 and compare it with the [10,90] case. Done means resizing and margin updates recalculate the available pie-chart space without requiring a font-size change.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.