Botanical

Botanical draws graphs as a page from a gardener’s sketchbook: grained paper taped down at its corners with a sprig along its foot, every shape outlined by hand in sepia with a watercolour wash inside, and handwriting throughout.

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

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

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

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={botanical}>. 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 Botanical sets
Stylesheet	Grained paper taped down at its corners with a sprig drawn along its foot, hairline rules for the values and none for the categories, a sepia baseline, notes in the gardener’s hand with no box
Colors	Eight colors for groups, leaf greens set between a petal pink, a bark brown, a berry red, a muted gold and a gentian blue, and a ramp from a pale sage to a deep forest green
Geoms	Bars as leaf blades with a rib and veins; lines as vines with a leaf at each reading; points as fallen leaves; slices as petals round a seed head; areas as washes; heatmap cells as a seed tray
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 sketchbook and draws its groups in two greens:

kit.pipe(spec, kit.scale.color.discrete({ range: ['#2E5E3B', '#6E8A5A'] }));

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 washed inside a sepia outline too, and takes the theme’s colors, type and axes.

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

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

Fonts

fonts.css loads Kalam for the handwriting and Cormorant Garamond for the italic notes from Google Fonts. To host the fonts yourself, leave the import out and load families named Kalam and Cormorant Garamond 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