Streamlit-echarts

Custom Components
82

Hello everyone, I have an issue with ECharts since version 1.28 of Streamlit. I use Streamlit with a custom background, which is practically black with some lighter lines. I prefer the ECharts graphs to have a transparent background. Until Streamlit version 1.28, this was the default behavior, but now it seems that ECharts graphs have a white background (if it’s the default Streamlit theme, most people probably don’t notice). However, I’d like to change it back to transparent.

Here’s a snippet of my code:

def graphics():
    data = [
        {
            "name": "Recalculation",
            "children": [
                {
                    "name": "Starburst",
                    "children": [
                        {"name": "Order"},
                        {"name": "Commission"},
                    ]
                },
                
            ]
        }
    ]


    chart = {
        'series': [{
            'type': 'tree',
            'data': data,
            'orient': 'RL', 
            'lineStyle': {
                "color": "#222",

            },
            'label': {
                'position': 'left',
                'verticalAlign': 'middle',
                'align': 'right',
                'color': '#fff',
                'fontSize': 12,
            },
            'leaves': { # nodos hojas
                'label': {
                    'position': 'right',
                    'verticalAlign': 'middle',
                    'align': 'left'
                }
            },
        }]
    }
    st_echarts(chart, height="120px", width="100%")

example echarts
example echarts1003×436 43.8 KB

Currently, the best I’ve achieved is setting a black background using the above line of code. However, when I try to use rgba(0, 0, 0, 0) for transparency, it reverts to white. Even with rgba(0, 0, 0, 0.5) , I get a gray color. Does anyone know how to fix this issue? For now, I’ll stick with version 1.28 until it’s resolved.