Fill in default graph or value for blank graph figure

Dash Python
1

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?

image
image792×445 3.21 KB

2

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.

3

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

4

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()
1 Like
5

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

@app.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