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

# Overview

Everything beyond the data-to-ink mapping — titles, axes, legend, appearance, layout — is **configuration**. You add it by piping a `config(...)` part into the spec.

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

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.line(),
  scale.x(),
  scale.y(),
  config({
    content: { title: 'Monthly revenue', isTitleVisible: true },
    axes: { y: { label: 'Revenue (£)' } },
    legend: { position: 'bottom' },
  })
);
```

## How config composes

`config` is just another spec part, so it follows the same [pipe rules](/sdk-next/concepts/how-a-chart-is-built#the-builder-pipeline) as the rest — with one twist: **config deep-merges**. Piping several `config(...)` parts combines them rather than replacing, so you can layer a shared base with per-chart overrides:

```tsx theme={null}
const base = config({
  appearance: { background: { type: 'solid', color: '#fff' } },
});

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.bar(),
  scale.x(),
  scale.y(),
  base,
  config({ content: { title: 'Q1', isTitleVisible: true } }) // merged onto base
);
```

Anything you don't set keeps its resolved default.

## Sections

| Section        | Controls                                      | Page                                                  |
| -------------- | --------------------------------------------- | ----------------------------------------------------- |
| `content`      | Title, subtitle, caption, source              | [Content](/sdk-next/config/content)                   |
| `axes`         | Labels, position, grid, ticks, baseline       | [Axes](/sdk-next/config/axes)                         |
| `legend`       | Position and display mode                     | [Legend](/sdk-next/config/legend)                     |
| `headline`     | Summary numbers above or inside the chart     | [Headline numbers](/sdk-next/config/headline-numbers) |
| `numberFormat` | Decimals, abbreviation, separators, affixes   | [Number format](/sdk-next/config/number-format)       |
| `appearance`   | Background, border, corner radius, text scale | [Appearance](/sdk-next/config/appearance)             |
| `layout`       | Outer padding and per-region gaps             | [Layout](/sdk-next/config/layout)                     |

Data labels sit slightly apart — they're a [per-layer geom option](/sdk-next/config/data-labels) rather than a `config` section, because labels attach to a specific observation.