Custom Render Widths

Is there a way to force a specific (or all) objects to render with larger widths?

An example use case with plotly is when a legend is too large to move so that it doesn’t occulde part of the plot.

Cheers!
Justin

Hi Justin

The way you set the width for each chart varies depending on which charting library you’re using.

Which library are you using in this case?
And if possible: can you post a few lines of code here, so I can reproduce the issue?

Another thing to try is turning on wide mode and seeing if that helps. For that, click on ☰ > Settings > Show report in wide mode > Save

1 Like

Which library am I using?
Working with plotly (3.10) and plotly_express (0.3.1). Here’s the sample code:

line_fig = px.line(multiplayer_df, x='date', y='statPoints', color='name')
line_fig.update_layout(title_text='test', title_x=0.5, xaxis_rangeslider_visible=True, legend=dict(x=-.5, y=-2))
line_fig.update_yaxes(title_text='Cumulative Points')
st.plotly_chart(line_fig)

I completely missed the wide-mode setting sorry; plotly adjusted itself accordingly (here is the end result).

Thanks so much for all of the help from you and your team!

Awesome. Glad that worked out.

So my guess is your browser window was too narrow for the plot to show in “normal mode”. I have created a bug about this anyway, since we should find a better solution for cases like this. I’m thinking we need better CSS breakpoints for the browser width.

You can follow the bug here: https://github.com/streamlit/streamlit/issues/124

Thanks for bringing this up!

2 Likes

Is it possible to always enable “Show app in wide mode”?

On refresh, the setting on browser is lost.

3 Likes

Not at the moment, but I just created a feature request for this. Shouldn’t be hard to implement, but I also can’t guarantee we’ll get to it this month. If you or anyone else reading this is interested in contributing a PR, please post in the issue!


Just out of curiosity, though: are you using a very narrow browser window? I’m just wondering why that chart is getting garbled in the first place…

Just an FYI - I found a workaround by setting the figure width and height directly in the Plotly object (ie, not viast.plotly_chart(...width,height), but rather via fig.update_layout(width=900,height=600)), which then renders the chart with appropriate size (I know I lose the auto-scaling, but most people will access my app via desktop anyway)

Found this workaround in HTML to make sure the page always stretch as max as it gets (2000px)

def _max_width_():
    max_width_str = f"max-width: 2000px;"
    st.markdown(
        f"""
    <style>
    .reportview-container .main .block-container{{
        {max_width_str}
    }}
    </style>    
    """,
        unsafe_allow_html=True,
    )

Just call this function in your app.py and you’ll be able to always start with wide-mode

10 Likes

This is so nice to have. Thank you!

1 Like

Great workaround, thank Matt!

Thanks a lot for this