Constrain plot ratio with responsive or variable width/height

plotly.js
1

Hi all,

We’re using Plotly.js to create all kind of good looking graphics that can gracefully accommodate to any resolution using the responsive: true option in the layout.

However we want certain plots to be displayed only with a square ratio (the chart area only, not the legends), fitting itself to the maximum available width/height available, but preserving the square shape.

Very much like the ternary plots work, where if the ternary plot is rendered in a 1280x400px canvas, the triangle will be 400px height as máximum.

Is there any way to achieve this without resorting to use a fixed width/height (which should discount the legend too).

Bonus points: This should work when displayed as subplots as well, or even more importantly, because for single plots I can do some “tricks” with the container sizing using CSS/flexbox.

Thanks in advance.

2

Yeah, that’s an unfortunately limitation of the {responsive: true} config option at the moment that we’re planning on fixing.

You can subscribe to https://github.com/plotly/plotly.js/issues/3467 for the up-to-date development infor.

Thanks for posting.

3

Thanks for the CSS trick, I wasn’t aware of it.

I look forward for the issue to get solved, although one thing is to have the whole plot canvas as a square, and another is to get the actual plotted area (without ticks) in a square ratio.

In an ideal world, I’d like to be able to have a fixed square ration for the contour plot/, and everything else flowing freely.