Adding dates into a hovertemplate plotly

Question

I am very new to plotly and have run into some trouble formatting the hover info. I am trying to use the hovertemplate in order to provide specific text that I want, as opposed to whatever the graph auto formats to. I want to supply a list of dates, as well as a value and some additional text. However, when trying to supply a date it does not seem to format. I tried doing an exact example from plotly documentation that I will show below.

import plotly.graph_objs as go

fig = go.Figure()
fig.add_trace(
    go.Scatter(x=dict2['time'],
               y=dict2['2m_temp_prod'],
               mode='markers+lines',
               name='Sfc Temp',
               line=dict(color='red', width=4),
               hovertemplate='Day: %{2019-01-01|%A}'))

The hover text does not properly convert the date and instead reads Day: %{2019-01-01|%A}. Any ideas on how to fix this?

Edit: Here is a more workable example.

I load in some data from an xarray dataarray and transform it into a dictionary.

dict2

{'time': 0    2020-08-12 00:00:00
 1    2020-08-12 06:00:00
 2    2020-08-12 12:00:00
 3    2020-08-12 18:00:00
 4    2020-08-13 00:00:00
              ...        
 56   2020-08-26 00:00:00
 57   2020-08-26 06:00:00
 58   2020-08-26 12:00:00
 59   2020-08-26 18:00:00
 60   2020-08-27 00:00:00
 Name: time, Length: 61, dtype: datetime64[ns],
 '2m_temp_prod': 0     84.0
 1     74.0
 2     71.0
 3     82.0
 4     79.0
       ... 
 56    79.0
 57    70.0
 58    67.0
 59    82.0
 60    80.0
 Name: 2m_temp_prod, Length: 61, dtype: float64,
 '2m_temp_area': 0     84.0
 1     74.0
 2     70.0
 3     82.0
 4     80.0
       ... 
 56    79.0
 57    70.0
 58    67.0
 59    82.0
 60    80.0
 Name: 2m_temp_area, Length: 61, dtype: float64}

This data plots fine as a line plot, but the hovertext is wrong, as described above. I tried just copying the example date from the plotly documentation above, but ultimately I want to provide a list of string dates to be applied to the hovertext instead of the autogenerated hovertext. I would like the hovertext to say: Day: Tuesday. The code is supposed to take the date and only output the day of the week. In this case, Jan 1, 2019 was on a Tuesday. Plot for reference.

@EliTurasky Please share a data sample as described [here](https://stackoverflow.com/questions/63163251/pandas-how-to-efficiently-build-and-share-a-sample-dataframe/63163254#63163254) — vestland, Aug 11 '20 at 21:22
@rpanai I have once again edited the post. The comment you are looking for is at the end of the post. — Eli Turasky, Aug 12 '20 at 14:59
For reference, this is just an example for one date. Eventually I would like supply a list of dates, but figured I should get it working for just one date at this time. — Eli Turasky, Aug 12 '20 at 15:01

score 7 · Accepted Answer · answered Aug 12 '20 at 15:10

For hovertemplate the variables are x and y respectively

Data

import pandas as pd
import plotly.graph_objs as go
import numpy as np

n = 60
df = pd.DataFrame(
    {"time":pd.date_range(start="2020-08-12", freq="6H", periods=n),
     "2m_temp_prod":np.random.randint(low=65,high=85, size=n)})

Plot

Here I added few more things in hovertemplate as reference

fig = go.Figure()
fig.add_trace(
    go.Scatter(x=df['time'],
               y=df['2m_temp_prod'],
               mode='markers+lines',
               name='Sfc Temp',
               line=dict(color='red', width=4),
               hovertemplate="Date: %{x|%Y-%m-%d}<br>Day: %{x|%A}<br>Temp: %{y:.2f}"
              ))

Awesome, thanks. Didn't realize that the variable name was the one to be included inside the braces. — Eli Turasky, Aug 12 '20 at 15:15

Adding dates into a hovertemplate plotly

1 Answers1

Data

Plot