Plotly charts keep changing their size

Hello,

I have a small problem with my plotly bar charts and don’t know why the following problem occurs. Essentially, I am trying to display multiple bar charts (histograms) using plotly on one page. What keeps happening is that some of the bar charts use the full width of the page (as I would actually like them to), while with others the bar charts initially span the entire page width, but shortly after that reduce their width several times, so that in the end they only use half or a quarter of the total page width. I have no idea why this is the case for some plotly bar charts, while others are displayed without any problems using the full page width.

Does anyone have the same problem or am I the only one? Does anyone have any idea why this problem occurs?

Here is a code snippet of how I use the bar charts:

st.header('This is how I create my histogram')

categories, counts = extract_histogram(some_dictionary)
figure = px.bar(x=categories, y=counts, labels={'x': x_label, 'y': y_label})
st.plotly_chart(figure, use_container_width=True)

UPDATE

I took a look at the browser console every time this happens and somehow it seems to be connected to the following warning:

19.114c6a4a.chunk.js:2 WARN: Too many auto-margin redraws.

Googling this result I ended up here, but couldn’t make much sense out of it. Maybe someone from the Dev Team can look at it to determine if this is connected to streamlit or simply a problem with plotly itself.

Hi @milost,

Thank you for sharing with the Streamlit community! The “Too many auto-margin redraws” error does seem to come from Plotly. I read through that issue you linked and it seems that the proposed solution is to set explicit margins. Have you tried that suggestion?

Best,

Caroline

1 Like