How to make dcc.Graph in plotly dash, twice as high as other graphs in the row using dash-bootstrap-component layout

Question

I want my graphs to look like this:

But with the code below, I get this.

It is similar to the question here, but I cannot seem to make that solution (of adding style="display":"inline-block" to work).

Any ideas how to do this? ChatGPT/code-interpreter also gave this answer, and it seems "logical" to do this, but I am stumped...

My code:

from dash import Dash, dcc, html
import dash_bootstrap_components as dbc
import plotly.express as px

# Function to draw the figure
def drawFigure() -> html.Div:
    """
    Draw a Plotly figure using the Iris dataset.

    Returns:
        html.Div: A div containing the Plotly figure.
    """
    return  html.Div([
        dcc.Graph(
            figure=px.bar(
                df, x="sepal_width", y="sepal_length", color="species"
            ),
            config={
                'displayModeBar': False
            }
        ) 
    ], className='mt-3 mb-3')

# Data
df = px.data.iris()

# Build App
app = Dash(external_stylesheets=[dbc.themes.LITERA])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            drawFigure() 
        ], width=3, style={"height": "100%"}), # Make this column 100% of the available height
        dbc.Col([
            dbc.Row([
                dbc.Col([
                    drawFigure()
                ], width=6),
                dbc.Col([
                    drawFigure() 
                ], width=6),
            ], style={"height":"50%"}), # Each of these rows will be 50% of the available height
            dbc.Row([
                dbc.Col([
                    drawFigure()
                ], width=6),
                dbc.Col([
                    drawFigure() 
                ], width=6),
            ], style={"height":"50%"}), # Each of these rows will be 50% of the available height
        ]),
    ]), 
], style={'background-color': 'black'})

# Run app and display result inline in the notebook
app.run_server(host='0.0.0.0', port=8050, debug=True,  jupyter_height=1600)

Answer 1

I'm working with something as below:

import pandas as pd
import numpy as np
import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import dash_table

# Create dashboard
app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LITERA]) # You can change external_stylesheets

# Data
df = px.data.iris()
figure=px.bar(df, x="sepal_width", y="sepal_length", color="species")

app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([                
                        dbc.Row([
                            dbc.Col([
                                dcc.Graph(id='bar_chart',figure=figure,style={'height':780,'width':'auto'}),
                            ],width={'size':12,'offset':0,'order':1}),
                        ]),    
                ])
            ], className='h-100 text-left')
        ], xs=4),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([                                       
                        dbc.Row([
                            dbc.Col([
                                dcc.Graph(id='box_plots',figure=figure,style={'height':375,'width':'auto'}), #Heatmap plot
                            ],width={'size':12,'offset':0,'order':1}),    
                        ]),
                ], className='text-left')
            ]),
            dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            dbc.Row([
                                dbc.Col([
                                    dcc.Graph(id='3d_graph',figure=figure,style={'height':375,'width':'auto'})    
                                ],width={'size':12,'offset':0,'order':1}),    
                            ])
                        ], className='text-left')
                    ])
                ], xs=12),
            ], className='pt-1'),
        ], xs=4),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([                                        
                        dbc.Row([
                            dbc.Col([
                                dcc.Graph(id='box_plots_2',figure=figure,style={'height':375,'width':'auto'}),
                            ],width={'size':12,'offset':0,'order':1}),    
                        ]),
                ], className='text-left')
            ]),
            dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                        dbc.Row([
                            dbc.Col([
                                dcc.Graph(id='3d_graph_2',figure=figure,style={'height':375,'width':'auto'})    
                            ],width={'size':12,'offset':0,'order':1}),    
                        ])
                        ], className='text-left')
                    ])
                ], xs=12),
            ], className='pt-1'),
        ], xs=4)    
    ], className='p-2 align-items-stretch'),
])
           
if __name__ == "__main__":
    app.run_server(debug=False,port=1221)

So I think we need to add all columns in one big Row, then make 3 Columns in big Row, then make 2 Rows in the last 2 Columns.

You will get this one: