Bauhaus

Bauhaus draws graphs as a 1920s design-school poster: warm off-white paper, flat red, blue, yellow and black, heavy black axes, and a geometric face with spaced capitals. Each group takes the form of its color, the red square, the blue circle or the yellow triangle, so groups stay apart even without color.

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

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

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

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={bauhaus}>. 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 Bauhaus sets
Stylesheet	Off-white paper with no frame, heavy black axes on the left and along the bottom, no grid, square bars parted by a thin line in the paper, spaced capitals on the axes
Colors	Red, blue, yellow and black, then green, orange and violet, for groups, and a ramp from yellow through red to black
Config	Values on the left, the legend above the plot
Geoms	Bars as flat planes, square at both ends; points as forms; lines as heavy rules with a form at each reading; slices as flat fields of color, ending in a heavy black rule on a rose; areas and tiles keep the built-in renderer
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 poster and draws its groups in blue and black only:

kit.pipe(spec, kit.scale.color.discrete({ range: ['#1B4FA3', '#141414'] }));

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

Bauhaus repaints the built-in geoms only. A geom from a package, such as the dumbbell, keeps its own shapes and is drawn in the theme’s colors and type.

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

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

Fonts

fonts.css loads Jost from Google Fonts, in weights 400, 500 and 700. To host the font yourself, leave the import out and load a family named Jost 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