Black Lives Matter. Please consider donating to Black Girls Code today.

Fill in default graph or value for blank graph figure

The dashboard I’m building needs a user to input values in order to build the appropriate dataframe used for plotting.

Prior to this, my default chart looks kind of ugly. Is there a way I can replace this with something better looking?

I often add a cool random chart (3D spatial map or something else) as the initial chart. It’s not functional and increases loading time a tiny bit but it’s fun.

Or, you can put the graph in a div and create a callback that hides the div if the figure property of the chart is None.

How do you add the callback if the figure = none? Sort of new to all of this.

You listen to the figure property of the chart and return a hidden div style dict the div if the figure is none.

Something like:

app.layout = ...
    html.Div(
        dcc.Graph(id='chart'),
        id='chart-div'
)


@app.callback(
    Output('chart-div','style'),
    [Input('chart','figure')]
)
def f(...):
    if fig is None:
        return dict(display='none')
    else:
        return dict()