How do I resize a plotly candlestick chart if there's a sidebar on the screen?

[dstone850]

I am new to screenlit and I’ve created a sidebar button to generate a stock chart with a volume indicator (locally deployed). The problem is I can’t enlarge the chart, it’s not taking up all the screen size. I’ve tried to use the fig.update_layout(width=2000,height=500) line of code, but only height changed. Chart width was not affected. The code is below. The first image shows the code output and the second image is what I want it to look like. Would appreciate any suggestions.

import streamlit as st
from streamlit_echarts import st_echarts
import yfinance as yf
import pandas as pd
import plotly.io as pio
import plotly.graph_objects as go
from plotly.subplots import make_subplots
pio.templates.default = 'plotly'

st.sidebar.header('Chart Creator')

data = yf.download('SPY', start='2019-08-05')
data = data.drop(columns=['Adj Close'])
data['Date'] = data.index
data2=data

def get_candlestick_plot(
        df: pd.DataFrame):
    
    fig = make_subplots(
        rows = 2,
        cols = 1,
        shared_xaxes = True,
        vertical_spacing = .1,
        subplot_titles = (f'SPY Price', 'Volume'),
        row_width = [.4, .8])
    
    fig.add_trace(
        go.Candlestick(
            x = df['Date'],
            open = df['Open'], 
            high = df['High'],
            low = df['Low'],
            close = df['Close'],
            name = 'Candlestick chart'
        ),
        row = 1,
        col = 1)
    
    fig.add_trace(
        go.Scatter(x = df['Date'], y = df['Volume'], name = 'Volume', line=dict(color='#4a86e8', width=2)),
        row = 2,
        col = 1)
    
    fig['layout']['yaxis']['title'] = 'Price'
    fig['layout']['yaxis2']['title'] = 'Volume'
    fig.update_xaxes(
        rangebreaks = [{'bounds': ['sat', 'mon']}],
        rangeslider_visible = False)
    fig.update_layout(width=2000,height=500)

    return fig

if st.sidebar.button('Generate Chart'):
  st.plotly_chart(
    get_candlestick_plot(data2))

[edsaac]

@dstone850

st.plotly_chart(
    get_candlestick_plot(data2))

How about setting use_container_width=True in st.plotly_chart

[Faltawer]

Hi,
You can use the set_page_config :
By default it’s centered. But wide it’s better

 st.set_page_config(page_title='YOURPAGENAME', 
                           layout='wide', })

[dstone850]

I tried that and it didn’t change anything, but thanks for the suggestion though.

[dstone850]

Adding the layout=‘wide’ code worked (!) but there’s still a minor problem. Problem is that I want the chart shifted up a little bit to be on the level of the “Chart Creator” text. Is there a way to do that? The first image is the current output and second image is what i want it to look like (chart shifted a bit higher).

[Faltawer]

I have no idea ! But to make it nicely align, you can make the widget in the sidebar down a bit, by adding at the begin of the code an empty space

st.sidebar.container(height=50, border=False)