Gamma

Gamma is two themes drawn from Gamma’s own look. Gamma Night puts graphs in the starred night sky behind Gamma’s wordmark, every shape a pale glass that fades as it falls. Gamma Mushroom puts them in Gamma’s mushroom forest under a summer sky, where bars are mushrooms whose caps end at their values.

Both themes ship in one package, @graphysdk/theme-gamma, still on 0.x. A minor release may change their 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-gamma

Its peer dependencies are @graphysdk/react and React 19. Pass one of the themes to createGraphyKit and import its fonts once:

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

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

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={gammaNight}>. The provider reads the theme once, when it mounts. To switch themes, remount the provider, for example with a React key.

What the themes decide

Part	Gamma Night	Gamma Mushroom
Stylesheet	A starred night sky fading from navy to indigo, rounded corners and no frame, a faint grid, the rule under the wordmark as baseline	A summer sky fading from blue to white, rounded corners and no frame, white grid lines, a navy baseline the mushrooms stand on
Colors	The wordmark’s lavender, then pink, mint, gold, sky blue and coral for groups, and a ramp from the deep sky to the palest glass	The caps’ coral, violet, pink, orange, purple and teal for groups, and a ramp from a pale pink through coral to violet
Geoms	Bars, slices and areas as glass that fades as it falls; lines as glass ribbons; a star at each reading; tiles keep the built-in renderer	Bars as mushrooms; a pie as the gilled underside of a cap; areas speckled like a cap; a cap at each reading; tiles keep the built-in renderer
Color scheme	Dark, whatever `colorScheme` the provider is given	Light, whatever `colorScheme` the provider is given

Night or Mushroom

The two themes are separate exports of the same package, each drawn for one scheme. Pick the one that suits the page, or follow the reader’s scheme. The provider reads its theme once, so pass the matching theme and remount the provider when the scheme changes:

import { gammaMushroom, gammaNight } from '@graphysdk/theme-gamma';

const theme = colorScheme === 'dark' ? gammaNight : gammaMushroom;

<GraphProvider key={colorScheme} theme={theme} spec={spec} data={data}>
  <GraphRenderer />
</GraphProvider>;

Changing the look of one graph

A spec’s own styles(), scales and config() sit above the theme. This graph keeps the night sky and draws its groups in the gold and mint only:

kit.pipe(spec, kit.scale.color.discrete({ range: ['#FFD66B', '#5FE0C1'] }));

The themes are drawn for a graph about 600 pixels wide. style.graph({ textScale }) scales their type for a larger or smaller one.

With a geom package

The themes repaint 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: gammaNight, plugins: [dumbbell] });

Fonts

Gamma’s own faces, ES Build for headings and PP Mori for text, cannot be served freely. The themes name them first and fall back to Plus Jakarta Sans and Inter. fonts.css loads Plus Jakarta Sans in weights 500, 700 and 800 and Inter in weights 400, 500 and 600 from Google Fonts. To host the fonts yourself, leave the import out and load families named Plus Jakarta Sans and Inter, or ESBuild and PPMori if you have Gamma’s own, before the first graph is drawn.

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Install

What the themes decide

Night or Mushroom

Changing the look of one graph

With a geom package

Fonts

​Install

​What the themes decide

​Night or Mushroom

​Changing the look of one graph

​With a geom package

​Fonts

Install

What the themes decide

Night or Mushroom

Changing the look of one graph

With a geom package

Fonts