# How to remove initial blank chart when loading

**URL:** <https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464>\
**Category:** Dash Python\
**Created:** [October 26, 2020, 2:36am UTC](https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464 "2020-10-26T02:36:08Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![pythonnewbie](https://avatars.discourse-cdn.com/v4/letter/p/ce7236/32.png) [@pythonnewbie](https://community.plotly.com/u/pythonnewbie)\
**Post date:** [October 26, 2020, 2:36am UTC](https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464/1 "2020-10-26T02:36:08Z")

</div>

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!

 ![Screenshot 2019-07-25 at 18.15.27](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/f/fd3fc069639aa8efd6cf1dae62c584f813aaa3c1.png)

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [October 27, 2020, 3:46am UTC](https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464/2 "2020-10-27T03:46:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![melz1981](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@melz1981](https://community.plotly.com/u/melz1981)\
**Post date:** [May 11, 2023, 1:08am UTC](https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464/3 "2023-05-11T01:08:58Z")

</div>

hello, I also need to remove this initial blank chart. any suggestions?

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [May 11, 2023, 6:43am UTC](https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464/4 "2023-05-11T06:43:41Z")

</div>

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:

```python
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

---

<div class="post-metadata">

**Author:** ![melz1981](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@melz1981](https://community.plotly.com/u/melz1981)\
**Post date:** [May 11, 2023, 7:58am UTC](https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464/5 "2023-05-11T07:58:20Z")

</div>

> 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:

 ![initial-chart](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/2/3/232043a73102b2b5a4c661e9b43ebbe2de5c02c9.jpeg)

after load:

 ![final-chart](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/f/4f10c919b3abe26c4d6ed0eba75e74ea9fbe4d4c.jpeg)

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [May 11, 2023, 8:12am UTC](https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464/6 "2023-05-11T08:12:37Z")

</div>

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

See also:

> **[W3Schools online HTML editor](https://www.w3schools.com/css/tryit.asp?filename=trycss_display)**
>
> The W3Schools online code editor allows you to edit code and view the result in your browser

In Dash you will have to change to:

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

Full example:

```python
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:

```python
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)

```

---

<div class="post-metadata">

**Author:** ![melz1981](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@melz1981](https://community.plotly.com/u/melz1981)\
**Post date:** [May 11, 2023, 8:20am UTC](https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464/7 "2023-05-11T08:20:34Z")

</div>

hello, Thanks I will try this and let you know how it goes.

---

<div class="post-metadata">

**Author:** ![melz1981](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@melz1981](https://community.plotly.com/u/melz1981)\
**Post date:** [May 11, 2023, 8:34am UTC](https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464/8 "2023-05-11T08:34:52Z")

</div>

hello, it works. thank you so much

---

<div class="post-metadata">

**Author:** ![martin2097](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/martin2097/32/23538_2.png) [@martin2097](https://community.plotly.com/u/martin2097)\
**Post date:** [May 11, 2023, 11:51am UTC](https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464/9 "2023-05-11T11:51:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![oxfn](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/oxfn/32/28523_2.png) [@oxfn](https://community.plotly.com/u/oxfn)\
**Post date:** [July 15, 2024, 10:37am UTC](https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464/10 "2024-07-15T10:37:37Z")

</div>

Please explain what do you mean by “vh”?

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [July 15, 2024, 11:59am UTC](https://community.plotly.com/t/how-to-remove-initial-blank-chart-when-loading/46464/11 "2024-07-15T11:59:44Z")

</div>

Hey @oxfn welcome to the forums.

`vh` is just a unit. See also:

> **[W3Schools.com](https://www.w3schools.com/cssref/css_units.php)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.