Theme Plotting Libraries

Panel Material UI provides integrated theming support for popular plotting libraries including Bokeh, hvPlot, HoloViews, and Plotly. Your plots will automatically adapt to the active theme, including respecting the primary color, the font family, and toggling between dark and light mode.

Chart Style

By default, Panel Material UI applies a minimal chart style that hides axis lines, tick marks, and plot outlines for a cleaner look. You can switch to a more standard styling by setting chart_style in theme_config:

import panel as pn
import panel_material_ui as pmu
import pandas as pd
import hvplot.pandas

pn.extension()

df = pd.read_csv("https://datasets.holoviz.org/penguins/v1/penguins.csv")

toggle = pmu.ThemeToggle(styles={"margin-left": "auto"})

pmu.Container(
    toggle,
    df.hvplot.scatter(
        x="bill_length_mm", y="bill_depth_mm", by="species",
        height=400, responsive=True
    ),
    theme_config={"chart_style": "classic"},
    width_option="md"
).preview()

There are three chart styles:

• "minimal" hides axis lines, tick marks, legend borders and plot outlines. It suits plots placed on the surfaces of an application.

• "standard" keeps the minimal palette but adds a soft plot frame, axis lines with major ticks, a legend box and a bold title, so a plot holds together on its own.

• "classic" restores the full Bokeh look, with solid axis lines, major and minor ticks, legend borders, colorbar outlines and plot frames.

When chart_style is omitted, plots use "minimal" inside a Page and "standard" when rendered on their own, e.g. as a notebook output.

Theme Bokeh, hvPlot, and HoloViews

Panel Material UI has integrated theming support for Bokeh, hvPlot, and HoloViews. This means that the plots will automatically adapt to the active theme, including respecting the primary color, the font family, and toggling between dark and light mode.

Basic Theming

To enable this behavior, you can either use the Page component or include a ThemeToggle in your app.

import panel as pn
import panel_material_ui as pmu
import pandas as pd
import hvplot.pandas

pn.extension()

df = pd.read_csv("https://datasets.holoviz.org/penguins/v1/penguins.csv")

toggle = pmu.ThemeToggle(styles={"margin-left": "auto"})

pmu.Container(
    toggle,
    df.hvplot.scatter(
        x="bill_length_mm", y="bill_depth_mm", by="species",
        height=400, responsive=True
    ),
    width_option="md"
).preview()

Palettes & Colormaps

When visualizing categorical data, each color should be visibly distinct from all the other colors, not nearby in color space, to make each category separately visible.

You can find existing categorical color maps here and here.

Categorical

If you want to create categorical color maps aligned with your Material theme, you can use the pmu.theme.generate_palette function. It takes a base color and the number of colors to generate (3 by default).

import pandas as pd
import hvplot.pandas
import panel_material_ui as pmu

df = pd.read_csv("https://datasets.holoviz.org/penguins/v1/penguins.csv")

primary_color = "#6200ea"
colors = pmu.theme.generate_palette(primary_color)
toggle = pmu.ThemeToggle(styles={"margin-left": "auto"})

pmu.Container(
    toggle,
    df.hvplot.scatter(
        x="bill_length_mm", y="bill_depth_mm", color="species",
        height=400, responsive=True, cmap=colors
    ),
    theme_config={"palette": {"primary": {"main": primary_color}}},
    width_option="md"
).preview()

Continuous

Similarly, you can use the pmu.theme.linear_gradient function to get a color map aligned with your Material theme.

import panel as pn
import panel_material_ui as pmu
import pandas as pd
import hvplot.pandas

df = pd.read_csv("https://datasets.holoviz.org/penguins/v1/penguins.csv")
primary_color = "#6200ea"

pn.extension()

cmap = pmu.theme.linear_gradient("#ffffff", primary_color, n=256)
toggle = pmu.ThemeToggle(styles={"margin-left": "auto"})

plot = df.hvplot.scatter(
    x="bill_length_mm", y="flipper_length_mm", c="body_mass_g",
    cmap=cmap, colorbar=True, height=400, responsive=True
).opts(
    backend_opts={
        'plot.toolbar.autohide': True
    },
    toolbar='above'
)

pmu.Container(
    toggle,
    plot,
    theme_config={"palette": {"primary": {"main": primary_color}}},
    width_option="md"
).preview()

Theme Plotly

Panel Material UI provides integrated theming support for Plotly, which is applied automatically.

Basic Usage

The theme will be applied automatically:

import panel as pn
import panel_material_ui as pmui
import plotly.express as px

pn.extension("plotly")

df = px.data.iris()

plot = px.scatter(
    df, x="sepal_length", y="sepal_width", color="species",
    height=400
)

pmui.Container(
    plot, width_option="md"
).preview(height=500)

and will automatically switch when in dark mode:

import panel as pn
import panel_material_ui as pmui
import plotly.express as px

pn.extension("plotly")

df = px.data.iris()

toggle = pmui.ThemeToggle(styles={"margin-left": "auto"}, value=True)

plot = px.scatter(
    df, x="sepal_length", y="sepal_width", color="species",
    height=400
)

pmui.Container(
    toggle, plot, dark_theme=True, width_option="md"
).preview(height=500)

Color Palettes & Scales

Plotly provides built-in categorical color sequences and continuous color scales.

In addition, Panel Material UI provides utilities to generate categorical color palettes and continuous color scales that align with Material Design and your chosen color theme.

Categorical Colors

In order to align the Material UI theming with the plot color sequence you can generate a palette using the pmui.theme.generate_palette utility and provide it using the color_discrete_sequence:

import panel as pn
import plotly.express as px
import panel_material_ui as pmui

pn.extension("plotly")

df = px.data.iris()

primary_color = "#4099da"

# Generate colors using existing theme function
colors = pmui.theme.generate_palette(primary_color, n_colors=3)

plot = px.scatter(
    df, x="sepal_length", y="sepal_width", color="species",
    height=400,
    color_discrete_sequence=colors
)

toggle = pmui.ThemeToggle(styles={"margin-left": "auto"}, value=False)

pmui.Container(
    toggle,
    plot,
    theme_config={"palette": {"primary": {"main": primary_color}}},
    width_option="md"
).preview(height=500)

Note

When using Plotly Figure directly you can provide a discrete color sequence via the colorway argument of the layout property, i.e.:

go.Figure(layout={'colorway': ...})

Continuous Colors

Create continuous color scales using the pmui.theme.linear_gradient function for continuous data visualization:

import panel as pn
import plotly.express as px
import panel_material_ui as pmui

pn.extension("plotly")

df = px.data.iris()
primary_color = "#4099da"

colorscale = pmui.theme.linear_gradient("#ffffff", primary_color, n=256)

plot = px.scatter(
    df, x="sepal_length", y="sepal_width", color="petal_length",
    height=400,
    color_continuous_scale=colorscale
)

toggle = pmui.ThemeToggle(styles={"margin-left": "auto"}, value=False)

pmui.Container(
    toggle,
    plot,
    theme_config={"palette": {"primary": {"main": primary_color}}},
    width_option="md"
).preview(height=500)