Plotly charts in columns have excessive upper and lower padding

[jhejka]

Including an image of the code and the application. With no elements in between the text and the chart, there is an extremely large amount of padding both above and below the chart. Is there an easy way to fix this?

[edsaac]

@jhejka

Including an image of the code

---

Hard to know without knowing what plot_chart does. Perhaps you need to adjust the layout margins?

[jhejka]

Not my best moment @edsaac, sorry for the worst code sample of all time

plot_chart is just this:

st.plotly_chart(fig, use_container_width=True, config={"displayModeBar": False})

With each fig being generated using code similar to this:

fig = px.imshow(
    Z,
    x=x,
    y=y,
    origin="lower",
    color_continuous_scale="RdBu_r",
)

fig.update_xaxes(
    range=[-3, 3],
    constrain="domain",
    tickvals=[-3, -2, -1, 0, 1, 2, 3],
)

fig.update_yaxes(
    range=[-3, 3],
    scaleanchor="x",
    scaleratio=1,
    tickvals=[-3, -2, -1, 0, 1, 2, 3],
)

fig.update(layout_coloraxis_showscale=False)

I think the issue is that the plot has a constant height. Is there any way to decrease the height of the plot as the width gets smaller?

[edsaac]

@jhejka

I think the issue is that the plot has a constant height.

You are correct. Plotly plots have a default height and px.imshow enforces a 1:1 aspect ratio. You can modify the plotly layout height and margins:

fig.update_layout(margin=dict(t=0, b=0), height=200)

As opposed to the default: