Hi! My streamlit app generates this nice, interactive stock chart. The only problem is that the time axis is cut off a little in the bottom (see attached images). However, if I type in
document.querySelector('iframe').contentDocument.querySelector('tr:last-of-type').querySelectorAll('td[style]')[1].querySelector('div[style]').style.height = '130%'
in the chrome web tools console and enter, the time axis moves up and the issue is fixed. However, if I add that same javascript snippet in st.markdown or st.components format within the streamlit file, there is no change when I load the app.
How can I make the JavaScript snippet actually execute from within the Streamlit app?
import streamlit as st
from streamlit_lightweight_charts_ntf import renderLightweightCharts
import streamlit.components.v1 as components
import json
import numpy as np
import yfinance as yf
import pandas as pd
import pandas_ta as ta
import time
COLOR_BULL = 'rgba(38,166,154,0.9)' # #26a69a
COLOR_BEAR = 'rgba(239,83,80,0.9)' # #ef5350
# Request historic pricing data via finance.yahoo.com API
df = yf.Ticker('AAPL').history(period='9mo')[['Open', 'High', 'Low', 'Close', 'Volume']]
# Some data wrangling to match required format
df = df.reset_index()
df.columns = ['time','open','high','low','close','volume'] # rename columns
df['time'] = df['time'].dt.strftime('%Y-%m-%d') # Date to string
# export to JSON format
df['color'] = np.where( df['open'] > df['close'], COLOR_BEAR, COLOR_BULL) # bull or bear
candles = json.loads(df.to_json(orient = "records"))
st.subheader("Multipane Chart with Pandas")
chartMultipaneOptions = [{"height": 600,}]
seriesMultipaneChart = [
{
"type": 'Candlestick',
"data": candles,
},
]
renderLightweightCharts([
{"chart": {"height": 600,},
"series": seriesMultipaneChart}])