Responsive flag for Plotly.js results in error when resizing window

Question

We are using Plotly.js in our Vue/Nuxt single page application. To ensure the created plots are automatically resized whenever their parent DOM node changes (for example when a user changes the window size), we enabled the responsive: true option for the Plotly chart.

Enabling this flag automatically resizes the plots whenever the user has changed the screen size (as expected). However, the following error is logged multiple times while the window is being resized:

Error: Resize must be passed a displayed plot div element.

Reproducing this for a single plot or simple example didn't seem to work. From what we have discovered so far this only seems to happen when multiple plots are visible.

Answer 1

By debugging the code in the stack trace we discovered that this was caused by not properly destroying previously rendered plots.

Apparently this error can be thrown when a plot is not visible and it has the responsive: true flag set.

What happened in our case was that some components of our application weren't calling Plotly.purge($myPlot) whenever the component was destroyed (which happens if the user navigates to another page for example). The undestroyed plots would be kept in memory but remain invisible, hence triggering the above error whenever the browser window was resized. We were able to identify this by comparing the DOM node IDs for plots that throw this error vs the ones that were visible.