\
**Category:** Dash Python\
**Created:** [January 27, 2021, 9:56pm UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418 "2021-01-27T21:56:38Z")\
**Posts on this page:** 15\
**Page:** 1
**Author:**  [@twessels](https://community.plotly.com/u/twessels)\
**Post date:** [January 27, 2021, 9:56pm UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/1 "2021-01-27T21:56:38Z")
Hello; How do you update an html.H1 with a callback? I want to update UTC time every 5 seconds at the top of the web app.
I am updating a dcc.Graph with callback successfully. So I have a working example but it’s not translating to html.H1. It seems it wants it to be done differently.
Any examples?
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [January 27, 2021, 10:13pm UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/2 "2021-01-27T22:13:43Z")
Hi @twessels
With the output of the callback **my-html\_H1´, 'children’**
The input could be a dcc.Interval.
---
**Author:**  [@twessels](https://community.plotly.com/u/twessels)\
**Post date:** [January 31, 2021, 1:37am UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/3 "2021-01-31T01:37:55Z")
> [@Eduardo](#):
>
> With the output of the callback **my-html\_H1´, 'children’**
Thank you. I tried this but I’m unclear about the syntax. I think I get the callback output…seems the same as the dcc.Graph example but swap out figure for children and change the id.
But what does the html.H1(‘How to Make this text change via update’) convert to?
html.H1(id=myh1 (‘How to Make this text change via update’) ) doesn’t work. Where does the id go? I tried wrapping it in its’ own div.
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [January 31, 2021, 2:27am UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/4 "2021-01-31T02:27:30Z")
I’m not sure if I understand your question.
Suppose you have:
```auto
html.H1(“This is the first Title”, id=“my_H1”),
```
The output will be: (Output(“my\_H1”, “children”),
And the return of the callback will be:
```auto
return “This is the Last Title”
```
---
**Author:**  [@twessels](https://community.plotly.com/u/twessels)\
**Post date:** [January 31, 2021, 2:36am UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/5 "2021-01-31T02:36:38Z")
We’re getting closer… I have current UTC time in a variable called utc\_current. I want to update html.H1 to be utc\_current.
Can you pass a variable to html.H1 or maybe that is not supported?
app.layout = html.Div([
html.H1(‘This is H1’, current\_utc, id=‘my\_h1’),
dcc.Interval(
id=‘interval\_component’,
disabled=False,
interval=5\*1000, # 10 seconds
n\_intervals=0,
# max\_intervals=-1, # -1 goes on forever no max
),
], )
@app.callback(Output(‘my\_h1’, ‘children’),
Input(‘interval\_component’, ‘n\_intervals’))
def update\_h1():
current\_utc = datetime.datetime.utcnow().strftime(’%H:%M:%S %Y-%m-%d’)
return current\_utc
---
**Author:**  [@twessels](https://community.plotly.com/u/twessels)\
**Post date:** [January 31, 2021, 2:44am UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/6 "2021-01-31T02:44:29Z")
maybe the return should be…
return f’{utc\_current}’
What goes in the html.H1 to accept utc\_current?
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [January 31, 2021, 2:55am UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/7 "2021-01-31T02:55:21Z")
Suppose you have
utc\_current = “18:06:02”
html.H1(utc\_current, id=‘my\_h1’),
In the callback you update the time
utc\_current = “18:25:09”
```
return utc_current
```
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [January 31, 2021, 2:56am UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/8 "2021-01-31T02:56:09Z")
The children is the variable in this case.
---
**Author:**  [@twessels](https://community.plotly.com/u/twessels)\
**Post date:** [January 31, 2021, 3:06am UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/9 "2021-01-31T03:06:41Z")
Appreciate you help on this…I’m so close…
If I put the variable utc\_current in the html.H1 it complains that it’s not defined, no global exists. If I also add it to the function associated with the callback it fails.
I think we’re missing some kind of variable in the htm…H1 piece…using return utc\_current at the end of the function and ‘children’ in the html.H1 statement isn’t working.
If I want html.H1 to be UTC time and be updated by dcc.Interval, callback and a function how would I do that?
---
**Author:**  [@twessels](https://community.plotly.com/u/twessels)\
**Post date:** [January 31, 2021, 3:11am UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/10 "2021-01-31T03:11:10Z")
I’m starting to think you can’t do this with html.H1 maybe. Confused.
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [January 31, 2021, 3:53am UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/11 "2021-01-31T03:53:00Z")
Hi @twessels
You where so close:
```auto
import dash
from dash.dependencies import Input, Output
import dash_table
import dash_html_components as html
import datetime
import dash_core_components as dcc
app = dash.Dash( __name__ )
app.layout = html.Div([
html.H1( id='my_h1'),
dcc.Interval(id='interval_component',
disabled=False,
interval=5*1000, # 10 seconds
n_intervals=0,
# max_intervals=-1, # -1 goes on forever no max
),
], )
@app.callback(Output('my_h1', 'children'),
Input('interval_component', 'n_intervals'))
def update_h1(n):
current_utc = datetime.datetime.utcnow().strftime('%H:%M:%S %Y-%m-%d')
return current_utc
if __name__ == ' __main__':
app.run_server(debug=True)
```
---
**Author:**  [@twessels](https://community.plotly.com/u/twessels)\
**Post date:** [February 1, 2021, 7:44pm UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/12 "2021-02-01T19:44:54Z")
This worked! I think I wasn’t passing the n into the function to have the interval trigger the callback. Ug.
Thank you Eduardo! You are a champion!
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [February 1, 2021, 7:53pm UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/13 "2021-02-01T19:53:51Z")
Glad it works.
Yes, you forgot to assign a name to the input received, it happens because in this case the input value is not necessary to build the output.
---
**Author:**  [@twessels](https://community.plotly.com/u/twessels)\
**Post date:** [February 1, 2021, 8:21pm UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/14 "2021-02-01T20:21:48Z")
How do you convert unix time to make the x axis human readable? Ploty seems to think it’s not time and just numbers so the x axis shows up as 1.5B instead of a human readable date.
I’ve tried converting the unix time, which I can do and print out to terminal correctly. But plotly/dash seem to disagree.
Is there a standard way or built in way to deal with this?
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [February 1, 2021, 8:55pm UTC](https://community.plotly.com/t/update-html-h1-with-a-callback/49418/15 "2021-02-01T20:55:29Z")
Sorry I can’t help.
I’m not much familiar with Plotly.
Ask the question tagging “Plotly”