Shiny

Shiny draws graphs on a dark card scattered with faint stars, inside a holographic foil border: every shape is one clean flat color, slices and stacked bars are parted by a hairline of the card, and lines carry a soft glow.

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

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

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

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={shiny}>. 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 Shiny sets
Stylesheet	A dark starred card with rounded corners inside a holographic foil border, a faint grid for the values over one baseline, headings in Inter Tight and small type in JetBrains Mono, notes set in terminal windows
Colors	Pulse pink, Sirius cyan, Lagoon violet, Nebula, a mint and Starlight for groups, and a ramp from a deep violet through Pulse to a pale blush
Config	None
Geoms	Every built-in geom repainted as flat shapes parted by a hairline of the card; lines glow softly; a hovered shape takes a bright line inside its edge
Color scheme	Dark, whatever `colorScheme` the provider is given

The border

The foil is the theme’s one holographic part: a band of lilac, pink, cyan and mint round the card’s edge, with a fine diamond plate and streaks of light across it. Nothing inside the card is holographic, so shapes keep their own colors, a slice its angle and a bar its value.

Changing the look of one graph

A spec’s own styles(), scales and config() sit above the theme. This graph keeps the card and the border and draws its groups in Pulse and Sirius only:

kit.pipe(spec, kit.scale.color.discrete({ range: ['#E94FF3', '#9AF2FF'] }));

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

Shiny repaints the built-in geoms only. A geom from a package, such as the dumbbell, keeps its own shapes and is drawn on the card in the theme’s colors and type.

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

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

Fonts

fonts.css loads Inter Tight, in weights 500, 700 and 800, and JetBrains Mono, in weights 400, 500, 600 and 700, from Google Fonts. To host the fonts yourself, leave the import out and load families named Inter Tight and JetBrains Mono before the first graph is drawn.

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Install

What the theme decides

The border

Changing the look of one graph

With a geom package

Fonts

​Install

​What the theme decides

​The border

​Changing the look of one graph

​With a geom package

​Fonts

Install

What the theme decides

The border

Changing the look of one graph

With a geom package

Fonts