How do I create a dropdown option inside the dcc.graph

[saurabh_joshi]

Hi,

I am trying to make something like this, image below, with the graph option on the top-right (marked in red box). It contains dropdown options like “Refresh Chart”, and “Download Data”.

How do I replicate this in Dash? I tried using the dropdown component, but it occupies the full card space, not the one in the image

Code

dashboard = [
    navbar,
    html.Br(),
    dbc.Row(
        dbc.Col(
            html.H3(
                "Dashboard Page", 
                style={"color": "#a3004c", "font-family": "changa"}
            ),
            width=2,
        ),
        className="ml-5 mb-0",
    ),
    
    dbc.Row(
        [
            dbc.Col(
                [
                    dbc.Card(
                        dbc.CardBody(
                            [
                                # Line chart
                                dcc.Graph(
                                    id='line-chart',
                                    figure={
                                        'data': [
                                            {'x': df_line['X'], 'y': df_line['Y'], 'type': 'line', 'name': 'Line Chart'},
                                        ],
                                        'layout': {
                                            'title': 'Line Chart'
                                        }
                                    },
                                    config={
                                        'displayModeBar': False
                                    },
                                )
                            ]
                        ),
                        className="mb-3"
                    )
                ],
                width=6,
                style={"margin-left": "50px"}
            ),

            dbc.Col(
                dbc.Card(
                    dbc.CardBody(
                        [
                            dcc.Graph(
                                id='pie-chart',
                                figure={
                                    'data': [
                                        {'labels': df_pie['Category'], 'values': df_pie['Values'], 'type': 'pie', 'name': 'Pie Chart'},
                                    ],
                                    'layout': {
                                        'title': 'Pie Chart'
                                    }
                                },
                                config={
                                    'displayModeBar': False
                                }
                            )
                        ]
                    ),
                    className="mb-3"
                ),
                width=5
            )
        ]
    )
]

This is what I came up with for the dropdown, not sure where to add it.

graph_options = [
    html.Div(
        [
            html.Label(['Options:'],style={'font-weight': 'bold'}),
            dcc.Dropdown(
                id='dropdown',
                options=[
                    {'label': 'refresh chart', 'value': 'chart refresh'},
                    {'label': 'Export Data to Excel', 'value': 'data download'},
                    {'label': 'Delete chart', 'value': 'delete chart'}
                ],
                value='graph1',
                style={"width": "60%"}
            )
        ]
    )
]

Your insights will be helpful

Thanks

[hoatran]

I think you could add one Row with dcc.Dropdown in your Card. Something as below:

dbc.Row(
    [
        dbc.Col(
            [
                dbc.Card(
                    dbc.CardBody(
                        [dbc.Row([
                            dbc.Col([
                                html.Label(['Options:'],style={'font-weight': 'bold'}),
                                dcc.Dropdown(
                                    id='dropdown',
                                    options=[
                                        {'label': 'refresh chart', 'value': 'chart refresh'},
                                        {'label': 'Export Data to Excel', 'value': 'data download'},
                                        {'label': 'Delete chart', 'value': 'delete chart'}
                                    ],
                                    value='graph1',
                                    style={"width": "60%"})
                            ])
                        ]),
                         dbc.Row([
                            # Line chart
                            dcc.Graph(
                                id='line-chart',
                                figure=[],
                                config={
                                    'displayModeBar': False
                                },
                            )
                         ])
                        ]
                    ),
                    className="mb-3"
                )
            ],
            width=6,
            style={"margin-left": "50px"}
        ),

        dbc.Col(
            dbc.Card(
                dbc.CardBody(
                    [dbc.Row([
                            dbc.Col([
                                html.Label(['Options:'],style={'font-weight': 'bold'}),
                                dcc.Dropdown(
                                    id='dropdown2',
                                    options=[
                                        {'label': 'refresh chart', 'value': 'chart refresh'},
                                        {'label': 'Export Data to Excel', 'value': 'data download'},
                                        {'label': 'Delete chart', 'value': 'delete chart'}
                                    ],
                                    value='graph1',
                                    style={"width": "60%"})
                            ])
                        ]),
                        dcc.Graph(
                            id='pie-chart',
                            figure=[],
                            config={
                                'displayModeBar': False
                            }
                        )
                    ]
                ),
                className="mb-3"
            ),
            width=5
        )
    ]
)

And you will get this one:

[saurabh_joshi]

Hello, I found a way to use the DropdownMenu component. Here’s what it looks like

Thanks!