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

# Quickstart

The Graphy SDK is a grammar-of-graphics charting library, split into two packages:

* **`@graphysdk/viz-engine`** — a framework-agnostic engine. You describe a chart as a **spec** — a small, immutable object built by composing mappings, geoms, scales and coordinate systems. No DOM, no React.
* **`@graphysdk/react-renderer`** — a React renderer that paints a spec to SVG, and owns layout, theming, formatting and interactivity.

You author a spec once and hand it, together with your data, to the renderer.

### 1. Install the packages

<CodeGroup>
  ```shell npm theme={null}
  npm install @graphysdk/viz-engine @graphysdk/react-renderer
  ```

  ```shell pnpm theme={null}
  pnpm add @graphysdk/viz-engine @graphysdk/react-renderer
  ```

  ```shell yarn theme={null}
  yarn add @graphysdk/viz-engine @graphysdk/react-renderer
  ```

  ```shell bun theme={null}
  bun add @graphysdk/viz-engine @graphysdk/react-renderer
  ```
</CodeGroup>

Because the Graphy packages are private, configure your npm auth token. Create an `.npmrc` in your repository root (or user-level) with:

```ini .npmrc theme={null}
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
@graphysdk:registry=https://registry.npmjs.org/
```

Finally, import the renderer's stylesheet once, near your app's entry point:

```ts theme={null}
import '@graphysdk/react-renderer/styles.css';
```

### 2. Render your first chart

A chart needs three things: your **data**, a **spec** describing how to draw it, and the renderer to paint it.

```tsx theme={null}
import { useMemo } from 'react';
import { createSpec, pipe, geom, scale } from '@graphysdk/viz-engine';
import { GraphProvider, GraphRenderer } from '@graphysdk/react-renderer';

// 1. Your data — a table of columns and rows.
const data = {
  columns: [
    { key: 'month', label: 'Month' },
    { key: 'revenue', label: 'Revenue' },
  ],
  rows: [
    { month: 'Jan', revenue: 12000 },
    { month: 'Feb', revenue: 15000 },
    { month: 'Mar', revenue: 18000 },
    { month: 'Apr', revenue: 17000 },
    { month: 'May', revenue: 21000 },
  ],
};

export function App() {
  // 2. The spec — map columns to aesthetics, pick a geom, declare the scales.
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: 'month', y: 'revenue' }),
        geom.line(),
        scale.x(),
        scale.y()
      ),
    []
  );

  // 3. Render it.
  return (
    <GraphProvider input={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}
```

### 3. Customize the chart

Everything beyond the data-to-ink mapping — titles, axes, legend, appearance — lives in `config`. Pipe a `config(...)` item onto the spec:

```tsx theme={null}
import { createSpec, pipe, geom, scale, config } from '@graphysdk/viz-engine';

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue', color: 'product' }),
  geom.line({ params: { interpolate: 'catmull-rom', showFill: true } }),
  scale.x(),
  scale.y.continuous({ domainMin: 0, nice: true }),
  scale.color.palette(),
  config({
    content: {
      title: 'Monthly revenue',
      isTitleVisible: true,
      subtitle: 'By product, 2026',
      isSubtitleVisible: true,
    },
    axes: {
      y: { label: 'Revenue (£)' },
    },
    legend: { position: 'bottom' },
  })
);
```

### 4. Theme and locale

`GraphProvider` accepts a `theme` (`'light'` or `'dark'`) and a `formattingLocale` for number, date and currency formatting:

```tsx theme={null}
<GraphProvider input={spec} data={data} theme="dark" formattingLocale="en-GB">
  <GraphRenderer sizing={{ mode: 'responsive' }} />
</GraphProvider>
```

The `sizing` prop on `GraphRenderer` controls how the chart claims space — `responsive` fills its container, `fixed` takes explicit `width`/`height`, and `keepAspectRatio` scales to width while preserving a ratio.

### Next steps

* Understand [how a chart is built](/sdk-next/concepts/how-a-chart-is-built) — the spec pipeline and the compile → render model
* Learn the [data structure](/sdk-next/data-structure) and how mappings reference columns
* Work through the [core concepts](/sdk-next/concepts/mappings) — mappings, geoms, scales, coords
* Browse the [chart types](/sdk-next/graph-types/index) and build a [line chart](/sdk-next/graph-types/line) end to end