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

[Akbar_Lutfullah]

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:

Mobile version (potrait) - plotly map is compressed:

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

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?

[TylerS]

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.

• Plotly graphs too narrow when responsive - #3 by cualr

[Akbar_Lutfullah]

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

[TylerS]

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

[bardamug]

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.

[bardamug]

@bardamug

Actually only when I am using page config st.set_page_config(, layout=“wide”) which make charts use

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

[Akbar_Lutfullah]

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.

[Akbar_Lutfullah]

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.

[hexemeister]

I am having a similiar issue on the dashboard I’ve been developping… I have tried removing any custom css, setting layout wide or centered and adding use_container_width to all charts, but no sucess. Is there a way to solve it?

My code is all on: [GitHub - hexemeister/coppe-cad-dashboard: Dashboard desenvolvido para a COPPE](https://

Desktop version:

Mobile Version - portrait:

Mobile Version - landscape: