Hi, so I’m working on a dashboard project in which I need to display two graphs next to each other, the issue is, the graph on the right has Yaxis names that are too long to be shown, and the chart looks rather scuffed due to that. I’m transitioning a dashboard from dash_plotly to streamlit and echarts. This is the current situation of the graphs. Any help on how I can fix this issue would be appreciated!
Hi @Tanzious01 , do you happen to have any code for this?
Is there a reason to use echarts instead of plotly?
I need to use click events, which I cant do properly with plotly on streamlit without using an external library. Issue with that is, if I use that I can’t use st.plotly_chart to display the chart, so the streamlit theme doesnt apply. Overall I also think echarts looks better due to animations.
This is the code overall for the whole page.
container2 = st.container()
with container1:# main container that has everything
selected_program=st.selectbox('Select Program', programs)
df1 = cprit_grants_funded_df.loc[cprit_grants_funded_df['Program']==selected_program]
df1 =df1.loc[:,['Organization','Program','Award Amount','YEAR']]
df1 = df1.groupby(['YEAR','Organization'])['Award Amount'].sum()
df1 = pd.DataFrame(df1)
df1 = df1.pivot_table(index='YEAR',columns='Organization',values='Award Amount').fillna(0)
df1['Total'] = df1.sum(axis=1)
df1_years = pd.DataFrame(df1.index) #Index for bar graph
nested_cont = st.container()
with st.container(): # graph 1
col1,col2 = st.columns(2) # coloumns for the graphs
with col1:
bar_options = {
"title": {
"text": "Total Funding by Year",
},
"yAxis": {"type": "category",'axisTick':{'alignWithLabel':True},"data": df1_years.values.tolist(),},
"xAxis": {"type": "value"},"tooltip": {"trigger": "item"},"emphasis": {"itemStyle": {"color": "#a90000"}},
"series": [{"data": df1['Total'].tolist(), "type": "bar"}],}
clicked_label= st_echarts(
options=bar_options,
events={"click": "function(params) {return params.name}"},
height="35rem",
width="45rem",
key="bar",
)
clicked = int(clicked_label)
with col2:
year_df = df1.loc[clicked]
year_df = pd.DataFrame(year_df)
year_df = year_df.drop('Total')
year_df.rename(columns={clicked:'Values'},inplace=True)
year_df.drop(year_df[year_df['Values'] == 0].index, inplace=True)
year_df_index = pd.DataFrame(year_df.index)
with nested_cont:
st.write(cancer_num(clicked))
Hi @Tanzious01 ,
Thanks for letting me know the why. I personally can’t run this code since I don’t have all the data and etc. Is it possible for you to post code that I can readily copy and paste so that I can reproduce this for you and then look at echarts? I would love to understand more about the charting libraries that data scientists want to use in streamlit!
Thanks,
William
Hey William,
Here is some code that can replicate the issue.
options = {
"yAxis": {
"type": "category",
"data": ["thistextiscutasdasd", "thistextiscutasdasd", "thistextiscutasdasd", "thistextiscutasdasd", "thistextiscuasdasd", "testing123456890asdasd", "thistextiscutasdasd"],
},
"xAxis": {"type": "value"},
"series": [{"data": [120, 200, 150, 80, 70, 110, 130], "type": "bar"}],
}
st_echarts(options=options, height="500px")
Hi @Tanzious01,
is it possible to set your page to wide mode so that there is more space? Set widemode by default
I looked at the streamlit_echarts library by andfanilo and I just don’t see any option to change that unless I’m missing something. I see in your old code, you are setting the height and the width so I would guess the only solution is playing with that or setting widemode in streamlit. Not sure if that helps 
