How to align plotly_chart to page center using html in streamlit

Viewed 484

enter image description here


def plot_open_close_chart(dataframe: pd.DataFrame, name: str, start_date: int, end_date: int) -> stl.plotly_chart:
    fig = dataframe.iplot(y="Open",
             secondary_y="Close",
             secondary_y_title="Close Price ($)",
             xTitle="Date", yTitle="Open Price ($)",
             title=f'''Open and Close Price  of {name} From {start_date} To {end_date}''', asFigure=True)
    stl.plotly_chart(fig)
    get_record_low_and_high(dataframe, dataframe.Close)

I tried to set the chart to page center just like the "Record Low" below the chart is set using html but it does seem to work with the chart. It will be a pleasure if anyone can help fix this. I also tried writing fig in html and but it shows nothing in page.

2 Answers

You can replace stl.plotly_chart(fig) for stl.plotly_chart(fig, use_container_width = True). This won't center align the chart, but once you close the sidebar the chart will fill the entire width of the page.

You can give a try to stl.columns and create three columns (left, middle, right) where you only use the middle one:

left, middle, right = stl.columns((2, 5, 2))
with middle:
    plot_open_close_chart()
Related