Watercolor

Watercolor draws graphs by hand: filled shapes are washes of paint, lines are drawn in colored pen, and every label is handwritten, on white paper.

Watercolor ships as its own package, @graphysdk/theme-watercolor, 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-watercolor

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 { watercolor } from '@graphysdk/theme-watercolor';
import '@graphysdk/theme-watercolor/fonts.css';

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

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={watercolor}>. 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 Watercolor sets
Stylesheet	White paper, heavy left and bottom axes, handwriting, tooltips and annotations to match
Grid	None on a cartesian graph; faint circles and spokes on a polar one
Colors	Five pens (green, blue, purple, yellow, red) for groups, and a ramp from a faint blue to the blue pen
Geoms	Bars, slices, tiles and areas as washes; lines as pen strokes; points as dabs of paint
Color scheme	Light, 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 washes and the handwriting and takes its own colors and a larger type:

const customizedSpec = kit.pipe(
  spec,
  kit.scale.color.discrete({ range: ['#0B7285', '#E8590C'] }),
  kit.styles({ defaults: [kit.style.graph({ textScale: 1.5 })] })
);

The theme is drawn for a graph about 600 pixels wide. 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, is drawn in Watercolor’s paint too, and takes the theme’s colors, type and axes.

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

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

Fonts

fonts.css loads Caveat from Google Fonts. To host the font yourself, leave the import out and load a family named Caveat before the first graph is drawn.

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