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

# Botanical

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'
  }} />;
};

Botanical draws graphs as a page from a gardener's sketchbook: grained paper taped down at its corners with a sprig along its foot, every shape outlined by hand in sepia with a watercolour wash inside, and handwriting throughout.

<Warning>
  Botanical ships as its own package, `@graphysdk/theme-botanical`, 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-botanical--chart" args={{ chart: 'bar' }} aspectRatio="4 / 3" borderRadius="0" />

## Install

```bash theme={null}
npm install @graphysdk/theme-botanical
```

Its peer dependencies are `@graphysdk/react` and React 19. Pass the theme to `createGraphyKit` and import its fonts once:

```tsx theme={null}
import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
import { botanical } from '@graphysdk/theme-botanical';
import '@graphysdk/theme-botanical/fonts.css';

const kit = createGraphyKit({ theme: botanical });
```

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={botanical}>`.

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 Botanical sets |
| - | - |
| Stylesheet | Grained paper taped down at its corners with a sprig drawn along its foot, hairline rules for the values and none for the categories, a sepia baseline, notes in the gardener's hand with no box |
| Colors | Eight colors for groups, leaf greens set between a petal pink, a bark brown, a berry red, a muted gold and a gentian blue, and a ramp from a pale sage to a deep forest green |
| Geoms | Bars as leaf blades with a rib and veins; lines as vines with a leaf at each reading; points as fallen leaves; slices as petals round a seed head; areas as washes; heatmap cells as a seed tray |
| Color scheme | Light, whatever `colorScheme` the provider is given |

<GraphEmbed story="themes-botanical--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. This graph keeps the sketchbook and draws its groups in two greens:

```tsx theme={null}
kit.pipe(spec, kit.scale.color.discrete({ range: ['#2E5E3B', '#6E8A5A'] }));
```

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

Theme and plugins go to the same kit. A geom package built from the shared shapes, such as the [dumbbell](/sdk-next/graph-types/dumbbell), draws its dots washed inside a sepia outline too, and takes the theme's colors, type and axes.

```tsx theme={null}
import { dumbbell } from '@graphysdk/geom-dumbbell';

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

## Fonts

`fonts.css` loads Kalam for the handwriting and Cormorant Garamond for the italic notes from Google Fonts. To host the fonts yourself, leave the import out and load families named `Kalam` and `Cormorant Garamond` before the first graph is drawn.


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