Plotly not responsive mobile screen

Using Streamlit
1

I am trying to build a lineplot using plotly. However, whenever it is accessed from smaller screens, such as a mobile, it does not apply the responsive widths and forces you to horizontally scroll the page, in order to visualize the whole plot.

Screen-Recording-2020-05-03-at-1

Everything else is responsive (apart from the plotly graphs).
Additionally, I tried to change the width of the plotly structure, and it seems to work fine! Although, I don’t have any way to retrieve the dynamic screen width (so I could calculate the length I would need, and thus solve the responsive issue myself).

Screen-Recording-2020-05-03-at-1 (1)
This is the best I could reach so far.

Something as simple as width = st.screen.width would solve my point, as well as many others that require a minimum javascript aperture to work.

What should I do to guarantee a mobile-friendly app?
Thanks! :slight_smile:

2 Likes
2

Hello @caio.hc.oliveira, welcome to the forums !

Would the default behavior of st.plotly_chart(fig, use_container_width=True) answer this ?

image

image
image422×502 13 KB

Regards

3 Likes
3

Yes!! I couldn’t find it anywhere!
I was looking at examples of streamlit scripts built with plotly and it seems a great sum of people is not aware as well.

I am going to structure the question with examples so it can serve as a doc.
Thanks @andfanilo !

2 Likes
4

Why isnt it standard ?

5

great to read this, but you could still face some challenges if your legend is on auto, i do create a layout that makes my legend sit on BOTTOM paper-ref.

fig1.update_layout(legend=dict(
            orientation="h",
            yanchor="bottom",
            y=-0.7,
            xanchor="left",
            x=0.01
            ))

In case you face further challenge, or anyone here, you could update your legend layout