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

Titles, axes, legend, headline numbers and number formatting are **configuration**. You add them by piping a `config(...)` part into the spec. Space around the title, legend, axes and footer is `margin` on the stylesheet; see [Layout](/sdk-next/config/layout).

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

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({
  numberFormat: { decimals: 0 },
});

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, provenance mark | [Content](/sdk-next/config/content) |
| `axes` | Labels, position, grid visibility, ticks | [Axes](/sdk-next/config/axes) |
| `legend` | Position, alignment 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) |
| `panel` | How the plot area accommodates overflowing content | [Layout](/sdk-next/config/layout#panel-overflow) |

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.

<Note>
  Paint is a separate surface. The graph background, the panel border, grid and tick strokes,
  label typography and space around title, legend, axes and footer all come from a **stylesheet**
  you pipe in as `styles({...})` — see [Styling](/sdk-next/config/styling) and
  [Layout](/sdk-next/config/layout).
</Note>

`style.graph({ textScale })` multiplies the size of every text element. Because it changes measured text —
and therefore the size of every region — it's documented with
[Layout](/sdk-next/config/layout#text-scale).

## Locale

<ParamField path="parsingLocale" type="'en-GB' | 'en-US' | 'ar' | 'pt-PT'" default="en-US">
  The locale used to interpret source values, and the fallback for formatting
  display output — axis labels, tick labels, tooltips and headline numbers. Pass
  `formattingLocale` to the renderer to override display only; it resolves as
  `formattingLocale ?? parsingLocale`.
</ParamField>

```tsx theme={null}
config({ parsingLocale: 'en-GB' });
```


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