@graphysdk/theme-phosphor

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 phosphor theme for the Graphy charting SDK. Graphs are drawn on a cathode-ray tube: a dark screen, shapes and type that glow green, and a terminal face throughout.

Learn more at graphy.dev.

Install

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

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

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 VT323 from Google Fonts. To host the font yourself, leave the import out and load a family named VT323 before the first graph is drawn.

Docs

• Phosphor

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.