Plotly Phantom Gauge Plots

App is running locally.

Python version 3.11.4
Streamlit version 1.35.0

import streamlit as st
import plotly.graph_objects as go

st.set_page_config(page_title='example', layout='wide')
colcheck1, colcheck2, colcheck3 = st.columns([1,1,4])

with colcheck1:
    mt = st.checkbox('MT')

with colcheck2:
    mtr = st.checkbox('MTR')


def mtr_page():
    col1, col2 = st.columns([3,10])


    with col1:
        fig = gauge_3()
        st.plotly_chart(fig)
        fig = gauge_3()
        st.plotly_chart(fig)

def gauge_creation(fig, value,title,domain):
    if value >= 90:
        color = 'green'
    elif value >=60:
        color = 'yellow'
    else:
        color = 'red'

    fig.add_trace(go.Indicator(
        mode='gauge+number',
        value = value,
        title=title,
        domain=domain,
        number={'suffix':'%'},
        gauge={
            'axis':{'range':[0,100],'tickwidth':1, 'showticklabels':False},
            'bar': {'color':color},
            'borderwidth':1
        }
    ))
    return fig

def gauge_3():
    fig = go.Figure()
    gauge_creation(fig,92,'30day',{'row':0, 'column':1})
    gauge_creation(fig,92,'90day',{'row':0, 'column':2})
    gauge_creation(fig,92,'1year',{'row':0, 'column':3})

    fig.add_annotation(dict(font=dict(color='white',size=15),
                            x=0,
                            y=.12,
                            showarrow=False,
                            text='Name',
                            xref='paper',
                            yref='paper'))
    fig.update_layout(
        grid = {'rows':1, 'columns':4, 'pattern':'independent'},
        width = 500,
        height = 100,
        margin = {'t':50, 'b':10, 'r':26, 'l': 18}
    )
    return fig

def test_blank():
    col1, col2 = st.columns([1,2])
    with col1:
        st.write('hi')

if mtr == False and mt == False:
    test_blank()

if mtr:
    mtr_page()

When clicking on the MTR checkbox it should display two rows of 3 gauge charts.
Like below. (This works)
Screenshot 2024-09-04 105707

After deselecting the MTR checkbox and returning to the starting page which should just have the checkoxes and ‘hi’ written. One of the gauge charts gets displayed and it looks like it is transparent.

If you repeat this process over and over it keeps adding one row of transparent gauge charts when none should be appearing. Below is an example of the transparent charts.

image

Any ideas on what is causing this would be appreciated. Thanks.

Hey @Jason5, I have seen that you are using Streamlit version 1.35. Could you try out version 1.38 and see whether that already fixes the issue? In general we always recommend to use the latest library version if possible; especially in 1.38 we had included a couple of bug fixes with regards to stale widgets.

I updated Streamlit to 1.38.0 issue is still occurring.

Hey @Jason5, I don’t seem to be able to reproduce this in version 1.38:

plotly-gauge (2)

@raethlein

Thank you it seems to be working now. Not sure why it wasn’t working the other day when I updated streamlit.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.