Streamlit echarts

[jp12]

Hey,

I’m trying to make a line and bar chart using st_echarts and separating them with a st.tabs

However, when the second tab is selected, the chart is not displayed…

from streamlit_echarts import st_echarts
import streamlit as st

tab1, tab2 = st.tabs(['Line', 'Bar'])

with tab1:
    options = {
    "xAxis": {
        "type": "category",
        "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    "yAxis": {"type": "value"},
    "series": [
        {"data": [820, 932, 901, 934, 1290, 1330, 1320], "type": "line"}
    ],
    }
    st_echarts(options=options)

with tab2:
    options = {
        "xAxis": {
            "type": "category",
            "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        "yAxis": {"type": "value"},
        "series": [
            {"data": [820, 932, 901, 934, 1290, 1330, 1320], "type": "bar"}
        ],
    }
    st_echarts(options=options)

[Charly_Wargnier]

Hi @jp12,

Here are 2 things you can try:

1. Try refreshing the app.
2. Recreate the charts outside of the tabs.

If none of that works, we can investigate further.

Best,
Charly

[jp12]

hi @Charly_Wargnier

When refreshing, nothing works and the error remains

So …

I made a test with st.radio and thats work, but I really want to use tabs …

from streamlit_echarts import st_echarts
import streamlit as st

col1, col2 = st.columns(2)

with col1:

    st.title('Select')
    select = st.radio(label='a', options=['line', 'bar'], label_visibility='hidden')

    options1 = {
    "xAxis": {
        "type": "category",
        "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    "yAxis": {"type": "value"},
    "series": [
        {"data": [820, 932, 901, 934, 1290, 1330, 1320], "type": "bar"}
    ],
    }

    options2 = {
    "xAxis": {
        "type": "category",
        "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    "yAxis": {"type": "value"},
    "series": [
        {"data": [820, 932, 901, 934, 1290, 1330, 1320], "type": "line"}
    ],
    }

    if select == 'bar':
        st_echarts(options=options1, key='1')

    elif select == 'line':
        st_echarts(options=options2, key=2)

with col2:

    st.title('tabs')

    tab1, tab2 = st.tabs(["📈 Chart", "🗃 Data"])

    with tab1:
        st.header('Bar')
        st_echarts(options=options1, key='3')
    with tab2:
        st.header('Line')
        st_echarts(options=options2, key='4')

[Charly_Wargnier]

That’s interesting.

I’ve deployed it on my end and have a similar issue.

I would suggest opening an issue on the streamlit_echarts GitHub repository. @andfanilo might be able to provide a solution or fix the bug, if there is one.

Thanks,
Charly

[jp12]

Ok,

thanks!