How to position my chart with Dash Bootstrap Components

Question

I’m having a problem with the positioning of my chart on the page, in this case I’m using Dash Bootstrap Components to create rows and columns on the page…

My graphic should be next to the Card, but it’s under the Card, where am I doing wrong?

app.layout = html.Div(children=[

        dbc.Row([

                dbc.Col([

                        dbc.Card([
                                
                                 html.H5('Opcões'),
                                 dcc.Dropdown(opcoes, value = 'ACS' , id='check_opcao', style={'width': '90%'}),
                                 
                        ],style={'height': '90vh', 'margin': '10px', 'padding': '20px', 'width': '300px'})

                ], md=4),

                dbc.Col([

                        dbc.Row([dcc.Graph( id='grafico_gc_players', style={'width': '50%'})])

                ],md=8)
        ])
        
        
        ])
@app.callback(
        Output('grafico_gc_players', 'figure'),
                [
                Input('check_opcao', 'value'),
                
                ])

def renderizar_graficos(check_opcao):

        
    if check_opcao == 'ACS':
                fig = px.bar(df.nlargest(10, ['Rnd','ACS','K:D','KAST','ADR','KPR','APR','FKPR','FDPR','HS%','CL%','KMax','K','D','A','FK','FD']), x= check_opcao, y= 'ACS',  title='Top 10 jogadores em: ' + check_opcao, color='Player', barmode = 'stack', 
                        labels={
                                'Player': 'Nome e Time',
                                'ACS': 'ACS'}, template='plotly_dark', text='ACS')

    elif check_opcao == 'HS%':
                 fig = px.scatter(df.nlargest(10, ['Rnd','ACS','K:D','KAST','ADR','KPR','APR','FKPR','FDPR','HS%','CL%','KMax','K','D','A','FK','FD']), x="Player", y= check_opcao, title='Os 10 Jogadores com a maior taxa de HS e seu KD no Valorant Champions:',
                        color="Player",
                        labels={
                                'Player': 'Jogador',
                                'HS%': 'HS%'}, size='ACS',  
                        hover_data=['Player'] , template='plotly_dark', text='HS%')
    else :
        fig = px.bar(df.nlargest(10, ['Rnd','ACS','K:D','KAST','ADR','KPR','APR','FKPR','FDPR','HS%','CL%','KMax','K','D','A','FK','FD']), x='Player', y= check_opcao, color= check_opcao, title='Top 10 jogadores em: ' + check_opcao, barmode = 'stack', 
            labels={
                    'Player': 'Nome e Time'}, text= check_opcao, template='plotly_dark')

    fig.update_layout(margin=dict(l=0, r=0, t=20, b=20), height=500)

    return fig

Screen print showing what my chart looks like on my dashboard

DASHBOARD LAYOUT

Answer 1

I think you may need to use Bootstrap's grid system as follows:

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

The output: