Neo Brutalist

Neo Brutalist draws graphs as blunt blocks: a cream sheet in a thick black border, square shapes in loud flat color outlined in black, and a solid black shadow under everything that stands off the sheet.

Neo Brutalist ships as its own package, @graphysdk/theme-neo-brutalist, 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-neo-brutalist

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

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

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={neoBrutalist}>. 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 Neo Brutalist sets
Stylesheet	A cream sheet in a thick black border, square shapes outlined in black, a solid black shadow under the graph and its shapes, headings in capitals
Colors	Pink, purple and lime first, then orange, blue, teal and green, for groups, and a ramp from a pale yellow through pink to a deep purple
Config	Values on the left, the legend above the plot
Geoms	None repainted
Color scheme	Light, whatever `colorScheme` the provider is given

The shadow

The graph’s own shadow falls outside its frame, to the right and below. Leave room for it around the renderer, or whatever holds the graph cuts it off.

Changing the look of one graph

A spec’s own styles(), scales and config() sit above the theme. This graph keeps the blocks and draws its groups in pink and black:

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

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

Neo Brutalist 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: neoBrutalist, plugins: [dumbbell] });

Fonts

fonts.css loads Space Grotesk from Google Fonts, in weights 500 and 700. To host the font yourself, leave the import out and load a family named Space Grotesk before the first graph is drawn.

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Install

What the theme decides

The shadow

Changing the look of one graph

With a geom package

Fonts

​Install

​What the theme decides

​The shadow

​Changing the look of one graph

​With a geom package

​Fonts

Install

What the theme decides

The shadow

Changing the look of one graph

With a geom package

Fonts