Plotly.js: Plotly Not Responsive When Parent Size Changes

[YoavIlan]

Hi,

I am having issues with Plotly not resizing properly when the parent component changes in size. The plot has responsive set to true, but that only affects it in the case of a window resize, not a resizing of the parent component.

See this stackblitz for a reproduction of the issue. It highlights the issue both within a flexbox and when a scrollbar is introduced into the view.

[antoinerg]

Unfortunately, until majors browsers start supporting resizeObserver, there is no way to be notified when an element changes size.

If we can't call Plotly.Plots.resize(gd) on a resize event, the only other way to achieve the desired behavior would be to produce fully-scalable SVG as discussed in https://github.com/plotly/plotly.js/issues/2711 . Unfortunately, addressing #2711 is not a simple fix.

[etpinard]

It should be pretty easy for plotly.js users to call Plotly.Plots.resize(gd) inside a resizeObserver callback.

Maybe we should add an example in our docs. @antoinerg would you be interested in making a quick codepen showing that off?

[antoinerg]

Here's a proof of principle of using resizeObserver (tested to work in Chrome 72). To make the example clear, I turned off plotly.js' responsive config option: https://codepen.io/antoinerg/pen/KjXbEo

Note that one should probably turn responsive on for real usage to apply the appropriate CSS to grow and shrink in flexbox and grid (see PR https://github.com/plotly/plotly.js/pull/3056 for details).

MDN - ResizeObserver#Browser_compatibility

[TrevorKarjanis]

Looks like the observer compatibility is improving, although, it is still in draft. Thank you for the codepen.
https://caniuse.com/#feat=resizeobserver
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/resizeobserver/