Creating a golden ratio template for Streamlit apps

Using Streamlit
1

I’m trying to design a dashboard with a golden ratio layout and finding it difficult at the moment. I can do columns in 1:1.618 easily, but in the first column I want to also have that ratio in the column (so have e.g. a chart at the top with a selection box at the bottom with the ratio 1.618:1

Is this possible in Streamlit?

  • Currently running locally and early dev status
  • Not running on a GitHub at the moment
  • using 1.28.1 streamlit
2

Hi @Nathan_calon

Since you are able to successfully define the horizontal layouts (via the columns), the next step is for the vertical part and for this you can specify the height parameter of Streamlit’s built-in chart methods such as st.area_chart, st.bar_chart, st.line_chart and st.scatter_chart. However if you’re using Altair, Matplotlib or Plotly you can also specify the height for those via those library’s methods.

Another approach to control the heights is through a hacky approach via CSS customization. Please refer to this tutorial video (https://youtube.com/watch?v=gr_KyGfO_eU)

Hope this helps!

3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.