Skip main navigation

Advanced Layouts

Learn more about advanced layouts.

Now that we know how to create a layout using a different combination of rows and columns, let’s move on to understanding how to interact with the plot. Let’s explore the advanced features of the layout, such as widgets, size, and stretch.


Widgets equip you with easy access to information without requiring you to open the page that administers this information. If you wish to create an interactive plot, you might want to add widgets to a graph (for instance: sliders, select menus, and buttons, etc.).

Consider this example: The weather widget, which provides you with a quick view of the temperature throughout the day without opening the weather application.


Sometimes we don’t know the size of the plot that we would require in pixels. It can be useful to have properties that expand to fill up the horizontal and/or the vertical space available to it. In such cases, we can specify a sizing mode instead of specifying a width/height when creating the figure using the sizing_mode keyword argument.


Here, we will not use the gridplot function since it cannot be laid out as a plot. Instead, we will use the layout function, which supports mixing widgets and plots.


Let’s create a figure using sizing_mode to stretch_width


Demonstration: Sizing the layout


Step 1


Import layout from ‘bokeh.layouts’.




from bokeh.layouts import layout


Step 2


Set the sizing of the plot using ‘sizing_mode’.




wide_square_plot = figure(sizing_mode="stretch_width", plot_height=figure_height)
wide_square_plot.square([0], [0], size=20)


Step 3


Next, plot it in a grid on its own at the top, and two smaller plots underneath.




l = layout([
 [circle_plot, triangle_plot]




The ‘sizing_mode’ keyword argument can also be used with the layout function to stretch or size the entire layout.


Consider this example: A sizing mode of ‘stretch_both’ to resize the whole layout as the browser window resizes.




l = layout([
 [circle_plot, triangle_plot]
], sizing_mode="stretch_both")

Notice the layout is stretched to fit.

What do you observe?

When you used the sizing and stretching programs to change the layout of your visualisation on Bokeh on your Jupyter Notebook, what changes did you observe in your output?


This article is from the free online

Data Visualisation with Python: Bokeh and Advanced Layouts

Created by
FutureLearn - Learning For Life

Reach your personal and professional goals

Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.

Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.

Start Learning now