Bokeh Hovertool Data from Separate Columns

Question

I am displaying a 100% stacked bar chart in Bokeh to show the percentage of a category, here (A,B). The categories A,B... will represent the top x categories of a dataset so their categories will not be the same for each row. One row could be cats, dogs. The next could be from cats, birds. So I have another set of columns [A_label]... to display those categories. The hovertool currently displays the column name and value i.e. [A_perc : 0.500]. But I would like it to display the label and the actual value, [cats: 1]. Is there a way to accomplish this with the hovertool?

from bokeh.plotting import figure
from bokeh.io import show
from bokeh.palettes import magma
import pandas as pd

data = pd.DataFrame(
    {
        'entries' : ['0','1','2','3'],
        'A_perc' : [1,0.5,0.2,0],
        'B_perc' : [0,0.5,0.8,1],
        'A_vals' : [2,1,2,0],
        'B_vals' : [0,1,8,1],
        'A_label' : ['cats', 'dogs', 'birds', 'cows'],
        'B_label' : ['dogs', 'birds', 'mice', 'deer']
    }
)

p = figure(
    x_range=['0','1','2','3'], 
    plot_height=400, 
    plot_width=650, 
    toolbar_location=None, 
    background_fill_alpha=0.0,
    background_fill_color = None,
    border_fill_color = None,
    outline_line_color = None,
    tools="hover", 
    tooltips="$name: @$name"
)

colors = magma(2)
p.vbar_stack(
    ['A_perc','B_perc'], 
    x='entries', 
    width=0.9, 
    color=colors, 
    source=data, 
    legend_label=['A_perc','B_perc'], 
)

show(p)

mosc9575 mosc9575 · Accepted Answer · 2020-12-27T10:35:13

This is possible using a custom hovertool. Just replace one line in the definition of the figure.

# tooltips="$name: @$name" 
tooltips=TOOLTIPS

and add some HTML right befor the definition of the fiugre.

TOOLTIPS = """
    <div>
        <div>
            <span style="font-size: 12px; color: #05ABFF;">@A_label:</span>
            <span style="font-size: 12px; color: #000;">@A_vals</span>
        </div>
        <div>
            <span style="font-size: 12px; color: #05ABFF;">@B_label:</span>
            <span style="font-size: 12px; color: #000;">@B_vals</span>
        </div>
    </div>
"""

Make sure you are using the (correct) column names which are given with the source inside the div-tags.

Comment: This solutions shows always both absolut values (A and B). So the tooltip has always two entries.

To get further information read the documentation about tooltips.

Complete Example

from bokeh.plotting import figure, output_notebook
from bokeh.io import show
from bokeh.palettes import magma
import pandas as pd
output_notebook()

data = pd.DataFrame(
    {
        'entries' : ['0','1','2','3'],
        'A_perc' : [1,0.5,0.2,0],
        'B_perc' : [0,0.5,0.8,1],
        'A_vals' : [2,1,2,0],
        'B_vals' : [0,1,8,1],
        'A_label' : ['cats', 'dogs', 'birds', 'cows'],
        'B_label' : ['dogs', 'birds', 'mice', 'deer']
    }
)

TOOLTIPS = """
    <div>
        <div>
            <span style="font-size: 12px; color: #05ABFF;">@A_label:</span>
            <span style="font-size: 12px; color: #000;">@A_vals</span>
        </div>
        <div>
            <span style="font-size: 12px; color: #05ABFF;">@B_label:</span>
            <span style="font-size: 12px; color: #000;">@B_vals</span>
        </div>
    </div>
"""

p = figure(
    x_range=['0','1','2','3'], 
    plot_height=400, 
    plot_width=650, 
    toolbar_location=None, 
    background_fill_alpha=0.0,
    background_fill_color = None,
    border_fill_color = None,
    outline_line_color = None,
    tooltips=TOOLTIPS,
)

colors = magma(2)
p.vbar_stack(
    ['A_perc','B_perc'], 
    x='entries', 
    width=0.9, 
    color=colors, 
    source=data, 
    legend_label=['A_perc','B_perc'], 
)

show(p)

Output

Bokeh Hovertool Data from Separate Columns

1 Answers