✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Equal width and height produce incorrect actual layout aspect ratio on the screen

I am updating a figure layout as follows:

fig.update_layout(
    sliders=sliders,
    xaxis=go.layout.XAxis(range=[-10, 20]),
    yaxis=go.layout.YAxis(range=[-15, 15]),
    width=800,
    height=800,
    hovermode="closest"
)

Note the width and height are both 800. However, the plotted figure does not have equal width and height in centimetres. on my screen, the width is a little over 13 cm, and the height is a little over 12 cm. The shapes below should be discretization of two spheres, rather than ellipses. Does anyone know if I made a mistake, and how I can fix that?

Many thanks,
Nicholas

In a figure you have got several dimensions:

  • The dimensions of the figure itself (the whole layout with margins, axis, etc) which you set with width and height
  • The dimensions of the plot area which are defined with width, height, and margin.

If the objective is to have the proper aspect ratio on the figure, the solution is the following:

fig.update_layout(
    # ...
    yaxis_scaleanchor="x",
)

If the objective is to have a plot area that has equal height and width you need to set the margin properly so that it is equal on all sides (note that using plotly.express, xaxis and yaxis have automargin which will limit how small they can get for bottom and left margins)

fig.update_layout(
    # ...
    margin=dict(b=50, t=50, l=50, r=50)
)

Thank you! What’s important are the two shapes being proportional in terms of their heights and widths. The yaxis_scaleanchor parameter solves it.