Plotly chart doesn't render correctly when viewed from mobile phone browser

🎈 Using Streamlit
1

Summary

Hello Streamlit Community! My app containsloads of plotly charts. I have deployed this app and the plotly charts render perfectly when accessed via a desktop. When accessed via a mobile phone browser such as Safari or Chrome, the charts get squeezed when viewed in portrait mode. Although they seem to render better in landscape mode, they are still not as good as they render on desktops.

Desktop version - plotly map renders just fine:

desktop sites map
desktop sites map1603×1015 73.6 KB

Mobile version (potrait) - plotly map is compressed:

st mobile potrait
st mobile potrait828×1526 94 KB

Mobile version (landscape) - slight improvement on potrait version:

st mobile landscape
st mobile landscape1792×662 88.6 KB

I am using the use_container_width=True parameter as can be seen via the snippet below.

Code snippet:

st.plotly_chart(df=df, use_container_width=True)

Has anyone encountered similar issues when accessing a streamlit app via a mobile phone broswer? If so, did you come across any solutions?

2

Hi @Akbar_Lutfullah, could you check to see if this solution helps make your graphs look better on mobile? Unfortunately, Streamlit is not fully optimized to be mobile-native currently.

3

Thanks @TylerS for getting back to me, unfortunately that did not help :frowning:

1 Like
4

Hi @Akbar_Lutfullah, could you try shortening the label names in the chart?

5

Exact same issue here.
Actually only when I am using page config st.set_page_config(, layout=“wide”) which make charts use all width on desktop.
When removing this page setup, the mobile charts are better but then I am losing full width on desktop.
So still looking for a solution.

6

Actually resolved.
Missed some HTML/css that I added before to reduce header and it impacted the width of the chart on mobile.

7

Hi @bardamug, could you please share how you resolved this? Do all your charts now render perfectly if accessed via your mobile phone browser? I usually have to tilt my phone horizontally for the charts to render in landscape mode but I would like for them to render/readjust to the screen in potrait mode too.

8

Thanks @TylerS, but that too did not help. I encounter this issue on all my plotly charts when I access my webapp from a mobile browser.