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
1 Like
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)
1 Like
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
13 Likes
This is so nice to have. Thank you!
1 Like
Great workaround, thank Matt!
Thanks a lot for this
This works. Thanks!
Huge thanks @matthewsjones! Your code is extremely helpful!
I’ve adjusted it a bit to allow specifying the page width in percent:
def _max_width_(prcnt_width:int = 75):
max_width_str = f"max-width: {prcnt_width}%;"
st.markdown(f"""
<style>
.reportview-container .main .block-container{{{max_width_str}}}
</style>
""",
unsafe_allow_html=True,
)
2 Likes
UPDATE:
now you can use st.set_page_config(layout='wide') and the default mode will be wide.
1 Like
It appears that with version 1.0.0 the presented snippet that manipulates the underlying HTML/CSS stopped working and st.set_page_config(layout='wide') is the only way to manipulate content width. Do others have a similar experience?
This code does not work in streamlit 1.5.0. How to put it work? Thanks.
If you are using plotly.express, you can use the following to set the default config for graphs:
px.defaults.width = 1000
px.defaults.height = 500