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:

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.