from bokeh.plotting import figure, show p = figure(width=400, height=400) p.scatter([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5) show(p)
Bokeh makes charts for web browsers. You describe a plot in Python, and Bokeh's JavaScript library, BokehJS, draws it with a toolbar for panning, zooming and saving. People use it for dashboards, reports and charts that need hover tooltips or linked views. This page is an online Bokeh compiler: the code runs in your browser, so you can try it without installing anything. Run the example first, then paste any snippet below into a new cell to try it.
figure(width=400, height=400) creates a 400 by 400 pixel plot with the
default tools: pan, wheel zoom, box zoom, save, reset and help.
p.scatter() adds a marker for each x, y pair. The marker is a circle by
default, and size=20 is its diameter in screen pixels. color="navy"
sets both the fill and the outline, and alpha=0.5 makes both half
transparent. show(p) displays the plot.
Call a glyph method such as line() once per series. legend_label adds
the series to the legend, and x_axis_label and y_axis_label name the
axes:
from bokeh.plotting import figure, show
weeks = [1, 2, 3, 4, 5, 6]
p = figure(title="Weekly signups", x_axis_label="Week", y_axis_label="Signups",
width=600, height=350)
p.line(weeks, [10, 14, 13, 18, 22, 25], legend_label="2025", line_width=2)
p.line(weeks, [8, 9, 12, 15, 15, 19], legend_label="2024", line_width=2,
color="orange", line_dash="dashed")
p.legend.location = "top_left"
show(p)
Put the data in a ColumnDataSource and pass column names instead of
lists. tooltips adds a hover tool, and each @name in it refers to a
column. ColumnDataSource(df) accepts a pandas DataFrame as well:
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure, show
source = ColumnDataSource(data={
"product": ["Tea", "Coffee", "Juice", "Water"],
"price": [2.5, 3.0, 4.0, 1.0],
"sold": [120, 340, 80, 200],
})
p = figure(x_axis_label="Price", y_axis_label="Units sold",
tooltips=[("Product", "@product"), ("Price", "@price"), ("Sold", "@sold")])
p.scatter("price", "sold", size=15, source=source)
show(p)
Passing a list of names as x_range gives a categorical axis. vbar()
draws the bars, y_range.start = 0 starts the y axis at zero, and
toolbar_location=None hides the toolbar:
from bokeh.plotting import figure, show
fruits = ["Apples", "Pears", "Plums", "Grapes", "Cherries"]
counts = [5, 3, 4, 2, 6]
p = figure(x_range=fruits, height=350, title="Fruit counts", toolbar_location=None)
p.vbar(x=fruits, top=counts, width=0.8)
p.y_range.start = 0
show(p)
row(), column() and gridplot() from bokeh.layouts arrange several
plots. x_range=left.x_range gives both plots the same x range, so
panning or zooming one moves the other. show() takes the layout just as
it takes a single plot:
from bokeh.layouts import row
from bokeh.plotting import figure, show
x = list(range(-10, 11))
left = figure(width=300, height=300, title="x²")
left.line(x, [v ** 2 for v in x])
right = figure(width=300, height=300, title="x³", x_range=left.x_range)
right.line(x, [v ** 3 for v in x], color="firebrick")
show(row(left, right))
plot_width and plot_height. Use width and height:
older code fails with AttributeError: unexpected attribute 'plot_width'.p.circle(x, y, size=10) is deprecated since Bokeh 3.4 and prints a
warning. Use p.scatter(), as the example does.save(p, "plot.html", resources=CDN, title="My plot") writes the plot
as a standalone HTML file that loads BokehJS from Bokeh's CDN. Import
save from bokeh.plotting and CDN from bokeh.resources; without
resources and title, it warns and uses those defaults. Files your
code saves appear in the sidebar's Data tab.