Display Content with Panes

In this tutorial, we will learn to display objects with Panes:

• Panes are available in the pn.pane namespace.

• Panes take an object argument as well as other arguments.

• Discover all Panes and their reference guides in the Panes Section of the Component Gallery.

Note

A Pane is a component that can display an object. It takes an object as an argument.

Note

You might notice a lot of repetition from the previous section regarding pn.panel. Don’t worry, it’s intentional! We’re doing this to empower you with the ability to compare and contrast. While pn.panel is incredibly user-friendly and versatile, specific Panes allow you to display output with precision and efficiency. This enables you to construct more intricate and high-performing applications.

Note

When we ask you to run the code in the sections below, you may either execute the code directly in the Panel docs via the green run button, in a cell in a notebook, or in a file app.py that is served with panel serve app.py --dev.

import panel as pn
pn.extension("echarts", "plotly", "vega", "vizzu")

Display Strings

The Str pane can display any text.

Run the code:

import panel as pn

pn.extension()

pn.pane.Str(
    'This is a raw string that will not be formatted in any way.',
).servable()

Note

We add .servable() to the component to add it to the app served by panel serve app.py --dev. Adding .servable() is not needed to display the component in a notebook.

Note

To learn in detail how a pane like Str works, refer to its reference guide.

Click this link to the Str reference guide and spend a few minutes to familiarize yourself with its organization and content.

Display Markdown

The Markdown pane can format and display markdown strings.

Run the code:

import panel as pn

pn.extension()

pn.pane.Markdown("""\
# Wind Turbine

A wind turbine is a device that converts the kinetic energy of wind into \
[electrical energy](https://en.wikipedia.org/wiki/Electrical_energy).

Read more [here](https://en.wikipedia.org/wiki/Wind_turbine).
""").servable()

Tip

It’s key for success with Panel to be able to navigate the Component Gallery and use the reference guides.

Click this link to the Panes Section of the Component Gallery. Identify the Markdown Reference Guide and open it. You don’t have to spend time studying the details right now.

Display Alerts

The Alert pane can format and display markdown strings inside a nicely styled Alert pane.

Run the code:

import panel as pn

pn.extension()

pn.pane.Alert("""
## Markdown Sample

This sample text is from [The Markdown Guide](https://www.markdownguide.org)!
""", alert_type="info").servable()

Display Plots

Pick a plotting library below.

Altair

Run the code below.

import altair as alt
import pandas as pd
import panel as pn

pn.extension("vega")

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 5), ('Sunday', 4)], columns=['Day', 'Wind Speed (m/s)']
)

fig = (
    alt.Chart(data)
    .mark_line(point=True)
    .encode(
        x="Day",
        y=alt.Y("Wind Speed (m/s)", scale=alt.Scale(domain=(0, 10))),
        tooltip=["Day", "Wind Speed (m/s)"],
    )
    .properties(width="container", height="container", title="Wind Speed")
)

pn.pane.Vega(fig, sizing_mode="stretch_width", height=400).servable()

Note

Vega is the name of the JavaScript plotting library used by Altair.

We must add "vega" as an argument to pn.extension in the example to load the Vega Javascript dependencies in the browser.

If we forget to add "vega" to pn.extension, then the Altair figure might not display.

ECharts

Run the code below.

import panel as pn

pn.extension("echarts")

config = {
    'title': {
        'text': 'Wind Speed'
    },
    "tooltip": {},
    'xAxis': {
        'data': ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
    'yAxis': {},
    'series': [{
        'name': 'Sales',
        'type': 'line',
        'data': [7, 4, 9, 4, 4, 5, 4]
    }],
}
pn.pane.ECharts(config, height=400, sizing_mode="stretch_width").servable()

Note

We must add "echarts" as an argument to pn.extension in the example to load the ECharts Javascript dependencies in the browser.

If we forget to add "echarts" to pn.extension, then the ECharts figure might not display.

hvPlot

Run the code below.

import hvplot.pandas
import numpy as np
import pandas as pd
import panel as pn

pn.extension()

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 5), ('Sunday', 4)], columns=['Day', 'Wind Speed (m/s)']
)

fig = data.hvplot(x="Day", y="Wind Speed (m/s)", line_width=10, ylim=(0,10), title="Wind Speed")

pn.pane.HoloViews(fig, sizing_mode="stretch_width").servable()

Note

hvPlot is the easy to use plotting sister of Panel. It works similarly to the familiar Pandas .plot api. hvPlot is built on top of the data visualization library HoloViews. hvPlot, HoloViews, and Panel are all part of the HoloViz family.

