# Cannot update figure using button

**URL:** <https://community.plotly.com/t/cannot-update-figure-using-button/27197>\
**Category:** Dash Python\
**Created:** [August 13, 2019, 9:27am UTC](https://community.plotly.com/t/cannot-update-figure-using-button/27197 "2019-08-13T09:27:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![chainster\_mike](https://avatars.discourse-cdn.com/v4/letter/c/b782af/32.png) [@chainster\_mike](https://community.plotly.com/u/chainster_mike)\
**Post date:** [August 13, 2019, 9:27am UTC](https://community.plotly.com/t/cannot-update-figure-using-button/27197/1 "2019-08-13T09:27:05Z")

</div>

I was trying to update a plot using a button as a trigger, but for some reason, the figure is not displayed. I reproduced the problem using the following example:

```python
import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)

app.layout = html.Div(
    [
        html.Div(dcc.Input(id="title", type="text")),
        html.Button("Submit", id="button", n_clicks=0),
        html.Div(dcc.Graph(id="bar_graph")),
    ]
)

@app.callback(
    dash.dependencies.Output("bar_graph", "figure"),
    [Input("button", "n_clicks")],
    [State("title", "value")],
)
def update_output(n_clicks, title):
    if n_clicks > 0:
        return {
            "data": [
                {"x": [1, 2, 3], "y": [4, 1, 2], "type": "bar", "name": "SF"},
                {"x": [1, 2, 3], "y": [2, 4, 5], "type": "bar", "name": u"Montréal"},
            ],
            "layout": {"title": title},
        }

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

```

and this is what I got:

 ![button_update_error](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/9f6a3475b97ae5f1e2afd34a938d90fd1bb3c6ae.png)

I am using:  
python = 3.7.0  
plotly = 4.0.0  
dash = 1.0.2  
dash\_core\_components = 1.0.0  
dash\_html\_components = 1.0.0

Thanks for your help!  
Mike

---

<div class="post-metadata">

**Author:** ![bala\_bala](https://avatars.discourse-cdn.com/v4/letter/b/96bed5/32.png) [@bala\_bala](https://community.plotly.com/u/bala_bala)\
**Post date:** [August 13, 2019, 11:34am UTC](https://community.plotly.com/t/cannot-update-figure-using-button/27197/2 "2019-08-13T11:34:32Z")

</div>

Use another platform…Like spyder or Pycharm… I executed the same program given above… And when i press the submit button,the figure is displayed!

 ![Screenshot%20from%202019-08-13%2017-00-49](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/90d02de94c537fcdf895aa316d72a65915d03ff1.png)

---

<div class="post-metadata">

**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\
**Post date:** [August 13, 2019, 7:09pm UTC](https://community.plotly.com/t/cannot-update-figure-using-button/27197/3 "2019-08-13T19:09:18Z")

</div>

Hey your code is good but the function returns nothing if `n_clicks` is 0. This implicitly returns `None` to the `figure` property of the graph which throws the error.

All you need is:

```auto
def update_output(n_clicks, title):
    if n_clicks > 0:
        return {
            "data": [
                {"x": [1, 2, 3], "y": [4, 1, 2], "type": "bar", "name": "SF"},
                {"x": [1, 2, 3], "y": [2, 4, 5], "type": "bar", "name": u"Montréal"},
            ],
            "layout": {"title": title},
        }
    return {}

```

and it works.

You can reproduce the error by explicitly returning `None`:

```auto
def update_output(n_clicks, title):
    if n_clicks > 0:
        return {
            "data": [
                {"x": [1, 2, 3], "y": [4, 1, 2], "type": "bar", "name": "SF"},
                {"x": [1, 2, 3], "y": [2, 4, 5], "type": "bar", "name": u"Montréal"},
            ],
            "layout": {"title": title},
        }
    return None

```

---

<div class="post-metadata">

**Author:** ![chainster\_mike](https://avatars.discourse-cdn.com/v4/letter/c/b782af/32.png) [@chainster\_mike](https://community.plotly.com/u/chainster_mike)\
**Post date:** [August 14, 2019, 12:38am UTC](https://community.plotly.com/t/cannot-update-figure-using-button/27197/4 "2019-08-14T00:38:35Z")

</div>

@russellthehippo You solution works! Thank you very very much, and really appreciate your explanation! Lesson learn here, as I thought I can be lazy for skipping one of the return.