Altair Theming

[Marc]

I wanted to use Altair plots with the new ReactTemplate and Dark theme. So the plots should also use a dark theme. I figured I wanted to showcase and share how to do it here.

My solution was to use the built in Altair Dark Theme via alt.themes.enable("dark").

import altair as alt
import panel as pn
from vega_datasets import data

alt.themes.enable("dark")

# draw the chart
cars = data.cars()
chart = alt.Chart(cars, width='container', height='container',).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
)

plot_pane = pn.pane.Vega(chart, sizing_mode="stretch_both")

layout = pn.template.ReactTemplate(
    site="Awesome Panel",
    title="Altair Plots",
    theme=pn.template.react.DarkTheme,
    row_height=300,
)
layout.main[0, 0:6] = plot_pane
layout.main[0, 6:12] = plot_pane.clone()
layout.main[1, 0:6] = plot_pane.clone()
layout.main[1, 6:12] = plot_pane.clone()
layout.servable()

It’s described in the Altair docs https://altair-viz.github.io/user_guide/configuration.html#changing-the-theme

[Marc]

A step on the way for me was also realizing that it’s possible to define and use CUSTOM THEMES via

# register the custom theme under a chosen name
alt.themes.register('black_marks', black_marks)

# enable the newly registered theme
alt.themes.enable('black_marks')

import altair as alt
import panel as pn
from vega_datasets import data

# define the theme by returning the dictionary of configurations
def black_marks():
    return {
        'config': {
            'view': {
                'height': 300,
                'width': 400,
            },
            'mark': {
                'color': 'black',
                'fill': 'black'
            }
        }
    }

# register the custom theme under a chosen name
alt.themes.register('black_marks', black_marks)

# enable the newly registered theme
alt.themes.enable('black_marks')
# draw the chart
cars = data.cars()
chart = alt.Chart(cars, width='container', height='container',).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
)

plot_pane = pn.pane.Vega(chart, sizing_mode="stretch_both")

layout = pn.template.ReactTemplate(
    site="Awesome Panel",
    title="Altair with Custom Theme",
    theme=pn.template.react.DarkTheme,
    row_height=300,
)
layout.main[0, 0:6] = plot_pane
layout.main[0, 6:12] = plot_pane.clone()
layout.main[1, 0:6] = plot_pane.clone()
layout.main[1, 6:12] = plot_pane.clone()
layout.servable()

It’s described in the Altair docs https://altair-viz.github.io/user_guide/configuration.html#defining-a-custom-theme