How to increase the height and width of the window?

[Aritra]

Summary

I have managed to create a visually appealing chart using the Highcharts library within Streamlit. However, I am facing difficulty in increasing the size of the Streamlit window itself. Although I am able to adjust the height and width of the chart, Streamlit seems to be concealing it somehow, and I am unsure of the reason behind this behavior. I have attempted to modify the CSS settings, but have been unsuccessful in achieving the desired outcome. I kindly request your assistance in resolving this matter. Additionally, I would prefer to maintain the normal appearance of the Streamlit app, rather than switching to wide mode. To help you better understand my situation, I have attached an image below.

Code snippet:

import pandas as pd
import numpy as np
import streamlit as st              
import streamlit_highcharts as hg    
import yfinance as yf
import datetime as dt

today = dt.datetime.now().strftime("%Y-%m-%d")
#Get the stock data
df = yf.download('GOOG', start='2014-01-01', end=today)

#show the data
df.dropna(inplace = True)

st.write(df)

df1 = df.reset_index()
df1['Epoch'] = df1['Date'].apply(lambda x: int(pd.to_datetime(x).timestamp() * 1000))
df1['Close'] = df1['Close'].round(2)
date_close_list = df1[['Epoch', 'Close']].values.tolist()

chartDef={
    'chart': {
        'zoomType': 'x',
        'backgroundColor': 'rgba(14, 17, 23, 1)',
        'color': '#FDFEFE'
    },
    'xAxis': {
        'type': 'datetime',
        'crosshair': True,
        'tickColor': '#FDFEFE',
        'labels': {
            'style': {
                'color': '#FDFEFE'
            }
        }
    },
    'yAxis':{ 
        'title': {
            'text': 'Close Price ($)'
        },
        'labels': {
            'style': {
                'color': '#FDFEFE'
        }
      },
    },
    'rangeSelector':{
        'enabled': True
    },
    'legend': {
        'labelFormat': 'Close Price',
        'color': '#FDFEFE'
    },
    'series': [ { 
            'data': date_close_list,
            'name': 'USD ',
            'color': '#ea4335',
            'type': 'area',
            'tooltip': {
                'valuePrefix': '$'
            },
            'label': {
                'enabled': False,
            },
        }
    ],
    'title': { 
        # 'align': 'left',
        'text': 'Graphical Representation of Close Price'
    },
    'plotOptions': {
        'area': {
            'fillColor': {
                'linearGradient': {
                    'x1': 0,
                    'y1': 0,
                    'x2': 0,
                    'y2': 1
                },
                'stops': [
                    [0, '#fbd6d3'],
                    [1, '#FDFEFE']
                ]
            },
            'marker': {
                'radius': 3.5
            },
            'lineWidth': 2,
            'states': {
                'hover': {
                    'lineWidth': 1.5
                }
            }
        }
    },
    'responsive': {
        'rules': [{
            'condition': {
                'maxWidth': 500
            },
            'chartOptions': {
                'yAxis': [{
                    'labels': {
                        'align': 'right',
                        'x': 0,
                        'y': -6
                    },
                    'showLastLabel': 'false'
                }, 
                {
                    'labels': {
                        'align': 'left',
                        'x': 0,
                        'y': -6
                    },
                    'showLastLabel': 'false'
                }, 
                {
                    'visible': 'false'
                }]
            }
        }]
    }
}


hg.streamlit_highcharts(chartDef,500)

[tonykip]

Hi @Aritra,

Thanks for posting!

Do you have a link to your deployed app? I ran the snippet code you provided in the default view without wide and was able to see the desired output below:

[Aritra]

Hi @tonykip the view you are getting is the default view. But when I’m trying to increase the height and width, it’s unable to fit in the window. Try to increase the height or/and width, you’ll see the difference. Thank u. Also remove the ‘backgroundColor’ attribute from the ‘chart’ dictionary.