How can I set custom datetime pattern on Bokeh hover formatter?

Question

I'm trying to plot some values respect to the time using a line plot with Bokeh. My issue came when I tried to add a hover that shows the concrete value at some point of the plot.

I want to show a value, time data (it works fine), but I think a yyyy-mm-dd is imprecise for my purpose, so I want to redefine that pattern to add hours and minutes.

My code is something like that (you can download as a notebook here ):

from datetime import datetime, timedelta

from bokeh.plotting import figure, show
from bokeh.models import HoverTool

import pandas as pd
import numpy as np


today = datetime.today()

date_range = pd.date_range(today, today + timedelta(days=1),
                           freq=timedelta(minutes=15))
values = np.random.randint(-10, 10, size=len(date_range)).cumsum()
data = pd.DataFrame({'date': date_range, 'value': values})


hover = HoverTool(tooltips=[('value',   '@value'), ('date', '@date{%F}')],
                  formatters={'date': 'datetime'})

plt = figure(x_axis_type='datetime', tools=[hover])

plt.line(x='date', y='value', source=data)

show(plt)

The output is like that:

So my question is as follows:

Can anyone explain me how to modify the datetime format pattern on the hover?

Answer 1

You can add the time in hours and minutes by adding %H:%M to @date , like this:

hover = HoverTool(tooltips=[('value',   '@value'), ('date', '@date{%F %H:%M}')],
                  formatters={'date': 'datetime'})

The scales are described in the DatetimeTickFormatter documentation.

Answer 2

For supplyment： bokeh version 2.4.1

• 1): Just put "@" in formatters :

hover = HoverTool(tooltips=[('value',   '@value'), ('date', '@date{%F}')],
                  formatters={'@date': 'datetime'})

------------line------------------

• 2): You can supply a custom HTML template for a tooltip: link:boke org guid

hover = HoverTool(
    tooltips="""
            <div>
                <h3>@date{%F}</h3>
                <div>
                    <strong>value: </strong>
                    <span style="font-size: 30px; font-weight: bold; color: #696;">@value</span>
                </div>
            </div>
            """,
    formatters={'@date': 'datetime'},
    mode='vline'
)