Chalkboard

Chalkboard draws graphs as a teacher draws them on a classroom board: a green-gray board with the smears of a wiped duster in a wooden frame, shapes outlined and shaded in chalk, and handwriting throughout.

Chalkboard ships as its own package, @graphysdk/theme-chalkboard, still on 0.x. A minor release may change its look, so pin a caret range (^0.1.0) to take only patches. Tell us what works and what doesn’t on Discord.

Install

npm install @graphysdk/theme-chalkboard

Its peer dependencies are @graphysdk/react and React 19. Pass the theme to createGraphyKit and import its fonts once:

import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
import { chalkboard } from '@graphysdk/theme-chalkboard';
import '@graphysdk/theme-chalkboard/fonts.css';

const kit = createGraphyKit({ theme: chalkboard });

Every graph drawn through kit.GraphProvider takes the theme. The spec is written as usual and names no theme:

const spec = kit.pipe(
  kit.createSpec({ x: 'quarter', y: 'revenue', color: 'region' }),
  kit.geom.bar({ position: 'dodge' }),
  kit.scale.x(),
  kit.scale.y()
);

<kit.GraphProvider spec={spec} data={data}>
  <GraphRenderer />
</kit.GraphProvider>;

Without a kit, pass the theme to the provider instead: <GraphProvider theme={chalkboard}>. The provider reads the theme once, when it mounts. To switch themes, remount the provider, for example with a React key.

What the theme decides

Part	What Chalkboard sets
Stylesheet	A green-gray board with wiped smears in a wooden frame, stubs of chalk and a duster on the ledge along its foot, a dashed grid, no shadows
Colors	Six chalks for groups, white, yellow, pink, sky blue, green and orange, and a ramp from a dusty teal through sky blue to white
Config	Values on the left, the legend above the plot
Geoms	Bars outlined twice and shaded with the side of the chalk; pies drawn in one sweep with spokes ruled out; lines as chalk strokes through a cross at each reading; points as chalk circles; areas and heatmap cells shaded
Color scheme	Dark, whatever `colorScheme` the provider is given

Changing the look of one graph

A spec’s own styles(), scales and config() sit above the theme. This graph keeps the board and draws its groups in white and yellow chalk only:

kit.pipe(spec, kit.scale.color.discrete({ range: ['#F4F1E8', '#F7DC6F'] }));

The theme is drawn for a graph about 600 pixels wide. style.graph({ textScale }) scales its type for a larger or smaller one.

With a geom package

Theme and plugins go to the same kit. A geom package built from the shared shapes, such as the dumbbell, draws its dots as chalk circles too, and takes the theme’s colors, type and axes.

import { dumbbell } from '@graphysdk/geom-dumbbell';

const kit = createGraphyKit({ theme: chalkboard, plugins: [dumbbell] });

Fonts

fonts.css loads Gochi Hand from Google Fonts. To host the font yourself, leave the import out and load a family named Gochi Hand before the first graph is drawn. The face has one weight.

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Install

What the theme decides

Changing the look of one graph

With a geom package

Fonts

​Install

​What the theme decides

​Changing the look of one graph

​With a geom package

​Fonts

Install

What the theme decides

Changing the look of one graph

With a geom package

Fonts