Graphite

Graphite draws graphs in one hue, a cool gray like pencil lead: groups are told apart by lightness alone, shapes are parted by a thin line in the background, and nothing casts a shadow.

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

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

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

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={graphite}>. 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 Graphite sets
Stylesheet	A near-white or near-black background, flat shapes parted by a thin line in the background, no shadows
Colors	Six grays for groups, and a ramp from a pale gray to a near-black one
Config	The legend above the plot
Geoms	None repainted
Color scheme	Light and dark. The provider’s `colorScheme` picks which

Light and dark

Graphite is drawn for both schemes. The provider’s colorScheme picks the one a graph is shown in. A host that follows the reader’s system setting passes it through:

<kit.GraphProvider spec={spec} data={data} colorScheme="dark">
  <GraphRenderer />
</kit.GraphProvider>

Changing the look of one graph

A spec’s own styles(), scales and config() sit above the theme. This graph keeps the grays and picks out one group in a color:

kit.pipe(
  spec,
  kit.scale.color.discrete({ range: ['#D62718', '#878D95', '#ABB2BA'] })
);

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

Graphite repaints no geom. A geom from a package, such as the dumbbell, is drawn in the theme’s colors and type like a built-in one.

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

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

Fonts

fonts.css loads IBM Plex Sans from Google Fonts, in weights 400, 500 and 600. To host the font yourself, leave the import out and load a family named IBM Plex Sans before the first graph is drawn.

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Install

What the theme decides

Light and dark

Changing the look of one graph

With a geom package

Fonts

​Install

​What the theme decides

​Light and dark

​Changing the look of one graph

​With a geom package

​Fonts

Install

What the theme decides

Light and dark

Changing the look of one graph

With a geom package

Fonts