Metric: replace arrow with circle

Summary

Iโ€™m trying to replace the upper and lower arrows in the Metric component by changing the CSS directly and adding a circle instead. Unfortunately, the code does not work.

Steps to reproduce

Code snippet:

replace_metric_arrow: str = """
    <style>
    [data-testid="stMetricDelta"] svg {
        display: <circle cx="50" cy="50" r="50" />;
    }
    </style>
"""

# remove the arrow in the metrics and use a circle instead
st.write(replace_metric_arrow ,unsafe_allow_html=True)

Itโ€™s hacky, butโ€ฆ

import streamlit as st

st.metric(label='My Metric', value=10000, delta=10)

css = '''
<style>
    [data-testid="stMetricDelta"] svg {
        display: none;
    }
    [data-testid="stMetricDelta"] > div::before {
        content:"โ—ฏ";
        font-weight: bold;
    }
</style>
'''

st.markdown(css, unsafe_allow_html=True)

image

And hereโ€™s a different post about centering if thatโ€™s desirable, too.

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