Adding HoverTool tips to a bokeh Stacked Area chart

Question

Using bokeh to create a stacked area chart, I can't work out how to add hover tooltips that will show up when the cursor is over different points within the areas. The only examples I've seen are for stacked line charts, which don't seem to work the same way.

If I have:

from bokeh.models import ColumnDataSource
from bokeh.plotting import figure, show

data = {
    "months": [date(2019, 5, 1), date(2019, 6, 1), date(2019, 7, 1), date(2019, 8, 1)],
    "dogs": [7, 5, 12, 8],
    "cats": [25, 20, 10, 7],
}

column_data = ColumnDataSource(data=data)

p = figure(
    min_width=500,
    plot_height=300,
    sizing_mode="stretch_width",
    toolbar_location=None,
    tools="",
    x_axis_type="datetime",
)

p.varea_stack(
    ["dogs", "cats"],
    x="months",
    color=["#ff0000", "#00ff00"],
    source=column_data,
)

show(p)

Which creates a chart like this:

What should I do to add HoverTool tips?

grader grader · Accepted Answer · 2020-03-27T23:34:24

You can work around this by overlaying a stacked line chart. The tooltip does work for stacked line charts and will appear when hovering over the line bounding the top of each area.

p = figure(
    min_width=500,
    plot_height=300,
    sizing_mode="stretch_width",
    toolbar_location=None,
    tools="",
    x_axis_type="datetime",
)

p.varea_stack(
    ["dogs", "cats"],
    x="months",
    color=["#ff0000", "#00ff00"],
    source=column_data,
)

p.vline_stack(
    ["dogs", "cats"],
    x="months",
    color=["#ff0000", "#00ff00"],
    source=column_data,
)

Adding HoverTool tips to a bokeh Stacked Area chart

2 Answers