Can't seem to change default Height on Graph

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 the layout, figure={'layout': {'width': '100px'}}. Only px are supported here. I don’t think that there are any advantages to setting the dimensions in the figure rather than the container (as in style= 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.
11 Likes