Two unrelated measures on one pane — a price and its RSI, a request rate and its error rate. Each sits on its own Y scale with its own autoscale, and they share the time axis, the crosshair and the tooltip.
01 — NAME A SCALE
scales on the container declares named Y scales. Each one takes the same fields as axis.y — position, min / max, width, visible, a scale transform such as logScale(). position defaults to the side opposite the default axis. Keep the object stable: a changed scale refits.const SCALES = { rsi: { position: 'left', min: 0, max: 100 } }; <ChartContainer scales={SCALES}>…</ChartContainer>02 — PUT A SERIES ON IT
A line, bar, candlestick or band series opts in with
scale. It autoscales on its own — here pinned to 0..100 — while the price keeps the default scale, and both share the time axis. A series without scale stays on the default scale.<LineSeries id="price" data={price} /><LineSeries id="rsi" scale="rsi" data={rsi} />03 — GIVE IT AN AXIS
<YAxis scale="rsi" /> renders that scale's column; its format also drives the crosshair label on that side. One column fits on each side — visible: false makes an overlay scale with no column. Grid lines follow the default scale.<YAxis /><YAxis scale="rsi" format={(v) => v.toFixed(0)} />04 — ANNOTATE IN ITS UNITS
ReferenceLine, Marker and YLabel take scale too. A YLabel follows its series' scale on its own and sits on that scale's side.<ReferenceLine value={70} scale="rsi" label="overbought" /><YLabel seriesId="rsi" />