# Dropdown not displaying in default layout when dcc.Graph figure is {}

**URL:** <https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805>\
**Category:** Dash Python\
**Created:** [February 8, 2021, 10:06am UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805 "2021-02-08T10:06:44Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![sohilpatel](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@sohilpatel](https://community.plotly.com/u/sohilpatel)\
**Post date:** [February 8, 2021, 10:06am UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805/1 "2021-02-08T10:06:44Z")

</div>

def default\_layout():  
return html.Div(  
children=[  
html.H1(  
children=“Analytical solution”,  
className=“header-title”  
),

```
               html.P(
                        children="dashboard",
                        className="header-description"
                     ),
               
               
               html.Div(
                          
                          children="what would you like to do?",
                          className="menu-title"
                        ),
            
               dcc.Dropdown(
                                id="Feature-dropdown",
                                options=[
                                            {"label":"description",
                                             "value":"description"},
                                            {"label":"affected element",
                                             "value":"affected element"},
                                            {"label":"created time",
                                             "value":"creation"},
                                            {"label":"Resolution time",
                                             "value":"resolution time"}
                                        ],
                                clearable=True,
                                placeholder="Select a plot",
                                className='dropdown',
                                disabled=False,
                                multi=False,
                                searchable=True,
                                persistence=False
                                
    
                            ),
                dcc.Graph(id="graph",figure={})
                         
            ]
    
                )
```

---

<div class="post-metadata">

**Author:** ![sohilpatel](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@sohilpatel](https://community.plotly.com/u/sohilpatel)\
**Post date:** [February 8, 2021, 10:08am UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805/2 "2021-02-08T10:08:51Z")

</div>

Based on options in dropdown i want to create different plots…There should be no plot on default layout

---

<div class="post-metadata">

**Author:** ![sohilpatel](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@sohilpatel](https://community.plotly.com/u/sohilpatel)\
**Post date:** [February 8, 2021, 2:14pm UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805/3 "2021-02-08T14:14:57Z")

</div>

any suggestions pls?

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [February 8, 2021, 3:25pm UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805/4 "2021-02-08T15:25:59Z")

</div>

Hi @sohilpatel and welcome to the Dash community 🙂

Could you please say more about what you are trying to do?

I expect that this layout returns an empty graph. If you want no graph at all, you can wrap the graph in a html.Div and add style={display:none} Then update the style property in a callback if the user selected something from the dropdown

If the dropdown is not displaying you may have an error message on the page.

If you post a comlete minimal example that demonstrates the problem, then it will be easier to help.

---

<div class="post-metadata">

**Author:** ![sohilpatel](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@sohilpatel](https://community.plotly.com/u/sohilpatel)\
**Post date:** [February 8, 2021, 4:24pm UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805/5 "2021-02-08T16:24:08Z")

</div>

> [@AnnMarieW](#):
>
> monstrat

thanks for the suggestion .wraping the graph in html.Div element and setting ‘display’:‘none’ solved the problemof empty graph coming up on default window.  
what do i set the display to when a dropdown is selected in call back function.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [February 8, 2021, 4:27pm UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805/6 "2021-02-08T16:27:57Z")

</div>

Glad it worked!  
You could try updating the style property in the callback with {‘display’: ‘block’}

---

<div class="post-metadata">

**Author:** ![sohilpatel](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@sohilpatel](https://community.plotly.com/u/sohilpatel)\
**Post date:** [February 8, 2021, 4:28pm UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805/7 "2021-02-08T16:28:01Z")

</div>

@app\_inc.callback(

```
    Output(component_id='common-graph', component_property='figure'),

    Input(component_id='Featuredropdown', component_property='value')

                 )

def basic_plot_output(Featuredropdown):

    if Featuredropdown == 'short_description':

        out_fig= trigram_word_frequency(df)

        return out_fig
```

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [February 8, 2021, 4:58pm UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805/8 "2021-02-08T16:58:06Z")

</div>

Hi @sohilpatel

Here are a few things to check:

the callback should be `@app.callback` not `@app_inc.callback`

Be sure that the `component_id` names match exactly with the id’s in the layout. For example in your callback you have  
`Input(component_id='Featuredropdown'....` but the id in the layout is `'Feature-dropdown'`

Instead of wrapping the dcc.Graph in a html.Div as I first recommended, it might be simpler to just use the `style` property in the dcc.Graph.

Your callback could look something like this:

```auto
@app.callback(
    Output(component_id='common-graph', component_property='figure'),
    Output(component_id='common-graph', component_property='style'),        
    Input(component_id='Feature-dropdown', component_property='value')
)
def basic_plot_output(Featuredropdown):    
    style = {'display': 'none'} if Featuredropdown is None else {'display': 'block'}
    out_fig = {}
    if Featuredropdown == 'short_description':
        out_fig = fig
    return out_fig, style
 

```

---

<div class="post-metadata">

**Author:** ![sohilpatel](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@sohilpatel](https://community.plotly.com/u/sohilpatel)\
**Post date:** [February 8, 2021, 5:07pm UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805/9 "2021-02-08T17:07:58Z")

</div>

def trigram\_word\_frequency(df\_in):

```
print("This function is being called")

'''visualize tri gram frequency or combination of 3 words which has the highest occurence '''

word_vectorizer = CountVectorizer(ngram_range=(3,3), analyzer="word")

sparse_matrix = word_vectorizer.fit_transform(df_in['short_description'])

frequencies = sum(sparse_matrix).toarray()[0]

tri_grams_df = pd.DataFrame(frequencies, index=word_vectorizer.get_feature_names(), columns=['frequency'])

tri_grams_df.reset_index(inplace=True)

tri_grams_df.columns = ['short description', 'Frequency']

tri_grams_df=tri_grams_df.sort_values(ascending=False, by='Frequency').head(20)

fig = go.Figure(

        data=[go.Bar(x=tri_grams_df['Frequency'], y=tri_grams_df['short description'], orientation='h',

                     marker={'color': ['#FF7F50', '#6495ED', '#FFD700', '#EE82EE', '#98FB98', '#FF7F50', '#6495ED', '#FFD700', '#EE82EE', '#98FB98', '#FF7F50', '#6495ED', '#FFD700', '#EE82EE', '#98FB98', '#FF7F50', '#6495ED', '#FFD700', '#EE82EE', '#98FB98']},offset=0)],

        layout=go.Layout(

            yaxis_title="Incident Short description",

            height=600,

            width=1200,

            xaxis_title="Frequency of words in short description"

        )

    )

fig.update_layout(

    title={'text': '<b>Trigram for top 20 three words</b>', 'x': 0.5 ,'y': 0.90, 'xanchor': 'center', 'yanchor': 'top'},

    font=dict(

    family="Courier New, monospace",

    size=12

    )

)

    

return fig

```

def default\_layout():

```
return html.Div([

               html.H1(

                        "Analytical solution to provide Insight into Incidents",

                        className="header-title"

                      ),

              

               html.P(

                        "Incident Analyzer -",

                        className="header-description"

                     ),

                                  

               html.Div(

                          

                          "what would you like to do?",

                           className="menu-title"

                        ),

                                       

               html.Div(

                   [

                       dcc.Dropdown(

                                id="Featuredropdown",

                                options=[

                                            {"label":"Short description vs closure code",

                                             "value":"short_description"},

                                            {"label":"Affected CI vs suspected CI",

                                             "value":"affected_ci"},

                                            {"label":"Incident created time",

                                             "value":"incident_creation"},

                                            {"label":"Resolution time vs closure code",

                                             "value":"resolution_time"}

                                        ],

                                clearable=True,

                                placeholder="Select a plot",

                                className='dropdown',

                                disabled=False,

                                multi=False,

                                searchable=True,

                                persistence=False

                                        

                            )

                   ]

                        ),

               html.Div(

                            dcc.Graph(id="common-graph"),

                            #style={'display':'none'}

                        )

]

                )

```

app\_inc = dash.Dash( **name** )

```
app_inc.layout = default_layout()

@app_inc.callback(

    Output(component_id='common-graph', component_property='figure'),

    Output(component_id='common-graph', component_property='style'),

    Input(component_id='Featuredropdown', component_property='value'))

def basic_plot_output(Featuredropdown):

    style = {'display':'none'} if Featuredropdown is None else {'display': 'block'}

    out_fig={}

    if Featuredropdown == 'short_description':

        out_fig= trigram_word_frequency(df)

        return out_fig,style

app_inc.run_server()
```

---

<div class="post-metadata">

**Author:** ![sohilpatel](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@sohilpatel](https://community.plotly.com/u/sohilpatel)\
**Post date:** [February 8, 2021, 5:09pm UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805/10 "2021-02-08T17:09:03Z")

</div>

after making changes my dropdown is lost and i see empty graph on deafult layout

---

<div class="post-metadata">

**Author:** ![sohilpatel](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@sohilpatel](https://community.plotly.com/u/sohilpatel)\
**Post date:** [February 8, 2021, 5:22pm UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805/11 "2021-02-08T17:22:00Z")

</div>

> [@sohilpatel](#):
>
> `return out_fig,style`

moving this outside if condition return out\_fig,style and trying works for display

---

<div class="post-metadata">

**Author:** ![sohilpatel](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@sohilpatel](https://community.plotly.com/u/sohilpatel)\
**Post date:** [February 8, 2021, 6:08pm UTC](https://community.plotly.com/t/dropdown-not-displaying-in-default-layout-when-dcc-graph-figure-is/49805/12 "2021-02-08T18:08:45Z")

</div>

finally thanks,i got the graph displayed when clicked dropdown but my drop down becomes invisible after the graph is populated