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

# Axes

The `axes` section controls how each position [scale](/sdk-next/concepts/scales) is drawn — its label, side, grid lines and ticks. It's keyed by axis: `x`, `y`, and `ySecondary` for [combo charts](/sdk-next/graph-types/combo).

```tsx theme={null}
config({
  axes: {
    x: { label: 'Month' },
    y: { label: 'Revenue (£)', position: 'left' },
  },
});
```

## Per-axis options

<ParamField path="label" type="string | null">
  Axis title text. `null` means no label.
</ParamField>

<ParamField path="isVisible" type="boolean" default="true">
  Whether the axis is drawn at all.
</ParamField>

<ParamField path="position" type="'left' | 'right' | 'top' | 'bottom'">
  Which side the axis sits on. Defaults to `'bottom'` for `x` and `'right'` for
  `y`.
</ParamField>

<ParamField path="grid" type="object">
  Grid lines for this axis — see below.
</ParamField>

<ParamField path="ticks" type="object">
  Ticks for this axis — see below.
</ParamField>

## Grid lines

Each axis owns its grid. Config decides **whether** the lines are drawn:

```tsx theme={null}
config({
  axes: {
    y: { grid: { isVisible: true } },
    x: { grid: { isVisible: false } },
  },
});
```

<ParamField path="grid.isVisible" type="boolean | null" default="null">
  `true`/`false` to force visibility; `null` lets the engine decide from the
  geom (e.g. bar charts hide the category-axis grid). With nothing to decide
  from, `x` and `y` grids show and a secondary y grid stays hidden.
</ParamField>

How the lines look — colour, width, dash pattern — comes from the stylesheet's `gridLine` target:

```tsx theme={null}
styles({
  defaults: [
    style.gridLine.y({ stroke: '#E9E9E9', strokeWidth: 1, dashArray: [] }),
  ],
});
```

See [Styling](/sdk-next/config/styling) for the full target list.

## Ticks

<ParamField path="ticks.isVisible" type="boolean">
  Whether tick **marks** — the short lines that step out of the axis — are
  drawn. Defaults to `true` for `x` and `false` for `y`. Tick *labels* render
  either way; their paint lives on the stylesheet's `tickLabel` target, and the
  marks' on `tickLine`.
</ParamField>

<ParamField path="ticks.mode" type="'auto' | 'edges'" default="auto">
  `'auto'` places ticks across the axis; `'edges'` collapses a continuous or
  datetime axis to the two domain endpoints. Discrete axes keep their full
  domain either way.
</ParamField>

<Note>
  The axis controls labels, ticks and grid; the *range* of an axis comes from its [scale](/sdk-next/concepts/scales)
  — use `scale.y.continuous({ domainMin: 0, nice: true })` to pin bounds.
</Note>

## The second y axis

`ySecondary` is a **sparse override** of the primary y axis, for
[combo charts](/sdk-next/graph-types/combo) that pair two value scales. Every field you leave unset
is inherited when the chart compiles:

| Field | Inherited from |
| - | - |
| `position` | the side opposite `y` |
| `isVisible`, `grid`, `ticks` | `y` |
| `label` | nothing — a secondary axis starts unlabelled |

```tsx theme={null}
config({
  axes: {
    y: { label: 'Revenue (£)' },
    ySecondary: { label: 'Orders' },
  },
});
```

Pinning a field fixes it: once you set `ySecondary.position`, it stays on that side however `y` moves.

## Panel border and baseline

The **panel** is the plot area. Its border is painted from the stylesheet, one entry per edge, which
is how you draw a single baseline under the bars or a full frame around the plot:

```tsx theme={null}
styles({
  defaults: [
    style.panelBorder({ strokeWidth: 0 }),
    style.panelBorder.bottom({
      strokeWidth: 1,
      dashArray: [],
      stroke: '#1D1D1B',
    }),
  ],
});
```

Each edge builder (`.top`, `.right`, `.bottom`, `.left`) takes `color`, `strokeWidth` and
`dashArray`. **An edge with `strokeWidth: 0` is hidden and reserves no space**, so the bare
`style.panelBorder({ strokeWidth: 0 })` entry above clears all four before the baseline is put back.
Corner rounding is panel-wide and lives on the bare builder:

```tsx theme={null}
styles({ defaults: [style.panelBorder({ cornerRadius: 12 })] });
```

The built-in default is a dashed border with `cornerRadius: 6`. See
[Styling](/sdk-next/config/styling) for how entries resolve.

## Related

* [Scales](/sdk-next/concepts/scales) — the axis range and type
* [Styling](/sdk-next/config/styling) — grid, tick, panel-border and frame paint
* [Layout › Panel overflow](/sdk-next/config/layout#panel-overflow) — how the panel makes room for labels that spill past its edge


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