getting warning about too many auto-margin redraws

[rhamner]

Using plotlyjs 1.51.1, I'm seeing autorange do weird things:

Here's some reproducing code:

https://codepen.io/rhamner/pen/abOvOxW?editors=1010

It only fails for me when using log y-axis, but I haven't tested all permutations or anything. It worked previously but I didn't track which version (I know it was working last week).

It gives me this warning:

Windows 10 64-bit Chrome Version 80.0.3987.87 (Official Build) (64-bit)

[etpinard]

Thanks very much for the report !

It's kind of nice to see that auto-margin cap added in https://github.com/plotly/plotly.js/pull/4216/commits/631014a1688c4a495125c9774d8e8b438d995555 (from PR https://github.com/plotly/plotly.js/pull/4216) saved you from running into an infinite loop. Your codepen is probably the most minimal example of an infinite auto-margin loop that I've seen. Thanks very much for sharing.

The situation here is essentially described in https://github.com/plotly/plotly.js/issues/2704#issuecomment-524474154

Unfortunately, I doubt we'll be able to fix this issue without first implementing https://github.com/plotly/plotly.js/issues/2704

[rhamner]

Thanks @etpinard . Just do explicit margins in these situations as a workaround for now?

[etpinard]

Just do explicit margins in these situations as a workaround for now?

Yes, that will work.

[pipech]

Hi, I've got this error too but I'm not sure if this is the same problem since I didn't specify graph width.

Could you please take a look https://github.com/plotly/dash/issues/1112 ?

I suspect that dcc.loading use 1 redraw then go.Layout.Margin use another and some graph type use more than 1 redraw and that cause the error.

[JorgeMiguelGomes]

Hi all, I also have this problem

127.0.0.1/:6 The key "" is not recognized and ignored.
[email protected]_9_1m1617900226.14.0.js:2337 [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.
(anonymous) @ [email protected]_9_1m1617900226.14.0.js:2337
[email protected]_9_1m1617900226.14.0.js:25129 Download the React DevTools for a better development experience: https://fb.me/react-devtools
async-plotlyjs.v1_16_0m1617903285.js:2 WARN: Too many auto-margin redraws.
o @ async-plotlyjs.v1_16_0m1617903285.js:2
async-plotlyjs.v1_16_0m1617903285.js:2 WARN: Too many auto-margin redraws.
o @ async-plotlyjs.v1_16_0m1617903285.js:2
async-plotlyjs.v1_16_0m1617903285.js:2 WARN: Too many auto-margin redraws.
o @ async-plotlyjs.v1_16_0m1617903285.js:2
async-plotlyjs.v1_16_0m1617903285.js:2 WARN: Too many auto-margin redraws.
o @ async-plotlyjs.v1_16_0m1617903285.js:2
async-plotlyjs.v1_16_0m1617903285.js:2 WARN: Too many auto-margin redraws.
o @ async-plotlyjs.v1_16_0m1617903285.js:2
a.warn @ async-plotlyjs.v1_16_0m1617903285.js:2
x.doAutoMargin @ async-plotlyjs.v1_16_0m1617903285.js:2
c.syncOrAsync @ async-plotlyjs.v1_16_0m1617903285.js:2
r.plot @ async-plotlyjs.v1_16_0m1617903285.js:2
r.call @ async-plotlyjs.v1_16_0m1617903285.js:2
x.doAutoMargin @ async-plotlyjs.v1_16_0m1617903285.js:2
c.syncOrAsync @ async-plotlyjs.v1_16_0m1617903285.js:2
r.plot @ async-plotlyjs.v1_16_0m1617903285.js:2
r.call @ async-plotlyjs.v1_16_0m1617903285.js:2
x.doAutoMargin @ async-plotlyjs.v1_16_0m1617903285.js:2
c.syncOrAsync @ async-plotlyjs.v1_16_0m1617903285.js:2
r.plot @ async-plotlyjs.v1_16_0m1617903285.js:2
r.call @ async-plotlyjs.v1_16_0m1617903285.js:2
x.doAutoMargin @ async-plotlyjs.v1_16_0m1617903285.js:2
c.syncOrAsync @ async-plotlyjs.v1_16_0m1617903285.js:2
r.plot @ async-plotlyjs.v1_16_0m1617903285.js:2
r.call @ async-plotlyjs.v1_16_0m1617903285.js:2
x.doAutoMargin @ async-plotlyjs.v1_16_0m1617903285.js:2
c.syncOrAsync @ async-plotlyjs.v1_16_0m1617903285.js:2
r.plot @ async-plotlyjs.v1_16_0m1617903285.js:2
r.call @ async-plotlyjs.v1_16_0m1617903285.js:2
x.doAutoMargin @ async-plotlyjs.v1_16_0m1617903285.js:2
c.syncOrAsync @ async-plotlyjs.v1_16_0m1617903285.js:2
r.plot @ async-plotlyjs.v1_16_0m1617903285.js:2
r.call @ async-plotlyjs.v1_16_0m1617903285.js:2
r.layoutReplot @ async-plotlyjs.v1_16_0m1617903285.js:2
c.syncOrAsync @ async-plotlyjs.v1_16_0m1617903285.js:2
q @ async-plotlyjs.v1_16_0m1617903285.js:2
r.call @ async-plotlyjs.v1_16_0m1617903285.js:2
(anonymous) @ async-plotlyjs.v1_16_0m1617903285.js:2

When running this code

[byTimo]

Hey! I found some clues about this error in my project. I get this "infinity loop" due to each time y-axis labels position is calculated incorrectly. The reason is this default 12px padding for each pushable entity. The problem is this 12px padding isn't taken into account during calculation of ax._anchorAxis._offset that is used to get an axis position. So each time after the chart is rerendered the prev margin values is calculated the real prev margin values + 12px

[attatrol]

plotly_afterplot event doesn't fire if warning "Too many auto-margin redraws." happens.

[anri-asaturov]

A workaround for this is to set automargin:'left' or automargin: 'bottom' as appropriate.