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)