st_echarts are not visualized in multitabs

[Nemecsek]

Note: published on Stackoverflow

I want a 4-tab page in Streamlit: 2 echarts + 2 plotly.

Why is any echart plot (but the first) not visualized, while plotly's ones are ok?

(The real app needs a Sankey with special features that only Echarts can provide, so using another library (after extensive research) is not feasible: as in this stripped down example, only the first Sankey is visualised, not the next ones, as echarts "forgets" to refresh the visualisation after switching the tab)

import streamlit as st
from streamlit_echarts import st_echarts
import plotly.figure_factory as ff
import numpy as np

tab1, tab2, tab3, tab4 = st.tabs(["echarts_tab1", "echarts_tab2", "plotly_tab3", "plotly_tab4"])

def echarts_random_options():
    return {
        "xAxis": {"type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]},
        "yAxis": {"type": "value"},
        "series": [
            {"data": list(np.random.random(size=7) * 800),
             "type": "line"}
        ],
    }

def plotly_random_fig():
    return ff.create_distplot([np.random.randn(200)], ["values"], bin_size=[.1, .25, .5])

with tab1:
    st_echarts(options=echarts_random_options())
    
with tab2:
    st_echarts(options=echarts_random_options())
    
with tab3:
    st.plotly_chart(plotly_random_fig(), use_container_width=True)

with tab4:
    st.plotly_chart(plotly_random_fig(), use_container_width=True)

[erikriverson]

+1 on this issue, we are seeing this too. @Nemecsek did you ever find a workaround? Thank you!

[Nemecsek]

No, I didn't. I rewrote the app as a single page, as a temporary solution.

[jesusprieto-tomtom]

Hi,

you should be able to solve this issue by simply adding:

st.markdown(" <style>iframe{ height: 300px !important } ", unsafe_allow_html=True)

at the beginning of your main script.

Just keep in mind that this will be affecting to all the iframes in your streamlit app. But in the case your are describing shouldn't be a problem

[chamath5334]

@jesusprieto-tomtom
Can you help me understand --
st.markdown(" <style>iframe{ height: 300px !important } ", unsafe_allow_html=True)

...and how it fixes the issue. I have the same problem and it resolved the disappearing eCharts gauge. However, I have a lottie animation right above my eChart that has a height of only 120px and that ends up making that space out too much. Trying to understand this so I might be able to make both work. Thanks in advance.

[andfanilo]

@jesusprieto-tomtom Can you help me understand -- st.markdown(" <style>iframe{ height: 300px !important } ", unsafe_allow_html=True)

...and how it fixes the issue. I have the same problem and it resolved the disappearing eCharts gauge. However, I have a lottie animation right above my eChart that has a height of only 120px and that ends up making that space out too much. Trying to understand this so I might be able to make both work. Thanks in advance.

It forces a height of 300px to all iframe components in the page, because clicking the tab does not apparently refresh the height of the component 😢 (you can check out https://www.youtube.com/watch?v=SLyS0v8br20 and the ending of https://www.youtube.com/watch?v=OVgPJEMDkak for more details on the CSS selection)

@chamath5334 In the meantime use:

st.markdown(""" <style>iframe[title="streamlit_echarts.st_echarts"]{ height: 300px !important } """, unsafe_allow_html=True)

to only target iframes that contain st_echarts, and not lottie animations. And if you need finer heights per echarts, for now you'll need to do custom css selection (from the videos above). I think I know how to fix this but I'm low on time right now, I'm thinking

streamlit-echarts/streamlit_echarts/frontend/src/EchartsChart.tsx

Line 123 in a9410f3

onChartReady={() => {

is the culprit

Thanks @jesusprieto-tomtom for the initial idea
Have a nice day all
Fanilo

[chamath5334]

@andfanilo Thank you! I take it this is a Streamlit issue since -- 'clicking the tab does not apparently refresh the height of the component'. I opened it up as such and it was closed showing that I should open it as an eCharts and Lottie issue.

@andfanilo is there a way to target echarts more specifically, to a tab? or even create an ID for specific ones and then target those instead of depending on generated tags?

[nicedouble]

I use sac.tabs in my custom components streamlit-antd-components instand of st.tabs.