Repository navigation
Plotly Not Responsive When Parent Size Changes #3984
Description
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.
Reacted by Trevor Karjanis, Cameron Waterman, andoks, elv1s42, Austin, Maz, Fabian Zills and gioneves
Activity
antoinerg commentedon Jun 25, 2019
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 commentedon Jun 26, 2019
It should be pretty easy for plotly.js users to call
Plotly.Plots.resize(gd)inside aresizeObservercallback.Maybe we should add an example in our docs. @antoinerg would you be interested in making a quick codepen showing that off?
antoinerg commentedon Jun 27, 2019
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/KjXbEoNote that one should probably turn responsive on for real usage to apply the appropriate CSS to grow and shrink in
flexboxandgrid(see PR #3056 for details).MDN - ResizeObserver#Browser_compatibility
TrevorKarjanis commentedon Jul 12, 2019
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 commentedon May 24, 2021
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 commentedon Jun 14, 2024
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