@graphysdk/theme-shiny

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 holographic theme for the Graphy charting SDK: a dark starred card inside a foil border, every shape one clean flat colour, slices and stacked bars parted by a hairline of the card, and lines with a soft glow.

Learn more at graphy.dev.

Install

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

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

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 Inter Tight and JetBrains Mono 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.

Docs

• Shiny

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.