Search code examples
cssflexboxplotly-dash

Getting graphs to fill up the height of parent container

I am creating a Dash layout with flexboxes. They are quite useful. However, I am having trouble resizing charts to fill the space equal to a Dash card, because I am not aware of the default size of the graphs / cards / row elements. This has created a situation like the following:

enter image description here

Where the two charts on the right should each be half of the height, but I am not sure of the row height of its parent, as that is automatically set by Dash in other areas of the dashboard.

While I could manually set it [and therefore all of the rows in my dashboard], I am pretty sure the default is responsive. So, before I do I was curious if anyone knows of:

  • The default row height in Dash, for cards, charts, or rows?
  • A way to infer the height using css?

Essentially, how to make sure the height of two stacked graphs is the same as the height of its parent container.

Thanks in advance.

Solution

  • solved: the height of graphs must be explicitly stated. this is very important. it can be done in one of the following ways:

    1. update the style of the dcc.Graph object, ie dcc.Graph(style={"height": 600px}, figure=...}
    2. change the height property in update_layout().

    enter image description here

    You could also create a CSS class to update the style. in the above case, I set the height of the left graph to 600px and the height of the left graphs to 285px, so that twice their height + margin and padding was = the height of the left graph.