@graphysdk/theme-gamma

Beta. This package 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.

Two themes for the Graphy charting SDK in Gamma's look:

• gammaNight: the starred night sky behind Gamma's wordmark. Shapes are a pale glass that fades as it falls, with the stars showing through, and every reading is a star.
• gammaMushroom: Gamma's mushroom forest under a summer sky. Bars grow as mushrooms whose caps end at their values, and a pie is the underside of a cap.

Learn more at graphy.dev.

Install

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

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

Usage

Pass one of the themes 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 { gammaNight } from '@graphysdk/theme-gamma';
import '@graphysdk/theme-gamma/fonts.css';

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

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 themes are drawn for a graph about 600 pixels wide; style.graph({ textScale: 1.5 }) scales their type for a larger one.

gammaNight is drawn for the dark scheme and gammaMushroom for the light one, whatever colorScheme the provider is given.

fonts.css loads Plus Jakarta Sans and Inter from Google Fonts, standing in for Gamma's own ES Build and PP Mori. To host the fonts yourself, leave the import out and load families named Plus Jakarta Sans and Inter before the first graph is drawn.

Docs

• Gamma

Feedback

This package 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.