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
layout.autosize: "initial"
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.
I had hoped that taking a hint from https://plot.ly/javascript/responsive-fluid-layout/330 (but using 100% rather than 100vh) would help. It didn't.
How do I make Plotly respect (and fill) the dimensions of it's container? Fixed dimensions isn't an option.
Thank You!!!
I didn't find the right solution from the Internet.
References
https://community.plot.ly/t/plot-sizing-problems/1620
