Revision history [back]

To make a Plotly chart in a Dash app that takes up the entire screen, you can set the width and height attributes of the dcc.Graph component to the viewport width and height.

Here's an example code snippet:

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input
import plotly_express as px

app = dash.Dash(__name__)

# Create data for the chart
df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", color="continent",
                 hover_name="country", log_x=True, size_max=60)

# Define the layout of the app
app.layout = html.Div([
    dcc.Graph(
        id='example-graph',
        figure=fig,
        style={'width': '100vw', 'height': '100vh'} # Set width and height to viewport width and height
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

In this example, the style attribute of the dcc.Graph component is set to {'width': '100vw', 'height': '100vh'} which sets the width and height of the chart to the full viewport width and height. This will make the chart take up the entire screen.