Adding Widgets

Bokeh ships a set of interactive widgets - sliders, buttons, dropdowns, checkboxes, text inputs - that can drive plots. You create a widget, place it in a layout next to your plots, and register a callback that runs when the user changes it. This is the core of interactive dashboards.

Slider Driving a Plot

import numpy as np
from bokeh.plotting import figure
from bokeh.models import Slider
from bokeh.layouts import column

x = np.linspace(0, 10, 200)

p = figure(title="Sine wave")
line = p.line(x, np.sin(x), line_width=2, color="#5b8ff9")

slider = Slider(start=0, end=5, value=1, step=0.1, title="Frequency")

def update():
    line.y = np.sin(slider.value * x)

slider.on_change("value", update)
show(column(slider, p))

Common Widgets

Combining Widgets

from bokeh.models import Select, Button

select = Select(options=["daily", "weekly"], value="daily", title="Granularity")
reset = Button(label="Reset", button_type="default")

def refresh():
    # reload data per selected granularity and update the CDS
    source.data = load_data(select.value).to_dict()

select.on_change("value", refresh)
reset.on_click(lambda: source.data.load_full())

Laying Out Widgets and Plots

from bokeh.layouts import column, row

controls = column(slider, select, reset, width=220)
layout = row(controls, p, sizing_mode="stretch_both")
show(layout)

Summary

Add interactivity with Bokeh widgets: Slider, Select, CheckboxGroup, Button, TextInput, ColorPicker, and more. Register on_change/on_click callbacks that update your ColumnDataSource or glyph properties, and arrange controls beside plots with row/column layouts. The callback - update-data pattern is the same whether the app runs client-side or on the Bokeh server.