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

Community Support
, ,
1

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.

image
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