Metric arrow control

🎈 Using Streamlit
1

Is there a way or workaround for st.metric to show the arrow down with a positive value?

st.metric(“Prod”, value=500, delta=100, delta_color=“normal”)

2

Using a CSS selector, you could rotate the little svg drawing the arrow

image

import streamlit as st

st.markdown(
    '''
    <style>
    [data-testid="stMetricDelta"] svg {
        transform: rotate(180deg);
    }
    </style>
    ''',unsafe_allow_html=True)

cols = st.columns(2)
with cols[0]: st.metric("Positive metric", 100.0, 10)
with cols[1]: st.metric("Negative metric", 200.0, -10)
2 Likes
3

spinningmetric

😵‍💫 Code: 
import streamlit as st

st.markdown(
    '''
    <style>
    [data-testid="stMetricDelta"] svg {
        animation: 2s infinite normal;
        animation-name: spinny;
        animation-timing-function: linear;
    }

    @keyframes spinny {
    from {
        transform: rotate(0deg);
        }
    to {
        transform: rotate(360deg);
        }

    }
    </style>
    ''',unsafe_allow_html=True)

cols = st.columns(2)
with cols[0]: st.metric("Positive metric", 100.0, 10)
with cols[1]: st.metric("Negative metric", 200.0, -10)
2 Likes
4

I love it :smiley:

5

Great thank you very much @edsaac

6

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