Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove empty space from Streamlit Echarts

I am rendering a gauge component in the following way, within my Streamlit app:

option = {
    "series": [
        {
            "type": "gauge",
            "startAngle": 180,
            "endAngle": 0,
            "min": min_range_val,
            "max": max_range_val,
            "center": ["40%", "40%"],
            "splitNumber": 5,
            "axisLine": {
                "lineStyle": {
                    "width": 6,
                    "color": [
                        [0.25, "#FF403F"],
                        [0.5, "#ffa500"],
                        [0.75, "#FDDD60"],
                        [1, "#64C88A"],
                    ],
                }
            },
            "pointer": {
                "icon": "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
                "length": "12%",
                "width": 30,
                "offsetCenter": [0, "-60%"],
                "itemStyle": {"color": "auto"},
            },
            "axisTick": {"length": 10, "lineStyle": {"color": "auto", "width": 2}},
            "splitLine": {"length": 15, "lineStyle": {"color": "auto", "width": 5}},
            "axisLabel": {
                "color": "#464646",
                "fontSize": 12,
                "distance": -60,
            },
            "title": {"offsetCenter": [0, "-20%"], "fontSize": 20},
            "detail": {
                "fontSize": 30,
                "offsetCenter": [0, "0%"],
                "valueAnimation": True,
                "color": "auto",
                "formatter": "{value}%",
            },
            "data": [{"value": value, "name": caption}],
        }
    ]
}

st_echarts(option, width="450px", height="350px", key="gauge")

However, it seems like an additional empty extra white space is added at the bottom of the component (as from the following image).

How can I effectively remove that and keep only a tiny margin all around the gauge?

enter image description here

like image 325
Alessandro Ceccarelli Avatar asked Mar 05 '26 17:03

Alessandro Ceccarelli


1 Answers

The following parameters must be added:

radius: '120%',
center: ['50%', '80%']

The latter one should be adjusted according to specific use cases.

like image 141
Alessandro Ceccarelli Avatar answered Mar 07 '26 09:03

Alessandro Ceccarelli