How to put a Plotly graph inside a box shape?

[Mathew_Darren_Kusuma]

I’m creating a dashboard for my personal project. Here’s what it looks like (it’s not completed yet tho):

What I want is to also “put” my Plotly graph inside a box shape just like the average rating, total reviews, and total downloads. So perhaps it’ll look something like this:

Is there any way to achieve that? I’ve looked for a solution but couldn’t find any. Hope someone can help me. Thank you!

Btw, this is the code that I used for creating the box shape for the average rating, total reviews, and total downloads:

with col1:
    st.markdown("<h4>Average Rating</h4>", unsafe_allow_html=True)
    wch_colour_box = (245, 168, 184)
    # wch_colour_box = (255, 255, 255)
    wch_colour_font = (0, 0, 0)
    fontsize = 50
    valign = "left"
    iconname = "fas fa-star"
    i = round(df["score"].mean(), 2)

    htmlstr = f"""
        <p style='background-color: rgb(
            {wch_colour_box[0]}, 
            {wch_colour_box[1]}, 
            {wch_colour_box[2]}, 0.75
        ); 
        color: rgb(
            {wch_colour_font[0]}, 
            {wch_colour_font[1]}, 
            {wch_colour_font[2]}, 0.75
        ); 
        font-size: {fontsize}px;    
        border-radius: 7px; 
        padding-top: 40px; 
        padding-bottom: 40px; 
        line-height:25px;
        display: flex;
        align-items: center;
        justify-content: center;'>
        <i class='{iconname}' style='font-size: 40px; color: #ed203f;'></i>&nbsp;{i}</p>
    """

    st.markdown(lnk + htmlstr, unsafe_allow_html=True)

[snehankekre]

Hi @Mathew_Darren_Kusuma, welcome to the forum!

Take a look at Plotly’s documentation, specifically the paper_bgcolor parameter:

https://plotly.com/python-api-reference/generated/plotly.graph_objects.Layout.html?highlight=paper_bgcolor

• paper_bgcolor – Sets the background color of the paper where the graph is drawn.
  The ‘plot_bgcolor’ property is a color and may be specified as:
  - A hex string (e.g. ‘#ff0000’)
  - An rgb/rgba string (e.g. ‘rgb(255,0,0)’)
  - An hsl/hsla string (e.g. ‘hsl(0,100%,50%)’)
  - An hsv/hsva string (e.g. ‘hsv(0,100%,100%)’)
  - A named CSS color:
  aliceblue, antiquewhite, aqua, aquamarine, azure,
  beige, bisque, black, …

import streamlit as st

df = px.data.gapminder().query("continent=='Oceania'")
fig = px.line(df, x="year", y="lifeExp", color="country")

# Create a border around the plot and set paper_bgcolor to light red
fig.update_layout(
    paper_bgcolor="#FFCCCB",
)

st.plotly_chart(fig, use_container_width=True)

[Mathew_Darren_Kusuma]

But I want it to have rounded corners and a slight shadow, just like this:

Can I achieve this using Streamlit? I really need it. Also, here’s the link to my dashboard in case it may be helpful. Thanks!

[snehankekre]

I’d defer to others in the community and/or the Plotly documentation. You probably need to use a CSS hack or submit a feature request in the Plotly Python repo, but I don’t the know specifics.

[edsaac]

For future reference:

Code:

import streamlit as st
import numpy as np
import plotly.graph_objects as go

PLOT_BGCOLOR = "#FFCCCB"

st.markdown(
    f"""
    <style>
    .stPlotlyChart {{
     outline: 10px solid {PLOT_BGCOLOR};
     border-radius: 5px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20), 0 6px 20px 0 rgba(0, 0, 0, 0.30);
    }}
    </style>
    """, unsafe_allow_html=True
)

x = np.linspace(0,10,25)

fig = go.Figure()

fig.add_trace(
    go.Scatter(x=x, y=x**2, line=dict(color="purple", width=8))
)

# Create a border around the plot and set paper_bgcolor to light red
fig.update_layout(
    paper_bgcolor=PLOT_BGCOLOR,
    plot_bgcolor="skyblue",
    title_text="Rounded corner",
    margin=dict(pad=0, r=20, t=50, b=60, l=60)
)

fig.update_xaxes(
    title_text="X axis",
    showline=True, linewidth=2, linecolor='gray',
)

fig.update_yaxes(
    range=[0,100],
    title_text="Y axis",
    showline=True, linewidth=2, linecolor='gray',
)

st.plotly_chart(fig, use_container_width=True)