I am building a Streamlit dashboard with two columns:

• Left: a Plotly pie chart
• Right: a calendar heatmap using calplot

My issue is that I cannot make both visualizations have the same height. Even when I set figsize in calplot, the Matplotlib figure does not visually match the Plotly chart height in Streamlit.

Sample data set:

data = [ ("2025-01-01", "restaurant"), 
("2025-01-01", "fast-food"), 
("2025-01-02", "restaurant"), 
("2025-01-02", "boulangerie"), 
("2025-01-03", "restaurant"), 
("2025-01-03", "restaurant"), 
("2025-01-04", "fast-food"), 
("2025-01-04", "fast-food"), 
("2025-01-05", "boulangerie"), 
("2025-01-05", "restaurant"), 
("2025-01-06", "restaurant"), 
("2025-01-06", "fast-food"), 
("2025-01-07", "restaurant"), 
("2025-01-07", "boulangerie"), 
("2025-01-08", "fast-food"), 
("2025-01-08", "fast-food"), 
("2025-01-09", "restaurant"), 
("2025-01-09", "restaurant"), 
("2025-01-10", "boulangerie"), 
("2025-01-10", "fast-food"), ] 

Code:

import streamlit as st
import pandas as pd
import plotly.express as px
import calplot
import matplotlib.pyplot as plt
from matplotlib.colors import ListedColormap

# -------------------------
# Sample dataset
# -------------------------

df = pd.DataFrame(data, columns=["jour", "type_repas"])
df["jour"] = pd.to_datetime(df["jour"])

st.subheader("Meal types")

col_left, col_right = st.columns([1, 2])

# -------------------------
# Left: Plotly pie chart
# -------------------------
with col_left:

    type_counts = df["type_repas"].value_counts()

    with st.container(border=True):

            fig_pie = px.pie(
                values=type_counts.values,
                names=type_counts.index,
                hole=0.5
            )

            fig_pie.update_traces(
                textinfo="percent",
                textfont_size=18,
                hovertemplate="%{label}
%{value} repas
%{percent}"
            )

            fig_pie.update_layout(
                height=420,

                # fond transparent
                paper_bgcolor="rgba(0,0,0,0)",
                plot_bgcolor="rgba(0,0,0,0)",

                # réduire les marges
                margin=dict(t=20, b=60, l=10, r=10),

                # légende horizontale
                legend=dict(
                    orientation="h",
                    yanchor="top",
                    y=-0.15,
                    xanchor="center",
                    x=0.5
                )
)

            st.plotly_chart(fig_pie, use_container_width=True)

# -------------------------
# Right: Calplot heatmap
# -------------------------
with col_right:

    with st.container(border=True):

            st.subheader("Calendrier des types de repas")

            # -------------------------------------------------
            # Préparation des données
            # -------------------------------------------------

            df_jours = df.copy()

            df_jours["jour"] = pd.to_datetime(df_jours["jour"])

            # -------------------------------------------------
            # Sélection du type de repas
            # -------------------------------------------------

            type_selectionne = st.radio(
                "Choisir un type de repas",
                ["restaurant", "fast-food", "boulangerie"],
                horizontal=True
            )

            # -------------------------------------------------
            # Comptage par jour
            # -------------------------------------------------

            counts = (
                df_jours.groupby(df_jours["jour"].dt.date)["type_repas"]
                .apply(lambda x: (x == type_selectionne).sum())
            )

            counts.index = pd.to_datetime(counts.index)

            # -------------------------------------------------
            # Heatmap calendrier
            # -------------------------------------------------

            import calplot
            import matplotlib.pyplot as plt
            from matplotlib.colors import ListedColormap

            st.subheader(f"{type_selectionne} par jour")

            cmap = ListedColormap([
                "#00000000",  # transparent
                "#ffb74d",
                "#d32f2f"
            ])

            fig, ax = calplot.calplot(
                counts,
                cmap=cmap,
                colorbar=False,
                figsize=(14, 14),
                linewidth=3,
                vmin=0,
                vmax=2
            )

            # -------------------------------------------------
            # Fond transparent
            # -------------------------------------------------

            fig.patch.set_alpha(0)

            for a in fig.axes:
                a.set_facecolor("none")

            plt.tight_layout(pad=0.5)
            
            st.pyplot(fig, transparent=True)


st.divider()

Even though I set:

• fig_pie height to 420
• calplot(figsize=(14, 14))

the two visualizations do not have the same visible height in Streamlit.

I tried:

• changing figsize
• using tight_layout
• using fig.set_size_inches
• removing Streamlit container constraints
• disabling use_container_width

but the calendar map height remains inconsistent compared to Plotly.

How to properly synchronize the height between a Plotly chart and a calplot figure in Streamlit?