Spans and HoverTool

Hi,

I have this plot:

from bokeh.plotting import ColumnDataSource, figure, show
from bokeh.io import output_notebook
from bokeh.models import HoverTool, PanTool, WheelZoomTool, ResetTool, Span

output_notebook()

p = figure(title='Example')

p.tools = [
    HoverTool(),
    PanTool(), 
    ResetTool(),
    WheelZoomTool(),
]
p.toolbar.active_scroll = p.tools[-1] 

country = 'Italy'
dset = datasets[country]
s0 = ColumnDataSource(dict(x=range(10), y=[ x**2 for x in range(10)]))
p.line('x', 'y', color='blue', source=s0)

span = Span(location=5, dimension='height', line_color='red', line_width=3)
p.add_layout(span)
show(p)

But it looks the HoverTool doesn’t show any information for the vertical span, is there any way to add it? Also how can I highlight the red vertical span on hever?

Thanks

HoverTool works only for glyphs, and Span is a layout. You can create a glyph instead of the span, although you can’t really have its dimension set to height like that.

We should really consider making a new API method with a better name. add_annotation is a bit verbose but certainly better than add “layout”

1 Like

I was trying to display a COVID plot of infections and at the same time displaying some “remarkable” event (eg. date of the first infection, date of the lockdown): https://cavallinux.org/beta/average-covid-trend-italy.html.
Maybe I can replace the vertical bars with “dot/circles”.

Is there any reason to allow panning on a chart like this? If not you can use p.line or p.segment or p.multi_line instead of a Span annotation. Or even if so, you can just make those lines bigger than the default ranges.

If a Span is necessary or preferred for your application, the following workaround might be usable.

Create a glyph such as a circle in addition to your span and place it at the same x- coordinate. Set the glyph’s alpha(s) to 0.000 so that it is invisible. Attach a HoverTool to the glyph’s renderer, with the hit-test mode set to vline so that whenever the mouse is at the same x-coordinate (i.e. vertical line), the hovertool activates.

1 Like

Hi _jm,

I’m pretty new to bokeh, how do "Attach a HoverTool to the glyph’s renderer, with the hit-test mode set to vline"?

Thanks

Thanks, I’m new to bokeh and still wrapping my head around all the concepts.

@cav71 General documentation is here:

https://coronavirus.jhu.edu/data/animated-world-map

Specifically you can probably set:

p.hover.mode = "vline"

with the code you already have.

@_jm that is a clever solution I had never thought of!