---
id: "packages/active-charts/dual-axes"
title: "Two y axes"
description: "Binding a series to a second y axis with yAxisId, and reference lines on either axis."
url: "/packages/active-charts/dual-axes"
locale: "en"
revision: "5c89b3be7ad19d97"
---

# Two y axes

> [!NOTE]
> **The package's own guide**
>
> This page is the package's `docs/recipes/DUAL-AXES.md`, included unchanged
> from the package as it is in Foundation. Links to the package's internal
> design documents keep their text.

Two quantities with different units on one chart: money on the left, a ratio
on the right. More than two axes is not supported: it is a parked Level 2
candidate, not authorised (ADR-041).

## Bind by axis key

A series names its axis with `yAxisId`. The key of an axis is its `id`, or
its position when it has none, so `yAxisId: 'right'` binds to the right axis
either way. Every stage uses that one binding: the domain, the drawing, hit
testing, the tooltip, the screen-reader table and the announcements. An
unknown key falls back to the default (left) axis everywhere at once, with a
development diagnostic.

```tsx
<Chart
  data={data}
  height={320}
  options={{
    series: [
      {
        type: 'bar',
        xKey: 'month',
        yKey: 'premiums',
        name: t('p.premiums'),
        stacked: true,
      },
      {
        type: 'bar',
        xKey: 'month',
        yKey: 'costs',
        name: t('p.costs'),
        stacked: true,
      },
      {
        type: 'line',
        xKey: 'month',
        yKey: 'ratio',
        name: t('p.ratio'),
        yAxisId: 'right',
      },
    ],
    axes: [
      {position: 'bottom', type: 'category'},
      {
        position: 'left',
        type: 'number',
        valueSemantics: {kind: 'money', currency: 'EUR', decimals: 0},
      },
      {
        position: 'right',
        type: 'number',
        valueSemantics: {kind: 'percent', source: 'percentage-points'},
      },
    ],
    crossLines: [{type: 'line', value: 105, yAxisId: 'right', label: '105'}],
    tooltip: {enabled: true, mode: 'shared'},
    legend: true,
  }}
/>
```

Each axis declares its own `valueSemantics`; the series on it inherit them,
so the tooltip shows `€ 1,250` next to `104.5%`. A reference line on the
right axis names it with `yAxisId`, like a series.

## Stacks

Stacks are per axis: bars on the left stack with each other, never with
bars on the right. Hiding every series of one axis rescales that axis only;
the other axis and its series do not move.

## Limits

- Two y axes; a third (and same-side offsets) is a parked Level 2 candidate
  (ADR-041).
- One x axis; independent x axes are not supported.
- The wrappers (`LineChart`, `AreaChart`) give both y axes the same `yAxis`
  configuration; declare per-axis units with the low-level `<Chart>`.