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.