Spreadsheet

Spreadsheet draws graphs the way a spreadsheet or a slide deck charts them: a white ground in a thin gray edge, a gray title, light gray rules for the values over one darker line under the plot, and square shapes in flat color.

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

Its peer dependencies are @graphysdk/react and React 19. Pass the theme to createGraphyKit; it is set in Arial, so there are no fonts to import:

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

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

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={spreadsheet}>. 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 Spreadsheet sets
Stylesheet	A white ground in a thin gray edge, light gray rules for the values and one darker line under the plot, a gray title, square shapes with no border, a white tooltip
Colors	Blue, red, yellow, green and orange for groups, and a ramp from the palest blue to a deep one
Config	Values on the left, the legend centerd above the plot
Geoms	None repainted
Color scheme	Light, whatever `colorScheme` the provider is given

Changing the look of one graph

A spec’s own styles(), scales and config() sit above the theme. Yellow and orange sit under 3:1 contrast against white, but keep their place in the palette because that order is the look. This graph keeps the look and draws its groups in blue, red and green only:

kit.pipe(
  spec,
  kit.scale.color.discrete({ range: ['#5384EC', '#D75140', '#58A55D'] })
);

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

Spreadsheet repaints no geom. A geom from a package, such as the dumbbell, is drawn in the theme’s colors and type like a built-in one.

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

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

Fonts

The theme is set in Arial, which every system has, so it loads no font and ships no fonts.css.

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Install

What the theme decides

Changing the look of one graph

With a geom package

Fonts

​Install

​What the theme decides

​Changing the look of one graph

​With a geom package

​Fonts

Install

What the theme decides

Changing the look of one graph

With a geom package

Fonts