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:
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.
solved: the height of graphs must be explicitly stated. this is very important. it can be done in one of the following ways:
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.