How to change the size of a Dash Graph in Python Plotly?

Dash is a Python framework for building interactive web applications with Plotly graphs. You can easily control the size of graphs in a Dash app by using the style parameter in dcc.Graph() component to set custom height and width dimensions.

Basic Setup

First, import the required libraries and create sample data ?

import dash
from dash import dcc, html
import pandas as pd
import plotly.express as px

# Create sample data
df_bar = pd.DataFrame({
    "Season": ["Summer", "Winter", "Autumn", "Spring"],
    "Rating": [3, 2, 1, 4]
})

# Create a bar chart
fig = px.bar(df_bar, x="Season", y="Rating", barmode="group")

Setting Graph Size Using Style Parameter

Use the style parameter in dcc.Graph() to control width and height ?

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1(children='Custom Sized Dash Graph'),
    html.Div(children='Graph with custom dimensions'),
    
    dcc.Graph(
        id='sized-graph',
        figure=fig,
        style={'width': '60vw', 'height': '70vh'}
    )
])

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

Different Size Units

You can use various CSS units for sizing ?

# Using pixels
dcc.Graph(
    id='pixel-graph',
    figure=fig,
    style={'width': '800px', 'height': '400px'}
)

# Using percentages
dcc.Graph(
    id='percent-graph',
    figure=fig,
    style={'width': '80%', 'height': '50%'}
)

# Using viewport units
dcc.Graph(
    id='viewport-graph',
    figure=fig,
    style={'width': '50vw', 'height': '60vh'}
)

Complete Example

import dash
from dash import dcc, html
import pandas as pd
import plotly.express as px

app = dash.Dash(__name__)

# Sample data
df_bar = pd.DataFrame({
    "Season": ["Summer", "Winter", "Autumn", "Spring"],
    "Rating": [3, 2, 1, 4]
})

fig = px.bar(df_bar, x="Season", y="Rating", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Custom Sized Dash Graphs'),
    
    # Small graph
    html.Div([
        html.H3('Small Graph (400x300)'),
        dcc.Graph(
            id='small-graph',
            figure=fig,
            style={'width': '400px', 'height': '300px'}
        )
    ]),
    
    # Large graph
    html.Div([
        html.H3('Large Graph (80% width, 600px height)'),
        dcc.Graph(
            id='large-graph',
            figure=fig,
            style={'width': '80%', 'height': '600px'}
        )
    ])
])

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

Size Units Comparison

Output

When you run the Dash app, you'll see output like this in the console ?

Dash is running on http://127.0.0.1:8050/
 * Serving Flask app '__main__'
 * Debug mode: on

Conclusion

Control Dash graph sizes using the style parameter in dcc.Graph() with CSS units like pixels, percentages, or viewport units. Choose the appropriate unit based on whether you need fixed dimensions or responsive sizing.