Responsive figure with locked aspect ratio

[nicolaskruchten]

Right now if I have a container that's got a constrained width but an unconstrained height (like, say, a Jupyter Notebook output cell ;) then I can make my figure responsive, which will cause it to fill the available width, but then I have to explicitly set the height of the figure. It would be really great to be able to set the desired aspect ratio such that the heigh would depend on the responsive width (and vice versa)

[antoinerg]

Thank you @nicolaskruchten for reporting this issue!

The following CSS trick can help with this scenario: https://spin.atomicobject.com/2015/07/14/css-responsive-square/

Here's an example of it in action: https://codepen.io/anon/pen/GzJjKL

Because this CSS trick is subtle, maybe it should it should be managed by plotly.js.

cc @plotly/plotly_js

[eMaringolo]

The trick is a good workaround for single plots, but won't work for subplots.

It would be great to be able to display independent subplots using a constrained ratio (or at least unconstrained/square).

[etpinard]

@eMaringolo

It would be great to be able to display independent subplots using a constrained ratio

You must be looking for:

• https://plot.ly/javascript/reference/#layout-xaxis-scaleanchor
• https://plot.ly/javascript/reference/#layout-yaxis-scaleratio
• https://plot.ly/javascript/reference/#layout-yaxis-constrain

[gvwilson]

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson