How to make streamlit-echarts responsive?

Summary

Hi, everyone
As a beginner in streamlit-echarts components, I have a question: Can we create a responsive graph with st_echarts?
I know we can use fractional values(100% etc.) for the heigth & width arguments but it did not help in the smaller screens. What can I do to make echart graphics responsive?
Thanks in advance.

Below code is an example for a pie chart that I used that I hope gives an idea, unfortunately I cannot share the data due to being work-related.
Code snippet:

    pie1, pie2 = st.columns(2)

    with pie1:
        options_yonelik = {
            "legend": {"top": "top"},
            "tooltip": {"trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)"},
            "textStyle": {
                "fontFamily": "'Poppins', sans-serif",
                "fontWeight": 400,
                "fontSize": 18,
            },
            "series": [
                {
                    "name": "Kimlere Yönelik Çalışır",
                    "type": "pie",
                    "radius": [80, 200],
                    "center": ["50%", "50%"],
                    "roseType": "area",
                    "label": {
                        "rotate": 0,
                        "width": 200,
                        "fontFamily": "'Poppins', sans-serif",
                        "fontWeight": 400,
                        "fontSize": 15,
                    },
                    "labelLayout": {"draggable": True},
                    "itemStyle": {"borderRadius": 8},
                    "color": ["#ff9898", "#af98ff", "#ffd998"],
                    "data": [
                        {"value": round(val, 2), "name": name}
                        for name, val in data.loc[:, "İlgili Giriş Noktası"]
                        .value_counts()[:3]
                        .to_dict()
                        .items()
                    ],
                }
            ],
        }
        st_echarts(options_yonelik, height="600px", width="100%")

Note: using height = “100%” clips the graph into 150*200 px iframe.
Expected behavior:

for the graph to be resized (not cut) for different sized screens

Actual behavior:
full screen:


small screen example:

Debug info

  • Streamlit version: (1.15.1)
  • Python version: (3.11.0)
1 Like