Hide the arrow in st.metric

I love the new widget st.metric. I’ve been using to show statistical values and I’d like to use the “delta” to show a p-value.

If I control the color using delta_color, I can make values for p>0.05 be red and p<0.05 be green. I still can’t remove the up arrow which is confusing in this case.

Any tips on removing the arrow?

import streamlit as st
st.metric('x1', value=99.2, delta='p value = 0.02', delta_color='normal')
st.metric('x2', value=47.3, delta='p value = 0.07', delta_color='inverse')

Screenshot from 2021-08-30 16-28-25

Hey Travis :wink:

Hmm that’s a use case that delta wasn’t really intended for :smiley: You can hack it with some custom CSS:

import streamlit as st

st.write(
    """
    <style>
    [data-testid="stMetricDelta"] svg {
        display: none;
    }
    </style>
    """,
    unsafe_allow_html=True,
)

st.metric('x1', value=99.2, delta='p value = 0.02', delta_color='normal')
st.metric('x2', value=47.3, delta='p value = 0.07', delta_color='inverse')

I’ll note down for v2 of st.metric that we need to find a better solution for this use case. If it’s something other people also struggling with, we can bump up the priority of it!

Cheers, Johannes

2 Likes

Thanks! This works perfectly.

I think it would be nice to expose the showing the up/down arrow and potentially the actual color (what if we want more than green or red?)