Graph resizes (arbitrarily) when changing between Tabs in a Dash App

Dash Python
1

I have build a simple app with two Tabs (using the 2nd method from here dcc.Tabs | Dash for Python Documentation | Plotly). The first Tab has a heatmap and a graph, the second tab has some buttons.

When I launch the App, the content of Tab 1 renders fine and as long as I stay in Tab 1, no problem.
When I change to Tab 2, all good there.

But when I change back to Tab 1, the graph is now differently scaled and the only way to get the correct layout back is to reload the page with the Browser’s reload button

before
before3638×1518 202 KB
after
after3654×1668 220 KB
. I have attached two screenshots.

I am working on a Mac and it happens on FireFox and Safari. I have the latest version Dash installed (1.12.0).

Does this ring any bells with any one?

Thanks a lot for any help and insights.

2 Likes
2

OK, I solved this. It turns out that “autosize = False” in the go.Layout was causing this. Without autosize, all works fine!

1 Like
3

I had the same issue. Resolved it by setting the height in style={}.

dcc.Graph(
id=‘sales-bar’,
style={‘height’:300}
),

2 Likes
4

This automatic resizing to height:450 after swapping tabs is definitely still an issue, and very annoying. It is a bug in dcc, see: Github issue

I have found that the workarounds mentioned don’t always work for every plot. I have one additional workaround to share.

Add a dcc.Tabs ‘value’ Input to the callback which generates the plot, i.e.
Input('your_dcc.Tabs_id', 'value')

You don’t even have to do anything with this input. Dash will re-draw the plot every time you switch tabs, and you’ll no longer be stuck with a 450px-height Graph that screws up all your formatting. Cheers.

4 Likes