How to add multiple graphs to a Plotly Dash app on a single browser page in Python Plotly?

Plotly Dash is a Python framework for building interactive web applications. You can add multiple graphs to a single Dash app by organizing them within HTML Div components and using dcc.Graph elements.

Setting Up Multiple Graphs

To create multiple graphs on one page, you need to structure your layout with separate html.Div containers for each graph ?

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

# Initialize the Dash app
app = dash.Dash(__name__)

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

df_sales = pd.DataFrame({
    "Month": ["Jan", "Feb", "Mar", "Apr"],
    "Sales": [1500, 1200, 1800, 2000]
})

# Create different chart types
bar_chart = px.bar(df_seasons, x="Season", y="Rating", 
                   title="Season Ratings", color="Season")

line_chart = px.line(df_sales, x="Month", y="Sales", 
                     title="Monthly Sales", markers=True)

# Define the app layout with multiple graphs
app.layout = html.Div(children=[
    # First graph section
    html.Div([
        html.H2(children='Season Ratings Dashboard'),
        html.P(children='Bar chart showing ratings by season'),
        dcc.Graph(id='bar-graph', figure=bar_chart)
    ], style={'margin-bottom': '40px'}),
    
    # Second graph section  
    html.Div([
        html.H2(children='Sales Performance Dashboard'),
        html.P(children='Line chart showing monthly sales trends'),
        dcc.Graph(id='line-graph', figure=line_chart)
    ])
])

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

The output shows two separate graphs on the same page ?

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

Using Grid Layout for Better Organization

You can arrange multiple graphs in a grid layout using CSS styling ?

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

app = dash.Dash(__name__)

# Sample data for different charts
df1 = pd.DataFrame({
    "Category": ["A", "B", "C", "D"],
    "Values": [20, 35, 30, 25]
})

df2 = pd.DataFrame({
    "Year": [2020, 2021, 2022, 2023],
    "Revenue": [100, 120, 150, 180]
})

# Create charts
pie_chart = px.pie(df1, values='Values', names='Category', title='Distribution')
area_chart = px.area(df2, x='Year', y='Revenue', title='Revenue Growth')
scatter_chart = px.scatter(df1, x='Category', y='Values', title='Category Analysis')
histogram = px.histogram(df2, x='Revenue', title='Revenue Distribution')

# Grid layout with 2x2 arrangement
app.layout = html.Div([
    html.H1("Multi-Graph Dashboard", style={'text-align': 'center'}),
    
    html.Div([
        # Top row
        html.Div([
            dcc.Graph(figure=pie_chart)
        ], className='six columns'),
        
        html.Div([
            dcc.Graph(figure=area_chart)  
        ], className='six columns'),
    ], className='row'),
    
    html.Div([
        # Bottom row
        html.Div([
            dcc.Graph(figure=scatter_chart)
        ], className='six columns'),
        
        html.Div([
            dcc.Graph(figure=histogram)
        ], className='six columns'),
    ], className='row')
])

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

Key Layout Components

Best Practices

When adding multiple graphs to a Dash app:

• Use unique IDs Each graph needs a distinct id parameter
• Organize with containers Wrap related elements in html.Div components
• Add spacing Use CSS margins or padding for better visual separation
• Consider responsive design Use CSS classes like 'six columns' for grid layouts

Conclusion

Adding multiple graphs to a Dash app requires organizing them within html.Div containers and using unique dcc.Graph components. CSS styling helps create professional grid layouts for better presentation.