Search code examples
pythonplotly-dash

Width parameter not affecting dash column

I'm trying to build a simple dashboard to display temperature and humidity on different days. I would like to have a dropdown to select the date and then have a row showing a graph of temperature throughout the day next to a graph showing humidity (two graphs in a single row). I can't get it to work even though I've tried using the embedded dbc.column within dbc.row.

I believe the width parameter isn't doing anything and maybe the app is wrapping around.

Here is the code with which you can reproduce what I am doing (keep in mind I am using Jupyter Notebook):

import pandas as pd
import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px

# Sample DataFrame
data_dict = {
    'date': ['2024-05-14', '2024-05-14', '2024-05-14', '2024-05-15','2024-05-15','2024-05-15'],
    'time': ['12:00', '12:10', '12:20', '12:00', '12:10', '12:20'],
    'temperature': [25, 26, 27, 20, 22, 28],
    'humidity': [50, 55, 50, 60, 78, 77]
}
data = pd.DataFrame(data_dict)


app = dash.Dash(__name__)


app.layout = dbc.Container([
    html.H1('Weather Dashboard'),
    
    dbc.Row([
        dbc.Col([
            dcc.Dropdown(
                id='date-dropdown',
                options=[{'label': date, 'value': date} for date in data['date'].unique()],
                value=data['date'].unique()[0]  # Default value
            )
        ], width=4)
    ]),
    
    dbc.Row([
        dbc.Col([
            dcc.Graph(id='temp-graph-plotly', figure={})
        ], width=12),
        
        dbc.Col([
            dcc.Graph(id='hum-graph-plotly', figure={})
        ], width=12)
    ])
])


# Define callback to update graph
@app.callback(
    Output('temp-graph-plotly', 'figure'),
    Output('hum-graph-plotly', 'figure'),
    Input('date-dropdown', 'value')
)

def update_graph(selected_date):
    # Filter DataFrame based on selected date
    filtered_data = data[data['date'] == selected_date]
    
    ### TEMPERATURE ###
    fig_temp_plotly = px.line(filtered_data, x='time', y='temperature').update_xaxes(tickangle=300)
    
    
    ### HUMIDITY ###
    fig_hum_plotly = px.line(filtered_data, x='time', y='humidity').update_xaxes(tickangle=300)
    
    return fig_temp_plotly, fig_hum_plotly


# Run the app
if __name__ == '__main__':
    app.run_server(debug=True, port=8010)

I thought my layout was ok but I'm getting something like the following image, where the graphs are in two rows instead of simply one next to each other: enter image description here

Solution

  • Dash Bootstrap Components: Layout:

    Layout in Bootstrap is controlled using the grid system. The Bootstrap grid has twelve columns [...] The width of your columns can be specified in terms of how many of the twelve grid columns it should span [...]

    Each of your graph column spans across the whole 12-column sized row. That is why the second dbc.Col is placed below the first one - no more space in that dbc.Row. Set the width to 6 or less to fit both columns in one row.

    You're also missing external_stylesheets in your application initialization, should be:

    app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)