I am trying to arrange two charts on a page, dynamically sized to suit the available screen space. The first chart should be ~25% of the screen height. Between the charts, there is a fixed-height strip containing some buttons. The remainder of the screen should be used by the second chart. I have arranged via CSS flex layout for the container divs to behave as intended. As soon as I introduce a Plotly chart, the sizing is disrupted, seemingly no matter what hints I give to Plotly.
From my observations, these are equivalent:
layout.autosize = undefined
As are these:
layout.autosize = true
layout.autosize = false
It’s not clear what factors influences the autosizing algorithm. When autosize comes into play, it seems to always pick a height of 450px (which equates to a size greater than the parent div) and a width of 700px (which is less than the parent div). With autosize off, the width expands to fill the parent, but the height also clings to 450px.
How do I make Plotly respect (and fill) the dimensions of it’s container? Fixed dimensions isn’t an option.