Resizing automargin BarChart results in "Cannot read property 'val' of undefined"

[ghost]

Codesandbox: https://codesandbox.io/s/r3k874mr4 , in own window to resize better: https://r3k874mr4.codesandbox.io/

plotly.js-basic-dist: 1.45.0

If I shrink-resize a responsive, automargin Plotly Horizontal Bar Chart to a greater extent quickly (e.g. drag browser window to minimum size or press minimize button, if it was previously shrinked like this), I receive following error:

Chrome:

Firefox:

The graph is made responsive by the following config:

const layout = {
  yaxis: {
    automargin: true
  },
  xaxis: {
    automargin: true
  }
};

const config = {
  responsive: true
};

Currently I am using Plotly Charts in a CSS grid layout, wrapped by React (plain plotly.js-basic-dist, no react-plotly.js).

After some research, I encountered this forum thread from Jun '17, in which the solution is basically to ignore the error, because it does not have functional impact.

However, using an React Error Boundary Handler, that error completely shut down my whole application every time it occured. It did cost me 2-3 hours of debugging time to roughly determine where the error did come from, as the message is not very intuitive.

I would really appreciate to have a fix, that does not include workarounds like manually implement a resize handler or similar, because I like the simplicity of responsive:true

[antoinerg]

Thank you @Ford04 for clearly reporting this issue!

There is indeed a problem with the automargin routine upon resize. The issue isn't with responsive: true itself: resizing the figure with Plotly.relayout will also return an error. This can be seen in this Codepen (without React) https://codepen.io/antoinerg/full/bZwGwK

[etpinard]

Thanks very much for the report @Ford04

Thanks very much for the minimal codepen @antoinerg , I'll try to tackle this at the same time as #3579