How to remove initial blank chart when loading

Dash Python
6

If you don’t want the graph to take space in your layout, you can change from hidden to none

See also:

In Dash you will have to change to:

dcc.Graph(id='graph', style={'display': 'none'}).

Full example:

import dash
from dash import html, dcc, Input, Output
import plotly.express as px
import time

app = dash.Dash(__name__, update_title=None)

app.layout = html.Div([
    dcc.Graph(id='graph', style={'display': 'none'}),
    html.Div(id='dummy')
])


@app.callback(
    Output('graph', 'figure'),
    Output('graph', 'style'),
    Input('dummy', 'style')
)
def show_image(_):
    time.sleep(3)
    return px.scatter(x=[1, 2, 3], y=[1, 2, 3]), {}
    #                                           ^^^^ update style (visibility) of graph


if __name__ == "__main__":
    app.run_server(debug=True)

You could also specify the height for the empty graph:

import dash
from dash import html, dcc
import plotly.graph_objects as go

app = dash.Dash(__name__, update_title=None)

app.layout = html.Div([
    dcc.Graph(id='graph', figure=go.Figure(layout={'height': 400})),
    html.Div(id='dummy')
])

if __name__ == "__main__":
    app.run_server(debug=True)
1 Like