MatplotlibStyle#

Download this notebook from GitHub (right-click to download).


import matplotlib.pyplot as plt
import numpy as np
from matplotlib import cm
from matplotlib.figure import Figure
import panel as pn

pn.extension(sizing_mode="stretch_width", template="fast")

Styling Matplotlib for Panel#

In this example we will show how to style Matplotlib charts with Panel for both the default and the dark theme.

MatplotlibStyle.gif

Get or set the theme#

When we use the Fast templates the theme can be found in the session_args.

def get_theme():
    return pn.state.session_args.get("theme", [b'default'])[0].decode()
theme=get_theme()
theme
'default'

Select a nice accent color#

Below we create some functionality to cycle through a list of nice accent colors. You would probably just set the accent_color and color for your specific use case.

nice_accent_colors = [
    ("#00A170", "white"), # Mint
    ("#DAA520", "white"), # Golden Rod
    ("#F08080", "white"), # Light Coral
    ("#4099da", "white"), # Summery Sky
    ("#2F4F4F", "white"), # Dark Slate Grey
    ("#A01346", "white"), # Fast
]
def get_nice_accent_color():
    """Returns the 'next' nice accent color"""
    if not "color_index" in pn.state.cache:
        pn.state.cache["color_index"]=0
    elif pn.state.cache["color_index"]==len(nice_accent_colors)-1:
        pn.state.cache["color_index"]=0
    else:
        pn.state.cache["color_index"]+=1
    return nice_accent_colors[pn.state.cache["color_index"]]
accent_color, color = get_nice_accent_color()
pn.pane.Markdown(f"# Color: {accent_color}", background=accent_color, height=70, margin=0, style={"color": color, "padding": "10px"})

Matplotlib#

There are nearly 30 builtin styles to matplotlib that can be activated with the plt.style.use function. The style names are available in the plt.style.available list.

Let’s define a Select widget to explore the templates.

style=pn.widgets.Select(options=[style for style in sorted(plt.style.available) if not style.startswith("_")])

If the theme is dark we will use the dark_background style as the default value.

if theme=="dark":
    style.value="dark_background"

Lets define a plot

x = np.arange(-2, 8, .1)
y = .1 * x ** 3 - x ** 2 + 3 * x + 2

def get_plot(theme="default", accent_color=accent_color, style=style.value):
    plt.style.use("default") # Resets to default style. Just in case it was styled to something non-default somewhere else in your app
    plt.style.use(style) # changes to the specified style
    fig0 = Figure(figsize=(12, 6))
    ax0 = fig0.subplots()
    ax0.plot(x, y, linewidth=10.0, color=accent_color)
    ax0.set_title(f'Matplotlib Style: {style}');
    plt.style.use("default") # Resets to default style. Do this if you are styling matplotlib in multiple places in your app.
    return fig0

Lets bind get_plot to the style widet and lay out the two in a Column.

get_plot=pn.bind(get_plot, style=style)
matplotlib_component = pn.Column(style,pn.panel(get_plot, height=500, sizing_mode="scale_width"))
matplotlib_component.servable()

For more check out the Matplotlib style sheets reference and the alternative themes dracula theme and gadfly.

Style the app template#

pn.state.template.param.update(accent_base_color=accent_color, header_background=accent_color)

You can serve the app via panel serve MatplotlibStyle.ipynb and find it at http://localhost:5006/MatplotlibStyle. You should add the --autoreload flag while developing for hot reloading.

This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

Download this notebook from GitHub (right-click to download).