Hide/show graph based on drop down selections

Dash Python
2

There are two ways that you can do this.

Option 1 - Return Multiple Graph Elements in the children Property of a Div

Here’s a sketch:

dash.layout = html.Div([
    dcc.Dropdown(id='dropdown', multi=True, options=[{'value': i, 'label': I} for i in ['BAP', 'Low Carbon']])
    html.Div(id='output')
])

@app.callback(Output('output', 'children'), [Input('dropdown', 'value')])
def display_graphs(selected_values):
    graphs = []
    for values in selected_values:
        graphs.append(html.Div(dcc.Graph(...)))
    return graphs

Option 2 - Create 1 Graph with Subplots

Here are docs on subplots: https://plot.ly/python/subplots/

This has the advantage that all graphs will share the same legend and could potentially share the same axes.

Here’s a sketch:

import plotly.tools as tls

dash.layout = html.Div([
    dcc.Dropdown(id='dropdown', multi=True, options=[{'value': i, 'label': I} for i in ['BAP', 'Low Carbon']])
    dcc.Graph(id='graph')
])

@app.callback(Output('graph', 'figure'), [Input('dropdown', 'value')])
def display_graphs(selected_values):
     graph = tls.make_subplots(...)
5 Likes