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 #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 #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/

[pcparagc]

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 #3056 for details).

MDN - ResizeObserver#Browser_compatibility

Is there any codepen for react also? I am stuck with the issue (When i open my sidebar the graph goes outside of parent div)

[gvwilson]

Hi - we are currently trying to tidy up Plotly's public repositories to help us focus our efforts on things that will help users most. Since this issue has been sitting for several years, I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our backlog. Thanks for your help - @gvwilson