🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Example of new 'hidden div' solution for graph objects

Hi all-

I saw that there was a fix that should allow us to use a dcc.Graph() object in a callback to create a figure where there wasn’t one before (per: https://github.com/plotly/dash-core-components/issues/162 and https://github.com/plotly/dash-renderer/issues/46). However, I am unable to actually find the recommended implementation.

Currently, I have an empty graph shell that updates after a dropdown value is selected- but ideally, I would like to hide/not need this empty shell. Any help would be greatly appreciated!

Hide a graph in your layout like this:

html.Div(dcc.Graph(style{'display': 'none'}))

Also, put a hidden div in your layout:

html.Div(html.Div(id='your_graph')),

Then populate your hidden div with a callback returning a list with a graph in it

@app.callback(Output('your_graph', 'children')
                      [Input(your layout component)
                       ...]
                      [State( any state ?)])
def display_graph(your Inputs and State parameters)
    return [a_dcc.Graph_in_a_list]

I thought this was fixed in this PR: https://github.com/plotly/dash/pull/444

Are you using the latest version of all the Dash packages? If so and you still have this issue, could you post a minimal example showing this issue?