Blueprint

Blueprint draws graphs as an architect’s drawing: a deep blue sheet under a fine drafting grid, shapes outlined in white and hatched in their own color, dashed construction lines, and monospaced capitals.

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

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

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

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={blueprint}>. 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 Blueprint sets
Stylesheet	A deep blue sheet ruled in squares inside a thin frame, a dashed grid, a ruled baseline with ticks, bars and tiles hatched in their own color
Colors	White, yellow, sky blue, red, aqua and lilac for groups, and a ramp from a blue a step off the sheet to white
Config	The legend above the plot
Geoms	None repainted
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 sheet and fills its bars solid, with no hatching:

kit.pipe(
  spec,
  kit.styles({ defaults: [kit.style.geom.bar({ overlay: 'none' })] })
);

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

Blueprint 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: blueprint, plugins: [dumbbell] });

Fonts

fonts.css loads IBM Plex Mono 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 Mono 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