Configuring Plot Tools¶

Positioning the Toolbar¶

By default, Bokeh plots come with a toolbar above the plot. In this section you will learn how to specify a different location for the toolbar, or to remove it entirely.

The toolbar location can be specified by passing the toolbar_location parameter to the figure() function or to any bokeh.charts Chart function. Valid values are:

• "above"
• "below"
• "left"
• "right"

If you would like to hide the toolbar entirely, pass None.

Below is some code that positions the toolbar below the plot. Try running the code and changing the toolbar_location value.

from bokeh.plotting import figure, output_file, show

output_file("toolbar.html")

# create a new plot with the toolbar below
p = figure(plot_width=400, plot_height=400,
           title=None, toolbar_location="below")

p.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10)

show(p)

Note that the toolbar position clashes with the default axes, in this case setting the toolbar_sticky option to False will move the toolbar to outside of the region where the axis is drawn.

from bokeh.plotting import figure, output_file, show

output_file("toolbar.html")

# create a new plot with the toolbar below
p = figure(plot_width=400, plot_height=400,
           title=None, toolbar_location="below",
           toolbar_sticky=False)

p.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10)

show(p)

Specifying Tools¶

At the lowest bokeh.models level, tools are added to a Plot by passing instances of Tool objects to the add_tools method:

plot = Plot()
plot.add_tools(LassoSelectTool())
plot.add_tools(WheelZoomTool())

This explicit way of adding tools works with any Bokeh Plot or Plot subclass, such as Figure or Chart.

Tools can be specified by passing the tools parameter to the figure() function or to any bokeh.charts Chart function. The tools parameter accepts a list of tool objects, for instance:

tools = [BoxZoomTool(), ResetTool()]

Tools can also be supplied conveniently with a comma-separate string containing tool shortcut names:

tools = "pan,wheel_zoom,box_zoom,reset"

However, this method does not allow setting properties of the tools.

Finally, it is also always possible to add new tools to a plot by passing a tool object to the add_tools method of a plot. This can also be done in conjunction with the tools keyword described above:

plot = figure(tools="pan,wheel_zoom,box_zoom,reset")
plot.add_tools(BoxSelectTool(dimensions=["width"]))

Setting the Active Tools¶

Bokeh toolbars can have (at most) one active tool from each kind of gesture (drag, scroll, tap). By default, Bokeh will use a default pre-defined order of preference to choose one of each kind from the set of configured tools, to be active.

However it is possible to exert control over which tool is active. At the lowest bokeh.models level, this is accomplished by using the active_drag, active_scroll, and active_tap properties of Toolbar. These properties can take the following values:

• None — there is no active tool of this kind
• "auto" — Bokeh chooses a tool of this kind to be active (possibly none)
• a Tool instance — Bokeh sets the given tool to be the active tool

As an example:

# configure so that no drag tools are active
plot.toolbar.active_drag = None

# configure so that Bokeh chooses what (if any) scroll tool is active
plot.toolbar.active_scroll = "auto"

# configure so that a specific PolySelect tap tool is active
plot.toolbar.active_tap = poly_select

The default value for all of these properties is "auto".

Active tools can be specified by passing the these properties as keyword arguments to the figure() function or to any bokeh.charts Chart function. In this case, it is also possible to pass any one of the string names for, ease of configuration:

# configures the lasso tool to be active
plot = figure(tools="pan,lasso_select,box_select", active_drag="lasso_select")

Built-in Tools¶

from bokeh.plotting import figure, output_file, show

output_file("toolbar.html")

# Add hover to this comma-separated string and see what changes
TOOLS = 'box_zoom,box_select,crosshair,resize,reset'

# create a new plot with the toolbar below
p = figure(plot_width=400, plot_height=400, title=None, tools=TOOLS)

p.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10)
show(p)

from bokeh.plotting import figure, output_file, show
from bokeh.models import HoverTool, BoxSelectTool

output_file("toolbar.html")
TOOLS = [BoxSelectTool(), HoverTool()]

p = figure(plot_width=400, plot_height=400, title=None, tools=TOOLS)

p.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10)

show(p)

Setting Tool Visuals¶

Hover Tool¶

The hover tool is a passive inspector tool. It is generally on at all times, but can be configured in the inspector’s menu associated with the toolbar.

