Hello, I’m trying to remove the empty blank chart when the page loads in the 1st few seconds but was unsuccessful.
I cannot use use dcc.loading as my callbacks are every 1000 milliseconds and so it shows it loading constantly
Thanks for your time!
I`m not shure if I understand your issue, but when I want to avoid this big blank chart waiting for the callback data, I write a simple graph in the layout with basic data and with a low ‘height’ then the app shows this during the loading time.
Also as an Accountant, I do not understand the difference between 1000 milliseconds and a second. 
1 Like
hello, I also need to remove this initial blank chart. any suggestions?
Hi @melz1981 welcome to the forums!
When exactly do you want the graph to be hidden? I usually hide the graph initially using the style property and show the graph via callback. An 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={'visibility': 'hidden'}),
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)
mred visibility
Hi @melz1981 welcome to the forums!
thank you
When exactly do you want the graph to be hidden?
My actually my main concern is getting rid of the initial chart before the graph loads. I set the height of the graph using this code: fig.update(height=400) from Layout() method. However, it goes beyond my intended height. It also shows scroll bar in addition to the initial chart. When graph or data is loaded, it goes to the intended height. Please screenshot sense.
Before load:
after load:
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
hello, Thanks I will try this and let you know how it goes.
hello, it works. thank you so much
1 Like
I will maybe add to this that I also create some dashboards that I want to keep just in one screen without scrolling. If you set height like this you are setting it in px. Different screens have different pixel sizes so when you check your app on screen with different resolution it will fit differently. If you set it using vh it will fill the relative part of the screen of any size.
2 Likes
Please explain what do you mean by “vh”?
Hey @oxfn welcome to the forums.
vh is just a unit. See also: