Plotly Dash dropdown menu python

Question

I would like to add a dropdown menu to show only one figure. I mean, if I select fig the dash must show me only the fig and if I select fig2 the dash must show me the fig 2. Is it possible? My code is an example, I have more than 500 figs.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go # or plotly.express as px

fig = go.Figure()
fig2 = go.Figure()
fig.add_trace(go.Scatter(y=[4, 2, 1], mode="lines"))
fig2.add_trace(go.Bar(y=[2, 1, 3]))

figs = [fig, fig2]
div = []
for item in figs:
    div.append(dcc.Graph(figure=item))

app = dash.Dash()
app.layout = html.Div(div)
"""
add a dropdown to show only one fig
"""


app.run_server(debug=True, use_reloader=False)

ilja ilja · Accepted Answer · 2020-06-03T15:15:58

Yes, it is possible.

First you need to create the dropdown containing the figure-names / filenames or the identifier you wish, just keep the {'label': x, 'value': x} structure for the option parameter. label is what you will see in the dropdown, and value will be passed to the callback (s. below).

fig_names = ['fig1', 'fig2']
fig_dropdown = html.Div([
    dcc.Dropdown(
        id='fig_dropdown',
        options=[{'label': x, 'value': x} for x in fig_names],
        value=None
    )])

Next you need a blank div (with an id) where the plot will appear:

fig_plot = html.Div(id='fig_plot')

Now create a callback. When an input with the id='fig_dropdown' is changed, the value parameter will be passed to the update_output function. The output of this function will be passed to passed to the children parameter of the id='fig_plot' div.

@app.callback(
dash.dependencies.Output('fig_plot', 'children'),
[dash.dependencies.Input('fig_dropdown', 'value')])
def update_output(fig_name):
    return name_to_figure(fig_name)

The name_to_figure(fig_name) function returns a dcc.Graph() objects, containing your figure, depending on the fig_name value of the dropdown.

Full example:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go # or plotly.express as px


app = dash.Dash()

fig_names = ['fig1', 'fig2']
fig_dropdown = html.Div([
    dcc.Dropdown(
        id='fig_dropdown',
        options=[{'label': x, 'value': x} for x in fig_names],
        value=None
    )])
fig_plot = html.Div(id='fig_plot')
app.layout = html.Div([fig_dropdown, fig_plot])

@app.callback(
dash.dependencies.Output('fig_plot', 'children'),
[dash.dependencies.Input('fig_dropdown', 'value')])
def update_output(fig_name):
    return name_to_figure(fig_name)

def name_to_figure(fig_name):
    figure = go.Figure()
    if fig_name == 'fig1':
        figure.add_trace(go.Scatter(y=[4, 2, 1]))
    elif fig_name == 'fig2': 
        figure.add_trace(go.Bar(y=[2, 1, 3]))
    return dcc.Graph(figure=figure)

app.run_server(debug=True, use_reloader=False)

Plotly Dash dropdown menu python

2 Answers