BokehJS HoverTool apply to selective glyphs with names property

172 views Asked by At

When setting the names property for HovertTool in BokehJS 0.13 and the name property of glyphs the HoverTool should only be visible for glyphs with matching names as stated in the documentation. When setting the names property of the HoverTool no hover tool is shown at all, also for glyphs with matching names.

Here is a minimal example for which the hover tool will not be shown for the first circle which has a matching name property.

When setting the names property only the first circle should have a hover tool, however the hover tool is disabled for both circles.

let plot = Bokeh.Plotting.figure({
    tools: [
        new Bokeh.HoverTool({
            names: ['A'], # HoverTool will not be shown unless this line is deleted
            tooltips: [
                ['value', '@value'],
            ],
        }),
    ],
    x_range: [0,100],
    y_range: [0, 100],
});

plot.circle({
    x: 25, y: 50, radius: 20, 
    fill_color: '#FF0000', name: 'A',
    source: new Bokeh.ColumnDataSource({data: { 'value': [42] }}),
});

plot.circle({
    x: 75, y: 50, radius: 20,
    fill_color: '#00FF00', name: 'B',
    source: new Bokeh.ColumnDataSource({data: { 'value': [42] }}),
}):

How would I make the hover tool only show for the first circle in BokehJS 0.13?

In general, how to selectively show the hover tool in BokehJS?

1

There are 1 answers

0
Mark wijkhuizen On

With help from @bigreddot the problem is solved by updating to BokehJS 2.4.2 and using the renderers property instead of the names property which will be removed from BokehJS 3.

The following code shows only thea HoverTool for the first circle.

const hovertool = new Bokeh.HoverTool({
    tooltips: [
        value', '@value'],
    ],
});

let plot = Bokeh.Plotting.figure({
    tools: [
        hovertool,
    ],
    x_range: [0,100],
    y_range: [0, 100],
});

const circle_a = plot.circle({
    x: 25, y: 50, radius: 20, 
    fill_color: '#FF0000',
    source: new Bokeh.ColumnDataSource({data: { 'value': [42] }}),
});
// Only add circle_a to the renderers, HoverTool will not be shown for the second circle!
hovertool.renderers = [circle_a];

plot.circle({
    x: 75, y: 50, radius: 20,
    fill_color: '#00FF00',
    source: new Bokeh.ColumnDataSource({data: { 'value': [42] }}),
}):