Distorted Values in Plotly Guages of Streamlit Apps

đź“Š Plotly Python
1

I am displaying 3 gauges in a streamlit container with following code. The values get shifted upon clicking on sidebar of the app twice… See the attached image.

def plot_gauges(data):
# Stats
shapiro_w_stat, shapiro_p = shapiro(data)
anderson_stat = anderson_darling(data)
kstest_result = kstest(data, stats.norm.cdf)

fig = go.Figure()

fig.add_trace(go.Indicator(
mode = "gauge+number",
number={"font":{"size":20}},
value = round(shapiro_p,3),
title = {'text': "Shapiro-Wilk", 'font': {'size': 16}},
domain = {'row': 0, 'column': 0},
gauge = {
    'axis': {'visible': False},
    'threshold' : {'line': {'color': "red", 'width': 4}, 'thickness': 0.75, 'value': 0.05}
    }
))

fig.add_trace(go.Indicator(
mode = "gauge+number",
number={"font":{"size":20}},
value = anderson_stat[0],
title = {'text': "Anderson-Darling", 'font': {'size': 16}},
domain = {'row': 1, 'column': 0},
gauge = {
    'axis': {'visible': False}
    }
))

fig.add_annotation(
x=0.5, y=0.4, # position
text=anderson_stat[1],
showarrow=False
)

fig.add_trace(go.Indicator(
mode = "gauge+number",
number={"font":{"size":20}},
value = kstest_result.pvalue,
title = {'text': "Kolmogorov-Smirnov", 'font': {'size': 16}},
domain = {'row': 2, 'column': 0},
gauge = {
    'axis': {'visible': False},
    'threshold' : {'line': {'color': "red", 'width': 4}, 'thickness': 0.75, 'value': 0.05}
    }
))

fig.update_layout(
grid = {'rows': 3, 'columns': 1, 'pattern': "independent", "ygap" : 0.5} 
)

plotly_indicators
plotly_indicators295Ă—616 19 KB

2

Getting rid of number in “gauge+number” and manually annotating it was the workaround.

fig.add_annotation(
x=0.5, y=0.9, # position
text=round(shapiro_p,3),
showarrow=False, 
font=dict(
        size=20,
        )
)