> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Spreadsheet

export const GraphEmbed = ({src, story, aspectRatio, borderRadius = '14px', args}) => {
  const STORYBOOK_BASE_URL = typeof window !== 'undefined' && window.location.hostname === 'localhost' ? 'http://localhost:6006' : 'https://storybook-sdk.vercel.app';
  function buildArgsString(args) {
    if (!args) return '';
    const encodeValue = value => {
      if (value === null) return '!null';
      if (value === undefined) return '!undefined';
      if (typeof value === 'boolean') return `!${value}`;
      if (typeof value === 'number') return String(value);
      return encodeURIComponent(String(value));
    };
    const properties = Object.entries(args).map(([key, value]) => `${key}:${encodeValue(value)}`).join(';');
    return `&args=${properties}`;
  }
  const resolvedSrc = story ? `${STORYBOOK_BASE_URL}/iframe.html?id=${story}&viewMode=story&embed=1&globals=mode:readonly${buildArgsString(args)}` : src;
  const resolvedAspectRatio = aspectRatio ?? (story ? '16 / 9' : '10 / 6');
  return <iframe src={resolvedSrc} loading="lazy" allowfullscreen="true" style={{
    width: '100%',
    aspectRatio: resolvedAspectRatio,
    border: 'none',
    borderRadius,
    colorScheme: 'light'
  }} />;
};

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.

<Warning>
  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](https://discord.gg/yGmYCjkSr).
</Warning>

<GraphEmbed story="themes-spreadsheet--chart" args={{ chart: 'bar' }} aspectRatio="4 / 3" borderRadius="0" />

## Install

```bash theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
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 |

<GraphEmbed story="themes-spreadsheet--chart" args={{ chart: 'line' }} aspectRatio="4 / 3" borderRadius="0" />

## 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:

```tsx theme={null}
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](/sdk-next/graph-types/dumbbell), is drawn in the theme's colors and type like a built-in one.

```tsx theme={null}
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`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.