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

# Layout

The `layout` section controls the whitespace around the chart — the outer padding, and the gaps between the regions the engine arranges (header, legend, axes, plot).

```tsx theme={null}
config({
  layout: { padding: 32 },
});
```

## Padding

<ParamField path="padding" type="number | null" default="24">
  Outer padding in pixels, applied on all four sides. `null` uses the engine
  default.
</ParamField>

## Region gaps

The chart is laid out as a grid of named regions. `gaps` overrides the spacing around any of them; anything left unset keeps the default.

```tsx theme={null}
config({
  layout: {
    padding: 24,
    gaps: {
      header: 40, // space below the header
      bottomLegend: 16,
    },
  },
});
```

A gap value is either a number (sets the trailing/`after` gap) or `{ before, after }` to set each edge independently.

The overridable regions are:

| Direction | Regions                                                                                                       |
| --------- | ------------------------------------------------------------------------------------------------------------- |
| Rows      | `header`, `headline`, `topLegend`, `topAxisLabel`, `topAxis`, `bottomAxis`, `bottomAxisLabel`, `bottomLegend` |
| Columns   | `leftLegend`, `leftAxis`, `rightAxis`                                                                         |

<Note>
  Adjacent regions share a boundary using a `max(previous.after, next.before)`
  rule, so a lone `after` can't shrink a boundary below the following region's
  `before`.
</Note>

## Related

* [Appearance](/sdk-next/config/appearance) — background, border and corner radius
* [Legend](/sdk-next/config/legend) — legend position feeds the region layout