Plotly hovertemplate date/time format

đź“Š Plotly Python
1

I have a plot of water surface elevations (Y-axis), and Date/Times (X-axis).

Is it possible to format the hovertemplate so as to display the Date and Time of the points as the cursor hovers over them?

Currently, I get the correct value of the points displayed, but I can’t find a suitable format for the Date Time values (hence the NaN’s)!

Hovertext_date
Hovertext_date1107Ă—517 38.4 KB

2

Hi @waldroj welcome to the forum! You can customize the hover information with a hovertemplate. Date formatting uses d3-time-formatting as explained in the tutorial.

3

Emmanuelle,

Thank you for getting back to me - I appreciate it.

I’m no fan of Plotly, but it seems to satisfy most of my needs most of the time.

To me, it is sadly lacking any documentation that makes sense (leaving it up to the user to muddle through on their own by trial and error after error after error).

Despite your advice, I was able to reach a solution that suits me! This involved my ditching the hovertemplate, converting my variables to strings, and using hovertext and hoverinfo.

Regards,
JW

Hovertext_date|690x402

4

Hi @waldroj, glad you found a solution - a hovertemplate is the most flexible way to control the hover information but for simple cases hovertext and hoverinfo work too.

There is surely room for improvement in the plotly documentation, as in any project, and it’s actually one of the best way to start contributing to open source software. Every release of plotly.py includes great contributions by community users improving or adding documentation examples, which is awesome. We’ve also worked a lot on the documentation during the last year, and our getting started tutorial includes links to must-read documentation explaining the most important concepts of plotly (how to create and update figures, how to style figures and set up layout options, etc.).

1 Like
5

Hi, as someone who had trouble finding the answer to this question too, I thought I’d mention that the actual answer is slightly hidden in the previous section of the documentation, as plotly uses a custom format where it performs d3-(number-)format if : is used as a delimiter and d3-time-format if | is used as a delimeter in the format string. One would probably find it if they read the documentation from start to finish, but when I was searching for hovertemplate I had trouble finding it without tracing it in the source code. I also see now that its mentioned in the docstring for hovertemplate.

For good measure here’s a minimal example:

import datetime
import plotly
import plotly.graph_objects as go
figure = go.Figure(
    data=[
        go.Scatter(
            x=[datetime.datetime(2020, 1, 1, 0, i) for i in range(1, 4)],
            y=[1, 3, 2],
            hovertemplate="%{x|%Y/%m/%d %H:%M:%S.%L} value: %{y}"
        )
    ]
)
plotly.offline.iplot(figure)

Side note, I’m not sure how one can improve the documentation if they can’t figure out how the code works in the first place. :wink:

4 Likes
6

azjps

Sorry for the late reply.

Thank you - your solution is exactly what I was looking for.

Regards,
waldroj

1 Like
7

Hi Emmanuelle,

I have to agree with OP, that the documentation for plotly is lacking. Considering this exact issue, I was dumbfounded that the documentation for hover events for plotly.js is just a tiny portion of what the same documentation for python is.

I.e. https://plotly.com/python/hover-text-and-formatting/#customizing-hover-text-with-a-hovertemplate
vs
https://plotly.com/javascript/hover-text-and-formatting/

On the js documentation page, searching for “|” results in … nothing. It doesn’t mention it at all. It is not very logical to start looking at the other docs for python, R, dash in the hope that more info can be found there.