I have found that wrapping callback outputs in square brackets prevents the graphs from displaying before the inputs are changed from the default value that they initially load with.
So for example if I have a callback that looks like this:
@app.callback(
Output('graph_6', 'figure'),
[Input('year_slider_0', 'value')]
)
Provided I have set a value for year_slider_0 as the default, then graph_6 will be displayed automatically upon page load.
However if I have a callback that looks like this:
@app.callback(
[Output('graph_6', 'figure')],
[Input('year_slider_0', 'value')]
)
Then graph_6 will be blank upon page load, and will only be displayed once year_silder_0 is changed from the default value.
This effects callbacks with multiple outputs because multiple outputs need to be wrapped in square brackets.
Has anyone else encountered this?
There are two workarounds I can think of for this, either you have a single output for each callback, or you set the graph values in the layout section of the app. Neither are very elegant however.