First steps 6: Combining plots

In the previous first steps guides, you created individual plots.

In this section, you will combine several plots into different kinds of layouts.

Creating rows, columns, and grids

The easiest way to combine individual plots is to assign them to rows or columns.

For example:

To combine several plots into a horizontal row layout, you first need to import row. Then use the row() function when calling show():

from bokeh.layouts import row
from bokeh.plotting import figure, show

# prepare some data
x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create three plots with one renderer each
s1 = figure(width=250, height=250, background_fill_color="#fafafa")
s1.circle(x, y0, size=12, color="#53777a", alpha=0.8)

s2 = figure(width=250, height=250, background_fill_color="#fafafa")
s2.triangle(x, y1, size=12, color="#c02942", alpha=0.8)

s3 = figure(width=250, height=250, background_fill_color="#fafafa")
s3.square(x, y2, size=12, color="#d95b43", alpha=0.8)

# put the results in a row and show
show(row(s1, s2, s3))

To display several plots in a vertical column layout, use the column() function instead.

A more flexible way to arrange elements in Bokeh is to use the gridplot() function.

See also

For more information on row(), column(), and gridplot(), see Creating layouts in the user guide.

Defining sizing behavior

You can use the functions row(), column(), and gridplot() with additional arguments to define how Bokeh scales the individual plots. See sizing_mode for a list of all sizing modes that Bokeh supports.

For example: To make all plots in a row responsively fill the available width of the browser window, assign scale_width to sizing_mode:

from bokeh.layouts import row
from bokeh.plotting import figure, show

# prepare some data
x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create three plots with one renderer each
s1 = figure(width=250, height=250, background_fill_color="#fafafa")
s1.circle(x, y0, size=12, color="#53777a", alpha=0.8)

s2 = figure(width=250, height=250, background_fill_color="#fafafa")
s2.triangle(x, y1, size=12, color="#c02942", alpha=0.8)

s3 = figure(width=250, height=250, background_fill_color="#fafafa")
s3.square(x, y2, size=12, color="#d95b43", alpha=0.8)

# put the results in a row that automatically adjusts
# to the browser window's width
show(row(children=[s1, s2, s3], sizing_mode="scale_width"))

See also

For more information on sizing modes, see Sizing modes in the user guide.