[FIXED] Plotly, streamlit: how to keep the fullscreen view

Issue

I am building the choropleth map regarding the vaccination rate over the world. To plot with sequential color, I use Plotly to plot the map, and use streamlit to render the map on the webpage with Python. However, the map is too small, I've tried the fig.update_layout() to adjust the size, but the map is not centered. The "view fullscreen" on the toolbar exactly solves my problem as it's centered and always fits the screen. Thus, is there any way to keep it fullscreen?

Here is my code:

import streamlit as st
import pandas as pd
import plotly.express as px

vaccination_data = pd.read_csv('vaccinations.csv')
df = pd.DataFrame(vaccination_data)

def vaccination_lastest_date_by_country(df):
  return df.groupby('location').last().reset_index()

country_lastest_vaccination = vaccination_lastest_date_by_country(df)

df_vaccination_by_country = country_lastest_vaccination.sort_values(by='total_vaccinations_per_hundred', ascending=True)

fig = px.choropleth(df_vaccination_by_country, locations="iso_code",
                    color="total_vaccinations_per_hundred", 
                    hover_name="location",
                    color_continuous_scale=px.colors.sequential.Plasma) # should be able to adjust the color

fig.update_layout(autosize=False, width= 1200, height=800) # map not centered

st.plotly_chart(fig)

The data is public: https://github.com/owid/covid-19-data/blob/master/public/data/vaccinations/README.md

Solution

I managed to make it work using @Pluviophile comment, use_container_width=True and st.set_page_config(layout="wide"). I did use one of the chloropleth examples in order to get data to show.

fig.update_layout(title_text="title", margin={"r": 0, "t": 0, "l": 0, "b": 0}, height=800)
st.plotly_chart(fig, use_container_width=True)

The entirety of the code is as follows:

import json
from urllib.request import urlopen

import pandas as pd
import streamlit as st
import plotly.express as px


st.set_page_config(
    layout="wide",
)

with urlopen(
    "https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json"
) as response:
    counties = json.load(response)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv",
    dtype={"fips": str},
)


fig = px.choropleth(
    df,
    geojson=counties,
    locations="fips",
    color="unemp",
    color_continuous_scale="Viridis",
    range_color=(0, 12),
    scope="usa",
    labels={"unemp": "unemployment rate"},
)
fig.update_layout(title_text="title", margin={"r": 0, "t": 0, "l": 0, "b": 0}, height=800)
st.plotly_chart(fig, use_container_width=True)

Answered By - vinzee