@graphysdk/theme-graphite

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 graphite theme for the Graphy charting SDK: graphs in one cool grey, their groups told apart by lightness alone, for light and dark schemes.

Learn more at graphy.dev.

Install

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

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

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.

The theme is drawn for both schemes: pass colorScheme="light" or colorScheme="dark" to the provider to pick one.

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.

Docs

• Graphite

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.