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

# Introduction

The Graphy SDK is a charting library for React, built on a **grammar of graphics**. Rather than picking a chart from a fixed menu, you describe a chart by composing a handful of parts — which columns map to which aesthetics, what shapes to draw, and how values become positions and colors. The same parts recombine into everything from a line chart to a polar racetrack.

## One package

Start with **`@graphysdk/react`**. You describe a chart as a **spec**, and the provider compiles and paints it. The same spec can be stored, reused with other data, or rendered outside React — see [How a chart is built](/sdk-next/concepts/how-a-chart-is-built).

## Anatomy of a spec

A spec is assembled from a few kinds of part, folded together with `pipe`:

```tsx theme={null}
import {
  createSpec,
  pipe,
  geom,
  scale,
  styles,
  style,
  config,
} from '@graphysdk/react';

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue', color: 'product' }), // mapping — columns → aesthetics
  geom.line(), // geom   — the shape to draw
  scale.x(), // scale  — values → positions
  scale.y(),
  scale.color.palette(), // scale  — categories → colors
  styles({ defaults: [style.geom.line({ strokeWidth: 3 })] }), // styles — how the marks are painted
  config({ legend: { position: 'bottom' } }) // config — chart chrome
);
```

Each part has a page that explains it in depth:

| Part | Builder | Concept |
| - | - | - |
| **Mapping** | `mapping` / `createSpec` | [Mappings & aesthetics](/sdk-next/concepts/mappings) |
| **Geom** | `geom.*` | [Geoms & layers](/sdk-next/concepts/geoms) |
| **Scale** | `scale.*` | [Scales](/sdk-next/concepts/scales) |
| **Coord** | `coord.*` | [Coordinate systems](/sdk-next/concepts/coordinate-systems) |
| **Stat** | `stat.*` | [Statistics](/sdk-next/advanced/statistics) |
| **Transform** | `transform.*` | [Transforms](/sdk-next/advanced/transforms) |
| **Styles** | `styles` / `style.*` / `token` | [Styling](/sdk-next/config/styling) |
| **Config** | `config` | [Configuration](/sdk-next/config/index) |

Two more kinds of part carry the storytelling layer: `highlight(...)` for [highlights](/sdk-next/emphasis/highlights) and `annotation.*` for [annotations](/sdk-next/emphasis/annotations).

The builders are convenience — what they produce is a plain, JSON-serializable object. You can store a spec in a database and load it back to render, no builder required. See [Serializable spec](/sdk-next/concepts/serializable-spec).

## Where to start

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/sdk-next/quickstart">
    Install `@graphysdk/react` and render your first chart.
  </Card>

  <Card title="How a chart is built" icon="diagram-project" href="/sdk-next/concepts/how-a-chart-is-built">
    The spec pipeline and the compile → render model.
  </Card>

  <Card title="Data structure" icon="table" href="/sdk-next/data-structure">
    The data table and how mappings reference it.
  </Card>

  <Card title="Chart types" icon="chart-mixed" href="/sdk-next/graph-types/index">
    Recipes for line, bar, pie, scatter and more.
  </Card>
</CardGroup>


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