Matplotlib

Run the code below.

import matplotlib
import matplotlib.pyplot as plt
import pandas as pd
import panel as pn

matplotlib.use("agg")

pn.extension()

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 5), ('Sunday', 4)], columns=['Day', 'Wind Speed (m/s)']
)

fig, ax = plt.subplots(figsize=(8,3))
ax.plot(
    data["Day"], data["Wind Speed (m/s)"], marker="o", markersize=10, linewidth=4
)
ax.set(
    xlabel="Day",
    ylabel="Wind Speed (m/s)",
    title="Wind Speed",
    ylim=(0, 10),
)
ax.grid()
plt.close(fig)  # CLOSE THE FIGURE TO AVOID MEMORY LEAKS!

pn.pane.Matplotlib(fig, dpi=144, tight=True, format="svg", sizing_mode="stretch_width").servable()

Note

In the example, we provide the arguments dpi, format and tight to the Matplotlib pane.

The Matplotlib pane can display figures from any framework that produces Matplotlib Figure objects like Seaborn, Plotnine and Pandas .plot.

We can find more details in the Matplotlib Reference Guide.

Plotly

Run the code below.

import pandas as pd
import panel as pn
import plotly.express as px

pn.extension("plotly")

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 5), ('Sunday', 4)], columns=['Day', 'Wind Speed (m/s)']
)

fig = px.line(data, x="Day", y="Wind Speed (m/s)")
fig.update_traces(mode="lines+markers", marker=dict(size=10), line=dict(width=4))
fig.update_yaxes(range=[0, max(data['Wind Speed (m/s)']) + 1])
fig.layout.autosize = True

pn.pane.Plotly(fig, height=400, sizing_mode="stretch_width").servable()

Note

We must add "plotly" as an argument to pn.extension in the example to load the Plotly JavaScript dependencies in the browser.

If we forget to add "plotly" to pn.extension, then the Plotly figure might not display.

Vizzu

Run the code below.

import pandas as pd
import panel as pn

pn.extension("vizzu")

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 5), ('Sunday', 4)], columns=['Day', 'Wind Speed (m/s)']
)

pn.pane.Vizzu(
    data, config={'geometry': 'line', 'x': 'Day', 'y': 'Wind Speed (m/s)', 'title': 'Wind Speed'},
    duration=400, height=400, sizing_mode='stretch_width', tooltip=True
).servable()

Note

We must add "vizzu" as an argument to pn.extension in the example to load the Vizzu JavaScript dependencies in the browser.

If we forget to add "vizzu" to pn.extension, then the Vizzu figure might not display.

Display a DataFrame

Run the code:

import pandas as pd
import panel as pn

pn.extension()

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 4), ('Sunday', 4)], columns=['Day', 'Orders']
)
pn.pane.DataFrame(data).servable()

Note

If we want to display larger dataframes, customize the way the dataframes are displayed, or make them more interactive, we can find specialized components in the Component Gallery supporting these use cases. For example, the Tabulator widget and Perspective pane.

Display any Python object

Provides Panes to display (almost) any Python object.

Run the code below

import panel as pn

pn.extension()

pn.Column(
    pn.pane.JSON({"Wind Speeds": [0, 3, 6, 9, 12, 15, 18, 21], "Power Output": [0,39,260,780, 1300, 1300, 0, 0]}),
    pn.pane.PNG("https://assets.holoviz.org/panel/tutorials/wind_turbine.png", height=100),
    pn.pane.Audio("https://assets.holoviz.org/panel/tutorials/wind_turbine.mp3"),
).servable()

Recap

In this guide, we have learned to display Python objects with Panes:

• Panes are available in the pn.pane namespace

• Panes take an object argument as well as other arguments

• Display strings with the Str, Markdown and Alert panes

• Display plot figures like Altair, ECharts, hvPlot, Matplotlib, Plotly and Vizzu with the Vega, ECharts, HoloViews, Matplotlib, Plotly and Vizzu panes, respectively.

• Display DataFrames with the DataFrame and Perspective panes.

• Add JavaScript dependencies via pn.extension. For example pn.extension("vega") or pn.extension("plotly")

• Discover all Panes and their reference guides in the Panes Section of the Component Gallery.

Resources

Tutorials

• Display objects with pn.panel

How-to

• Construct Panes

• Migrate from Streamlit | Display Content with Panes

• Style Altair Plots

• Style Echarts Plots

• Style Matplotlib Plots

• Style Plotly Plots

• Style Vega/ Altair Plots

Explanation

• Components Overview

Component Gallery

• Panes