Problem with CustomJSHover and `@$name{custom}` in `vbar_stack` and `area_stack` Glyphs

Hi there,

I’m trying to apply a customized JS hover formatter to the name field with the *_stack glyphs, and I can’t seem to figure it out. Notice that the same functionality works well for the x axis.

Here’s a toy-example

from bokeh.io import show
from bokeh.models import ColumnDataSource, HoverTool, CustomJSHover
from bokeh.plotting import figure

fruits = ['Apples', 'Pears', 'Nectarines', 'Plums', 'Grapes', 'Strawberries']
years = ["2015", "2016", "2017"]
colors = ["#c9d9d3", "#718dbf", "#e84d60"]

data = {'fruits' : fruits,
        '2015'   : [2, 1, 4, 3, 2, 4],
        '2016'   : [5, 3, 4, 2, 4, 6],
        '2017'   : [3, 2, 4, 4, 5, 3]}

source = ColumnDataSource(data=data)

hoverfrmtr = CustomJSHover(code='return "Hello " + value + "!";')
hovertool = HoverTool(
    tooltips=[('Year', '$name'),
        ('Fruit', "@fruits{custom}"),
        ('Value', "@$name{custom}")],
    formatters={
        "@fruits": hoverfrmtr, "@$name": hoverfrmtr,
        **{f'@{year}': hoverfrmtr for year in years}})

p = figure(x_range=fruits, height=350, title="Fruit Counts by Year",
           toolbar_location=None, tools=[hovertool])

renderers = p.vbar_stack(years, x='fruits', width=0.9, color=colors,
    source=source, legend_label=years, name=years)

show(p)

Here’s an example snapshot of the result.

image1018×594 35.4 KB

Notice that the “Value” tooltip does not use the custom formatter, and is printing “4th”. However, the fruit tooltip seems to work just fine and shows the “Hello Grapes!” example.

I’m not sure if this is a bug or just me missing out on a part of the documentation, but I also made a bug report at [BUG] Problem with CustomJSHover and `@$name{custom}` in `vbar_stack` and `area_stack` Glyphs · Issue #14182 · bokeh/bokeh · GitHub.

Thanks in advance for your help and response!

Sincerely, Ehsan

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.