Bug: Plotly, Firefox, Reactjs, Nextjs: plots get smaller each time they are shown

plotly.js
1

I have a Plotly problem where the plot gets about 10% smaller each time it is redrawn which can happen anytime a user chooses to click the plot generation button or if they update the input data and generate a new plot.

The project is in Next.js v13.5.6, React v18.2.0, react-plotly.js v2.6.0 and this is happening in Firefox v120.0.1 on Linux, Windows, Mac, and on older versions of Google Chrome (v87.0.4280). However Chrome v120.0.6099 does not have this issue. Right now, the plot is generated via Plotly.py, converted to JSON, and sent to the frontend which displays it inside a react-plotly.js Plot component which is itself in a MUI v5 tab component.

This composite image shows the sizing getting smaller each time the plot generator is clicked:

image
image566×618 61.7 KB

Here is the stack overflow with some sample code and the error message: reactjs - FireFox Plotly plot gets smaller every time it is redrawn. console.trace() WARN: Too many auto-margin redraws - Stack Overflow

Error message:

console.trace() WARN: Too many auto-margin redraws. 5 plotly.js:27692
    warn plotly.js:27692
    doAutoMargin plotly.js:57862
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    syncOrAsync plotly.js:26542
    react plotly.js:34002
    p factory.js:89
2

I’ve found the solution via the frontend. The backend sends the plotly object which includes 2 properties called data and layout. Nested deep inside layout is a property called xaxis and yaxis which contain a property called automargin. The default for automargin is ‘true’ and it is causing the recursive auto-margining.

In the photo below I’ve highlighted the automargin field that I changed from the default ‘true’ value to ‘false’.

enter image description here

The backend solution is simply to set automargin to false and not use the default value.

1 Like