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 = ...

def f(...):
    if fig is None:
        return dict(display='none')
        return dict()
1 Like

In case someone stumbles across this like I did now that multiple outputs are supported with callbacks the code can be a little simpler. I found it easiest to set a default class name and then just overwrite it with an output binding as a part of my regular figure callback function.

Something like this:

my layout

layout = html.Div([
dcc.Graph(id=“choropleth”, config=CONFIG_OPTIONS, className=“hidden-graph”),

my callback

Output(“choropleth”, “figure”),
Output(“choropleth”, “className”),
[Input(“types”, “value”)]
def display_choropleth(selected_value):
fig = px.choropleth(

return fig, “visible-graph”

my css

.hidden-graph {
visibility: hidden;

1 Like