@graphysdk/theme-bauhaus

Beta. This theme is on a 0.x version line: a minor release may change its look. Use a caret range (^0.1.0) to take only patches.

A design-school poster theme for the Graphy charting SDK: off-white paper, flat primary colours, heavy black rules and geometric type. Each group is drawn in the form of its colour, the red square, the blue circle and the yellow triangle, so groups stay apart without their colours.

A point's key is drawn in its form. To give a line's key its form too, add a geom.point() layer before the geom.line(): the key takes the first layer's mark, and the line draws the same form over each point.

Learn more at graphy.dev.

Install

npm install @graphysdk/theme-bauhaus @graphysdk/react

Requires React 19. Its only peer is @graphysdk/react.

Usage

Pass the theme to createGraphyKit and import its fonts once. Every graph drawn through the kit's GraphProvider takes the theme; specs are written as usual.

import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
import { bauhaus } from '@graphysdk/theme-bauhaus';
import '@graphysdk/theme-bauhaus/fonts.css';

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

const spec = kit.pipe(
  kit.createSpec({ x: 'quarter', y: 'revenue', color: 'region' }),
  kit.geom.bar({ position: 'dodge' }),
  kit.scale.x(),
  kit.scale.y()
);

export function Revenue({ data }) {
  return (
    <kit.GraphProvider spec={spec} data={data}>
      <GraphRenderer />
    </kit.GraphProvider>
  );
}

A spec's own styles(), scales and config() sit above the theme, so a graph can still change anything. The theme is drawn for a graph about 600 pixels wide; style.graph({ textScale: 1.5 }) scales its type for a larger one.

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.

Docs

• Bauhaus

Feedback

This theme is released early to hear what works. Tell us on Discord.

Licence

This package is available under PolyForm Noncommercial, Small Business, or a 32-day Free Trial. Free Trial is local or internal evaluation only — it does not cover a public page. See what you can do under the trial.

For a commercial licence, talk to us.