Summary of sizing graphs with Dash:
In summary:
- Setting the size of the container is done with
dcc.Graph(style={...})
. These are CSS styles, so any units work:%
,px
,vh
,vw
. The Graph should expand into the container. - The
figure
of the graph can also have dimensions and these are specified through thelayout
,figure={'layout': {'width': '100px'}}
. Onlypx
are supported here. I don’t think that there are any advantages to setting the dimensions in the figure rather than the container (as instyle=
as above). - When the window resize, the graph is automatically re-plotted inside the container - expanding to the container’s dimensions. Behind-the-scenes, this is happening with the
Plotly.resize
plotly.js call (here’s the code: https://github.com/plotly/dash-core-components/blob/c898d75a1a189943bcf92bc73b95bd08432ddd7d/src/components/Graph.react.js#L127-L129) - Note that if the container itself is resizable, the graph will not be replotted/resized. There isn’t a reliable way to tell if a graph’s container has changed size in JavaScript yet, so we’re just checking if the window is resized.