Hide the arrow in st.metric

🎈 Using Streamlit
1

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

1 Like
2

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

6 Likes
3

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

1 Like
4

Great, that’s just what I was looking for, and curiously for the same application as @metasemantic. It would be wonderful if for future updates it would be possible to do some more customization to this widget. Thanks @jrieke.

5

Please how can i make metric label a link to another browser.

I am currently doing this with my code; :point_down:

m1,m2,m3,m4,m5,m6,m7,m8,m9=st.columns([2,2.5,2,2.5,2,2.5,2.5,2.2,2])
startup=m1.markdown("""<a style="font-size: 1rem; color:black; text-align:center;" href="https://startuplagos.net/"><b>Startups 🏢</b></a>""",
            unsafe_allow_html=True)
deals=m3.markdown("""<a style="font-size:1rem; color:black;text-align:center;" href="https://startuplagos.net/"><b>Deals 💱</b></a>""",
            unsafe_allow_html=True)
hubs=m5.markdown("""<a style="font-size:1rem; color:black;text-align:center;" href="https://startuplagos.net/"><b>Hubs 🏙️</b></a>""",
            unsafe_allow_html=True)
academic=m7.markdown("""<a style="font-size:1rem; color:black;text-align:center;" href="https://startuplagos.net/"><b>Academic Tech📚</b></a>""",
            unsafe_allow_html=True)
investors=m9.markdown("""<a style="font-size:1rem; color:black;text-align:center;" href="https://startuplagos.net/"><b>Investors 💰</b></a>""",
            unsafe_allow_html=True)
m1.metric(label="",value=1209, delta="5% MOM")
m3.metric(label="", value=140, delta="-5% MOM")
m5.metric(label="", value=500, delta="-2% MOM")
m7.metric(label="",value=45,delta="3% MOM")
m9.metric(label="",value=100,delta="4% MOM")
6

I think adding it in the next version might be a nice functionality!