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
figureof the graph can also have dimensions and these are specified through thelayout,figure={'layout': {'width': '100px'}}. Onlypxare 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.resizeplotly.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.