How to create a border for a graph image (plotly & streamlit)

[rsalmazi]

Hi,

I need to surround a graph with a border, but couldn’t understand the documentation sample. Here is my code:

from itertools import groupby
from altair import Month
import streamlit as st
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

#st.set_page_config(initial_sidebar_state=“auto”, menu_items=None)
st.set_page_config(layout=‘wide’)

st.header(“This is my app”, divider=‘gray’)

df = pd.read_excel(‘manut_jan_apr24.xlsx’)

df = df.sort_values([‘Date’])

st.sidebar.title(“DATA FILTERS”)

month_options = [‘Whole period’] + list(df[‘Month’].unique())
month = st.sidebar.selectbox(“Month”, options=month_options, index=0,
placeholder=‘Select month…’, key=‘month’
)

col1, col2 = st.columns([3,2], gap=‘small’)
col3, col4, col5 = st.columns(3)

df1 = df.groupby([‘PlaceName’,‘Equipment’])[‘Dtstoped’].sum().reset_index()
df1 = df.groupby([‘PlaceName’,‘Equipment’])[‘Dtstoped’].sum()
df1 = df1.sort_values(ascending=False)
df1 = df1.groupby([‘PlaceName’]).head(1).reset_index()
df1 = df1[:10]

#========== How surround figures 1 and 2 bellow with borders??? ==================#
fig1 = go.Figure(go.Pie(labels=df1[‘PlaceName’] + ’ - ’ + df1[‘Equipment’], values=df1[‘Dtstoped’], hole=.6))
col1.plotly_chart(fig1, use_container_width=True)

fig2 = go.Figure()
fig2.add_trace(go.Indicator(mode=‘number’,
title = {“text”: f"Total Downtime Total - Unit#3
Hours
"},
value = df[‘Dtstoped’].sum()
))
col2.plotly_chart(fig2, use_container_width=True)

This is what I need:

Thank you for any help!

[Goyo]

Put it inside a container with a border.

[rsalmazi]

Thank you Goyo. I already have tried this way, but the border doesn’t show up. Only for text samples they appeared. For the graphs, the sample is poor.

Thanks.

[Goyo]

The border does show up for me.

[rsalmazi]

Yeah! Exactly this way! But didn’t figure out the logic behind “container” yet. Maybe the indentation rules, the moment to call it, I don’t know. If you have any idea on how to get a good real sample, please, let me know. I appreciate your help.

Best,

[Goyo]

I am not sure what you mean by “sample” here. There are examples in the docs, of course.

[rsalmazi]

Oh, I meant exactly the example in the docs. I don’t know if you noticed, the first example (with graph), there is no border (st.container()! ). When I’d tried to change to st.container(border=True) it doesn’t appear to me, without any explanation. That’s why I consider the example a little poor. If using within “write” function ok, it appears to me.

That is the image I’d like as solution…

And sorry about the draw… I don’t know about good designing tools.

That’s it. It seems to be easy, and absolutely logic. But it is not running for me.

Again, thank you very much for your time

Best,

[rsalmazi]

Maybe it could help…

I’d tried all indentation that I could imagine. It is not acceptable for IDE (VScode).

Tks.

[Goyo]

The first example in the docs works for me just adding a border to the container.

[rsalmazi]

I’ll keep trying. The problem is the columns. I have two in the same row, and I need two borders…

Thanks Goyo.

[mathcatsand]

Instead of writing a graph directly into the column, write a container (with border) into the column then write the graph into that container.

import streamlit as st

col1, col2 = st.columns(2)
con1 = col1.container(border=True)
con2 = col2.container(border=True)

# write to con1 and con2

[rsalmazi]

Wow! Good idea! I was not aware of this way. Thank you. I’m gonna try and let you know.

Many thanks.

[rsalmazi]

Perfect! Did work very well! This is the page with your suggestion.

Thank you very much! Wish you all the best.

RSalmazi

[rsalmazi]

Goyo, just to say thank you again for the help. It is solved now. As I have two columns in the same row, the idea is to create individual container for each purpose. It worked very well.

All the best!
RSalmazi