Phosphor

Phosphor draws graphs on a cathode-ray tube: a dark screen, shapes and type that glow green, and a terminal face throughout.

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

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

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

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: 'country', y: 'emissions' }),
  kit.geom.bar(),
  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={phosphor}>. 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 Phosphor sets
Stylesheet	A dark screen under scanlines, a bright line under the plot, a dotted grid, a glow on shapes and labels
Colors	Five tube colors (green, amber, cyan, pink, white) for groups, and a ramp from a dim to a lit green
Geoms	None repainted. Filled shapes are lit faintly and outlined in their own color
Color scheme	Dark, whatever `colorScheme` the provider is given

The screen

The scanlines and the dark corners are an overlay, paint drawn over what lies under it. The graph has one over everything it draws, and each geom has one over its own shapes, so lit shapes show the lines more than the dark around them. Both are in the stylesheet, and a spec can turn either off:

kit.styles({
  defaults: [
    kit.style.graph({ overlay: 'none' }),
    kit.style.geom({ overlay: 'none' }),
  ],
});

Changing the look of one graph

A spec’s own styles(), scales and config() sit above the theme. This graph keeps the screen and takes amber for its bars, with no glow:

kit.pipe(
  spec,
  kit.styles({
    defaults: [
      kit.style.geom.bar({
        fill: '#FFC247',
        stroke: '#FFC247',
        shadow: 'none',
      }),
    ],
  })
);

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

Phosphor repaints no geom. A geom from a package, such as the dumbbell, is lit the same way as a built-in one.

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

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

Fonts

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. The face has one weight, and the theme sets every label in it.

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Install

What the theme decides

The screen

Changing the look of one graph

With a geom package

Fonts

​Install

​What the theme decides

​The screen

​Changing the look of one graph

​With a geom package

​Fonts

Install

What the theme decides

The screen

Changing the look of one graph

With a geom package

Fonts