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

# Phosphor

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

Phosphor draws graphs on a cathode-ray tube: a dark screen, shapes and type that glow green, and a terminal face throughout.

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

## Install

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

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

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

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: 'country', y: 'emissions' }),
  kit.geom.bar(),
  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={phosphor}>`.

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 Phosphor sets |
| - | - |
| Stylesheet | A dark screen under scanlines, a bright line under the plot, a dotted grid, a glow on shapes and labels |
| Colors | Five tube colors (green, amber, cyan, pink, white) for groups, and a ramp from a dim to a lit green |
| Geoms | None repainted. Filled shapes are lit faintly and outlined in their own color |
| Color scheme | Dark, whatever `colorScheme` the provider is given |

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

## The screen

The scanlines and the dark corners are an `overlay`, paint drawn over what lies under it. The graph has one over everything it draws, and each geom has one over its own shapes, so lit shapes show the lines more than the dark around them. Both are in the stylesheet, and a spec can turn either off:

```tsx theme={null}
kit.styles({
  defaults: [
    kit.style.graph({ overlay: 'none' }),
    kit.style.geom({ overlay: 'none' }),
  ],
});
```

## Changing the look of one graph

A spec's own `styles()`, scales and `config()` sit above the theme. This graph keeps the screen and takes amber for its bars, with no glow:

```tsx theme={null}
kit.pipe(
  spec,
  kit.styles({
    defaults: [
      kit.style.geom.bar({
        fill: '#FFC247',
        stroke: '#FFC247',
        shadow: 'none',
      }),
    ],
  })
);
```

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

Phosphor repaints no geom. A geom from a package, such as the [dumbbell](/sdk-next/graph-types/dumbbell), is lit the same way as a built-in one.

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

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

## Fonts

`fonts.css` loads VT323 from Google Fonts. To host the font yourself, leave the import out and load a family named `VT323` before the first graph is drawn. The face has one weight, and the theme sets every label in it.


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