The hover tool displays informational tooltips whenever the cursor is directly over a glyph. The data to show comes from the glyph’s data source, and what is to be displayed is configurable through a tooltips attribute that maps display names to columns in the data source, or to special known variables.

Field names starting with “@” are interpreted as columns on the data source. Field names starting with “$” are special, known fields, e.g. $x will display the x-coordinate under the current mouse position. More information about those fields can be found in the HoverTool reference.

Basic Tooltips¶

The hover tool will generate a default “tabular” tooltip of field names and their associated values. These field names and values are supplied as a list of (field name, value) tuples. For instance, the tooltip list below on the left will produce the basic default tooltip below on the right:

hover.tooltips = [ ("index", "$index"), ("(x,y)", "($x, $y)"), ("radius", "@radius"), ("fill color", "$color[hex, swatch]:fill_color"), ("foo", "@foo"), ("bar", "@bar"), ]

Here is a complete example of how to configure and use the hover tool with default tooltip:

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

output_file("toolbar.html")

source = ColumnDataSource(
        data=dict(
            x=[1, 2, 3, 4, 5],
            y=[2, 5, 8, 2, 7],
            desc=['A', 'b', 'C', 'd', 'E'],
        )
    )

hover = HoverTool(
        tooltips=[
            ("index", "$index"),
            ("(x,y)", "($x, $y)"),
            ("desc", "@desc"),
        ]
    )

p = figure(plot_width=400, plot_height=400, tools=[hover],
           title="Mouse over the dots")

p.circle('x', 'y', size=20, source=source)

show(p)

Custom Tooltip¶

It is also possible to supply a custom tooltip template. To do this, pass an HTML string, with the Bokeh tooltip field name symbols wherever substitutions are desired. An example is shown below:

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

output_file("toolbar.html")

source = ColumnDataSource(
        data=dict(
            x=[1, 2, 3, 4, 5],
            y=[2, 5, 8, 2, 7],
            desc=['A', 'b', 'C', 'd', 'E'],
            imgs = [
                'http://bokeh.pydata.org/static/snake.jpg',
                'http://bokeh.pydata.org/static/snake2.png',
                'http://bokeh.pydata.org/static/snake3D.png',
                'http://bokeh.pydata.org/static/snake4_TheRevenge.png',
                'http://bokeh.pydata.org/static/snakebite.jpg'
            ]
        )
    )

hover = HoverTool(
        tooltips="""
        <div>
            <div>
                <img
                    src="@imgs" height="42" alt="@imgs" width="42"
                    style="float: left; margin: 0px 15px 15px 0px;"
                    border="2"
                ></img>
            </div>
            <div>
                <span style="font-size: 17px; font-weight: bold;">@desc</span>
                <span style="font-size: 15px; color: #966;">[$index]</span>
            </div>
            <div>
                <span style="font-size: 15px;">Location</span>
                <span style="font-size: 10px; color: #696;">($x, $y)</span>
            </div>
        </div>
        """
    )

p = figure(plot_width=400, plot_height=400, tools=[hover],
           title="Mouse over the dots")

p.circle('x', 'y', size=20, source=source)

show(p)

Controlling Level of Detail¶

Although the HTML canvas can comfortably display tens or even hundreds of thousands of glyphs, doing so can have adverse affects on interactive performance. In order to accommodate large-ish (but not enormous) data sizes, Bokeh plots offer “Level of Detail” (LOD) capability in the client.

The basic idea is that during interactive operations (e.g., panning or zooming), the plot only draws some small fraction of data points. This hopefully allows the general sense of the interaction to be preserved mid-flight, while maintaining interactive performance. There are four properties on Plot objects that control LOD behavior:

lod_factor¶

property type: lod_factor:Int

Decimation factor to use when applying level-of-detail decimation.

lod_interval¶

property type: lod_interval:Int

Interval (in ms) during which an interactive tool event will enable level-of-detail downsampling.

lod_threshold¶

property type: lod_threshold:Int

A number of data points, above which level-of-detail downsampling may be performed by glyph renderers. Set to None to disable any level-of-detail downsampling.

lod_timeout¶

property type: lod_timeout:Int

Timeout (in ms) for checking whether interactive tool events are still occurring. Once level-of-detail mode is enabled, a check is made every lod_timeout ms. If no interactive tool events have happened, level-of-detail mode is disabled.