Responsive Size of Graphs

Dash Python
1

Hey,

so my application has a sidebar, which docks in and out with a transition. The problem is, that the dcc.graph components dont respond to their parent divs width. They dont responsively scale up or down. Ive been hacking around with some javascript and dispatch a window resize event, which resizes alls the graphs according to the div, but the transition doesnt work smoothly, cuz u cant dispatch a window size trigger event more than 8 times in a second. Is there any way so that the graph is responsive to its parent?

Thx

2

You can just set responsive=True in the Graph component.
https://dash.plot.ly/dash-core-components/graph

3

Hi @seferoezcan

I can sympathize with your responsive Graph troubles. Plotly is working on implementing a resize observer for graphs to behave how you’d like, especially with dynamic y-axis scaling. I’m curious if your Javascript hack/workaround is something like this: https://stackoverflow.com/questions/55462861/dash-dynamic-layout-does-not-propagate-resized-graph-dimensions-until-window-i/57225502#57225502

The relevant PR has been recently merged here: https://github.com/plotly/dash-core-components/pull/706

What @mikesmith1611 says is true, and it’s a great start, but I’ve noticed that config = { 'responsive': True} isn’t always a bulletproof solution, especially in flex layouts or containers whose dimensions have changed from a callback.

4

The config solution wasnt really working for my case either. And yes, my workaround is basically the same as the one from the link. But nice to hear it is being worked on.

5

Hi, I am having similar problem: graphs response only to window resize, not automatically. Anyone found a solution? @mikesmith1611 @wbrgss @seferoezcan