Two y axes

Binding a series to a second y axis with yAxisId, and reference lines on either axis.

@workspace/active-charts 6.0.0Status unknowncontent differs from the recorded release 6.0.0baseline ce081dc3

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

This page as Markdown