How to Build Custom Plot Layouts#
The + operator of hvPlot and HoloViews lays plots out in rows of equal weight (see Lay out plots). This guide shows you how to build other arrangements, such as a wide plot above two smaller ones, a plot spanning several cells, tabs, or a plot next to a table, using Panel, which is installed with hvPlot.
import hvplot.pandas # noqa
import panel as pn
pn.extension('tabulator')
penguins = hvplot.sampledata.penguins("pandas")
stocks = hvplot.sampledata.stocks("pandas")
trend = stocks.hvplot.line(x='date', y='Apple', title='Apple', width=700, height=250)
bill = penguins.hvplot.scatter(
x='bill_length_mm', y='bill_depth_mm', by='species',
title='Bill dimensions', width=340, height=250,
)
mass = penguins.hvplot.hist(
y='body_mass_g', by='species', alpha=0.6,
title='Body mass', width=340, height=250,
)
Put a wide plot above two plots#
Nest a pn.Row in a pn.Column: the first row has one plot, the second has two.
pn.Column(
trend,
pn.Row(bill, mass),
)
Put a tall plot next to a stack of plots#
Nest a pn.Column in a pn.Row.
tall = penguins.hvplot.scatter(
x='flipper_length_mm', y='body_mass_g', by='species',
title='Size', width=340, height=500,
)
pn.Row(
tall,
pn.Column(bill, mass),
)
Make plots span cells of a grid#
Use pn.GridSpec to place plots on a grid and let them span several rows or columns. Make the plots responsive so that they fill their cells.
trend_r = stocks.hvplot.line(x='date', y='Apple', title='Apple', responsive=True)
bill_r = penguins.hvplot.scatter(
x='bill_length_mm', y='bill_depth_mm', by='species', title='Bill dimensions', responsive=True,
)
mass_r = penguins.hvplot.hist(
y='body_mass_g', by='species', alpha=0.6, title='Body mass', responsive=True,
)
flipper_r = penguins.hvplot.box(
y='flipper_length_mm', by='species', title='Flipper length', responsive=True,
)
size_r = penguins.hvplot.scatter(
x='flipper_length_mm', y='body_mass_g', by='species', title='Size', responsive=True,
)
grid = pn.GridSpec(sizing_mode='stretch_width', height=600)
grid[0, :] = trend_r
grid[1, 0:2] = bill_r
grid[1, 2] = mass_r
grid[2, 0] = size_r
grid[2, 1:3] = flipper_r
grid
Place a table next to a plot#
Panel widgets such as Tabulator are laid out like plots.
table = pn.widgets.Tabulator(
penguins[['species', 'island', 'bill_length_mm', 'body_mass_g']],
pagination='remote', page_size=8, width=400,
)
pn.Row(bill, table)
Show plots in tabs#
Use pn.Tabs to show one plot at a time. Each tab can hold any plot or layout, including subplots, grids or tables.
subplots = penguins.hvplot.scatter(
x='bill_length_mm', y='bill_depth_mm', by='species',
subplots=True, width=250, height=200,
)
pn.Tabs(
('Overlay', bill),
('Subplots', subplots),
('Data', table),
)
Next Steps
Lay out plots without Panel using the
+operatorLearn the layout options in the Panel layouts tutorial
Show plots in notebooks, scripts and apps