@graphysdk/theme-spreadsheet

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 spreadsheet theme for the Graphy charting SDK: graphs drawn the way a spreadsheet charts them, on a white ground with grey type, light grey rules and flat colour.

Learn more at graphy.dev.

Install

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

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

Usage

Pass the theme to createGraphyKit. Every graph drawn through the kit's GraphProvider takes the theme; specs are written as usual.

import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
import { spreadsheet } from '@graphysdk/theme-spreadsheet';

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

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.

The theme is set in Arial, which every system has, so there is no font to load.

Docs

• Spreadsheet

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.