Resize bug using Details / hidden Div and width=100% in Dash

[mikesmith1611]

Plotly figures that are contained in a hidden div or in a closed Details tag on load do not resize to fill the parent container even if the width of the plot is set to 100%.

See https://community.plot.ly/t/plotly-resize-bug-using-html-details-hidden-div-and-width-100/11201

@chriddyp

[alexcjohnson]

AFAIK there's no way for us to determine how big this element is going to be before it's visible. window.getComputedStyle will return zero size. If you don't have an explicit size to give us on first render, you'll need to find an event corresponding to displaying the element, and trigger a redraw in that event.

Plotly.Plots.resize(gd) is what we normally use for this, but it may not be optimal in this case since it's a little delayed & debounced (to accommodate use cases like dragging to resize a window). To avoid a FOUC you can use Plotly.relayout(gd, {autosize: true}) which is, in the end, what Plotly.Plots.resize does anyway.

[zhsee]

@alexcjohnson hi, may i know how to implement the relayout/resize into a dash app?

[chriddyp]

@zhsee - This isn't possible right now. For now, I believe that your options are:

• Fixing the width and height to pixels instead of percentages
• Not hiding your graph.

I'm not sure what the way forward with Dash is:

• Ideally, we'd call resize automatically when the parent div changes size but I don't think there is a listener on div sizes?
• We could make a higher-level component for html.Details that would call resize on its children for this particular use case. Like dcc.Collapsable(children, graph_ids=[]) or something.

[zhsee]

i set a fixed width (use 1000px and 2000px), but the size remain the same. is my setting wrong?
layout = go.Layout({'title':corner, 'barmode':'stack',
'plot_bgcolor':'#e5e4e2','margin':{'t': 50, 'b':120},
'width':'2000px'}

[zhsee]

ah...setting the width without 'px' work :)

[etpinard]

Looks like this ticket has been resolved.

Closing.

[interrogator]

@etpinard I don't think the actual issue here was resolved, was it? Hidden div still causes figures to be incorrectly sized.

[mofojed]

I am able to use the relayout trick above to resize properly when the plot appears again: #2769 (comment)

For me the issue was resize debouncing was unexpected.

[nassimelghazaz96]

@mofojed could you please tell me how did you write it on dash app script ?

[mofojed]

My bad - I was just using plotly.js, I was not using Dash. It was a similar issue with resizing when the element had a hidden div.

[advaithasabnis]

Facing the same issue. Cannot set width in px as charts need to be responsive.