Plotly gauge appears blank depending on screen resolution st.plotly_chart()

🎈 Using Streamlit
,
1

Greetings!

Does anyone have the following problem using Plotly gauges?

Sometimes the number appears correctly the first time, other times it doesn’t. I noticed that it varies with the screen resolution.

Another way to understand is to zoom in or out on the page. If it didn’t appear at first, you can try to zoom in on the page and the number appears, then just go back to the original zoom and everything is fine. Depending on the amount of zoom applied, the number may be hidden.

a
a2248×1712 142 KB

b
b2248×1712 167 KB

c
c2342×1830 188 KB

Streamlit 1.33
Python 3.12

import streamlit as st
import plotly.graph_objects as go

fig1 = go.Figure(go.Indicator(
    mode="gauge+number",
    value=20,
    number={'suffix': "%"},
    domain={'x': [0, 1], 'y': [0, 1]},
    gauge={'axis': {'range': [None, 160], 'tickvals': [120], 'ticktext': ['120']},
           'bar': {'color': 'lightblue', 'thickness': 1},
           'threshold': {'line': {'color': '#000000', 'width': 2}, 'thickness': 1, 'value': 20}
           },
))

fig1.add_annotation(
    x=0.5,
    y=-0.4,
    text=f"{50}%",
    showarrow=False,
    font=dict(size=19),
)

fig1.add_annotation(
    x=0.5,
    y=-0.1,
    text=f"{40}%",
    showarrow=False,
    font=dict(size=14, color="#8e91a0"),
)

fig1.update_layout(height=220, title_text="Test", margin=dict(t=30))

container = st.container()
with st.container(border=True, height=215):
    st.plotly_chart(fig1, use_container_width=True)

The same inconsistent behavior happens in this link, which uses Plotly for the gauges.

Is there anything that can be done so that it always displays correctly, regardless of the page resolution?