> ## 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. Toggle visibility and style the lines:

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

<ParamField path="grid.isVisible" type="boolean | null">
  `true`/`false` to force visibility; `null` lets the engine decide from the
  geom (e.g. bar charts hide the category-axis grid by default).
</ParamField>

<ParamField path="grid.lineStyle" type="'solid' | 'dashed' | 'dotted'" default="dashed">
  Dash pattern of the grid lines.
</ParamField>

<ParamField path="grid.lineWidth" type="number | null">
  Grid line width in px. `null` inherits the theme's grid line width.
</ParamField>

## Ticks

<ParamField path="ticks.isVisible" type="boolean">
  Whether tick labels are shown for this axis.
</ParamField>

<ParamField path="ticks.mode" type="'auto' | 'edges'">
  `'auto'` places ticks across the axis; `'edges'` shows only the first and
  last.
</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>

## Panel border and baseline

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

```tsx theme={null}
config({
  panel: {
    border: {
      bottom: { isVisible: true, lineStyle: 'solid', lineWidth: 1 },
      top: { isVisible: false },
      left: { isVisible: false },
      right: { isVisible: false },
    },
  },
});
```

Each edge (`top`, `right`, `bottom`, `left`) takes `isVisible`, `lineStyle`, `lineWidth` (px, `null` inherits the theme), and `color` (any CSS color or theme token, `null` inherits). A corner is rounded only when both edges meeting at it are visible.

## Related

* [Scales](/sdk-next/concepts/scales) — the axis range and type
* [Appearance](/sdk-next/config/appearance) — the border ring around the whole chart