plotlyplotly.graph-objects

Plotly Graph Objects set viewable size


I am trying to draw some squares in a ploty application. I realized that ploty sometimes decides the size of the viewable area based on the objects inside it (which makes sense) but other times its just fixed regardless of whats drawn. I want to override it so I can set some shapes without them getting deformed.

I found fig.update_layout but it seems to update the actual "canvas" size but not how the dimensions of what is shown inside are calculated nor the boundaries

In my example I have two rects whos distance between its corners is the same so they should look like squares; also I'd like to set the top corner to be further away (meaning that the squares inside would look smaller

This is my simplified example:

Code

import plotly.graph_objects as go

fig = go.Figure()

fig.update_layout(
    autosize=False,
    width=500,
    height=500,
    paper_bgcolor='rgba(0,0,0,0)',
    plot_bgcolor='rgba(0,0,0,0)'
    # I'd like to set the corner to be 10,10
)

# Set axes properties
fig.update_xaxes(showgrid = False, zeroline = False, visible = False)
fig.update_yaxes(showgrid = False, zeroline = False, visible = False)

fig.add_shape(type="rect",
    x0=0, y0=0, x1=4, y1=4, # this should look like a big square going a little before the middle of the screen
    line=dict(color="Red"),
)
fig.add_shape(type="rect",
    x0=1, y0=1, x1=2, y1=2, # this should look like a small square inside the first one
    line=dict(color="Red"),
)

fig.show()

Obtained Result

enter image description here

Expected Result

enter image description here


Solution

  • Having had the opportunity to respond, I will give some case examples of the limitations of the axis. The first is to set a scale anchor.Reference

    fig.update_layout(yaxis=dict(scaleanchor='x'))
    

    enter image description here

    The above example is equivalent to the following code. fig.update_layout(yaxis=dict(scaleanchor='x', scaleratio=1.0)) The aspect ratio can be changed by changing the scale ratio.

    fig.update_layout(yaxis=dict(scaleanchor='x', scaleratio=2.0))
    

    enter image description here

    I commented that in the example of the figure in the question, I thought it would be easier to draw the figure with the additional limitation of the axes.

    fig.update_xaxes(range=[0,4], showgrid=False, zeroline=False, visible=False)
    fig.update_yaxes(range=[0,4], showgrid=False, zeroline=False, visible=False)
    

    enter image description here