Show blank page when no dropdown is selected in plotly/dash

Question

Is it possible to show a blank page in plotly/dash when no dropdown is selected?

Currently this is my output when no dropdown is selected.

This code does give a blank page when no dropdowns are selected. However, when the first value of the pillar dropdown is selected, it will be always be a blank graph.

Since I am using multi=True in my dropdowns, when a second or more values of pillar dropdowns are selected, graphs do appear but not when one single dropdown is selected.

For some weird reason, the first selection is always ignored and only taken into account when there is a second dropdown selection.

@app.callback(
    Output(component_id='example-graph', component_property='children'),
    [Input(component_id='pillar-choice', component_property='value')],
    [State(component_id='example-graph', component_property='children')]

)

def update_graph_0(value_pillar, children):
    if not value_pillar:
        return []
    else:
        x = dcc.Graph(id='graph1', style={'display':'inline-block', 'width' :'33%'})
        y = dcc.Graph(id='graph2', style={'display':'inline-block', 'width' :'33%'})
        z = dcc.Graph(id='graph3', style={'display':'inline-block', 'width' :'33%'})
            
       
    return x,y,z

There is a similar question in the [development community](https://community.plotly.com/t/show-and-hide-graph/34753/6): how to specify an empty list in html.Div and add the graph of the dash component in the callback. — r-beginners, Aug 11 '21 at 14:13
@Sheryna Does [How to not show default dcc.graph template in Dash?](https://stackoverflow.com/questions/66637861/how-to-not-show-default-dcc-graph-template-in-dash/66738747#66738747) answer your question? — vestland, Aug 12 '21 at 10:42
@vestland - It does look for the same thing but I'm afraid your code is complex for me as a beginner. I might give it a try if my current code, which I've added to my question, is not successful. — Sheryna, Aug 13 '21 at 15:49

5eb · Answer 1 · 2021-08-11T15:39:18.520

One approach is to not put the graph(s) in the initial layout, but to create a container element which children are set dynamically through your callback(s) based on the dropdown value(s):

from dash import Dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input
import plotly.graph_objects as go
import plotly.express from px

app = Dash(__name__)
app.layout = html.Div(
    [
        dcc.Dropdown(
            id="dropdown",
            options=[
                {"label": "A", "value": 1},
                {"label": "B", "value": 2},
                {"label": "C", "value": 3},
            ],
        ),
        html.Div(id="page-content"),
    ]
)


@app.callback(
    Output("page-content", "children"),
    Input("dropdown", "value"),
)
def update_output(value):
    if not value:
        return []

    fig = px.scatter(x=[x ** value for x in range(10)], y=[x for x in range(10)])
    return dcc.Graph(figure=fig)


if __name__ == "__main__":
    app.run_server()

Thank you for this. I've tried your code with some edits and pasted it in my original question. I have provided details of my issue and would really appreciate if you could help! Thanks a lot — Sheryna, Aug 13 '21 at 16:02
Can you share a reproducible example? So an example which can be run as is and demonstrates the problem, because I can't replicate the behavior you describe with the code you shared. — 5eb, Aug 14 '21 at 07:31

Show blank page when no dropdown is selected in plotly/dash

1 Answers1