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

[desenvolvimento2nova]

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.

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?

[desenvolvimento2nova]

I noticed that texts added with the “add_annotation” method work perfectly, so I worked around the situation like this.

I only use the “gauge” mode, without the “+number” and position the text with “add_annotation” in the center of the figure.

It’s not ideal, but it worked.

import streamlit as st
import plotly.graph_objects as go

fig1 = go.Figure(go.Indicator(
    mode="gauge",
    value=20,
    delta = {'reference': 100},
    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.35,
    text=f"{87.8}%",
    showarrow=False,
    font=dict(size=35),
)

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))

st.plotly_chart(fig1, use_container_width=True)