How to use CustomJSHover to add tooltips with different formatters

Community Support
3

Thank you for your answer! With your information, I now managed to add a second shifted series to the hover tooltip derived from an existing series.

For later reference, I add the adapted minimal example here:

from bokeh.plotting import figure, output_file, show
from bokeh.models.glyphs import Line
from bokeh.models import ColumnDataSource, HoverTool, CustomJSHover

x = [11, 12, 13, 14, 15]
y = [6, 7, 2, 4, 5]
source = ColumnDataSource(dict(x=x, y=y))

output_file("lines.html")

p = figure(x_axis_label='x', y_axis_label='y')
l = Line(x='x', y='y')
p.add_glyph(source, l)

offset = -10
x_custom = CustomJSHover(
    args=dict(offsetSource=ColumnDataSource(dict(offset=[offset]))),
    code="""
        var numFormatter = Bokeh.require('@bokehjs/core/util/templating').DEFAULT_FORMATTERS.numeral;
        var formatSplit = format.split(':');
        if (formatSplit.length == 2 && formatSplit[0] == 'withOffset') {
            return numFormatter(special_vars.data_x + offsetSource.data.offset[0], formatSplit[1], special_vars);
        } else {
            return numFormatter(special_vars.data_x, format, special_vars)
        }
""")

p.add_tools(HoverTool(
    tooltips=[
        ( 'absolute_time','@x{0.000}' ),
        ( 'relative_time','@x{withOffset:0.000}' ),
    ],
    formatters={"@x": x_custom}
))

show(p)

A note on the use of Bokeh.require() from the Bokeh 2.0.0 release notes:

The require() function [i]s not available from CustomJS anymore. It exposed the underlying module system, which should not be used by general users. Use APIs exposed on Bokeh object or (as a last resort), use Bokeh.require() .