Price scales
Linear, log, percent and indexed scales, margins, multiple scales per pane and overlays.
Every pane has one or more price scales, identified by a string id. Series use the "right" scale unless they set
scale, and a <YAxis scale="..."> shows a scale's labels. Configure scales per pane with <Pane scales>:
<ChartCanvas data={bars}>
<Pane scales={{ right: { mode: "log" }, volume: { margins: { top: 0.8, bottom: 0 } } }}>
<CandlestickSeries /> {/* on the "right" scale (log) */}
<VolumeSeries scale="volume" /> {/* on its own scale, in the bottom 20% */}
<YAxis /> {/* labels of the "right" scale */}
</Pane>
<XAxis />
</ChartCanvas>"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { CandlestickSeries, VolumeSeries } from "@reincharts/series";
import { XAxis, YAxis } from "@reincharts/axes";
import { daily } from "@/lib/data";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
export default function PriceScales() {
const theme = useDocsChartTheme();
return (
<ChartCanvas data={daily} theme={theme}>
<Pane scales={{ right: { mode: "log" }, volume: { margins: { top: 0.8, bottom: 0 } } }}>
<CandlestickSeries /> {/* on the "right" scale (log) */}
<VolumeSeries scale="volume" /> {/* on its own scale, in the bottom 20% */}
<YAxis /> {/* labels of the "right" scale */}
</Pane>
<XAxis />
</ChartCanvas>
);
}Modes
| Mode | What it shows |
|---|---|
"linear" | Raw values (default). |
"log" | Logarithmic: equal percentage moves take equal space. |
"percent" | Change from the first visible bar, in %. Great for comparing symbols. |
"indexed" | Rebased to 100 at the first visible bar. |
"use client";
import { ChartCanvas, Pane, type PriceScaleMode } from "@reincharts/core";
import { CandlestickSeries } from "@reincharts/series";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair } from "@reincharts/coordinates";
import { useState } from "react";
import { Segmented, WithToolbar } from "@/components/preview/controls";
import { daily } from "@/lib/data";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
export default function PriceScaleModes() {
const theme = useDocsChartTheme();
const [mode, setMode] = useState<PriceScaleMode>("percent");
return (
<WithToolbar
toolbar={
<Segmented
label="mode"
value={mode}
options={["linear", "log", "percent", "indexed"] as const}
onChange={setMode}
/>
}
>
<ChartCanvas data={daily} theme={theme} barSpacing={4}>
<Pane scales={{ right: { mode } }}>
<Grid />
<CandlestickSeries />
<YAxis />
</Pane>
<XAxis />
<Crosshair />
</ChartCanvas>
</WithToolbar>
);
}Autoscale, margins and manual scaling
Scales fit the visible data automatically, leaving margins (fractions of the pane height, default 10% top and bottom).
Dragging the price axis (or scrolling over it) scales it and turns autoscale off for that scale; double-clicking the
axis turns it back on.
While a scale autoscales, dragging the plot only pans in time, so the data can't be dragged out of view. Once the user
has adjusted the price scale, dragging the plot pans vertically too. Set yPan={false} on a <Pane> to keep panning
horizontal only.
Fix the range with domain: [min, max], or customize what autoscale considers with extents (per-bar values) or
extentsCalculator. invert flips the scale.
Multiple scales
Give series different scale ids and show each with its own axis. For example, an index on the left and two stocks on the right can share one pane.
See the multiple scales example →
Overlay scales
A scale without an axis is an overlay. The classic use is volume at the bottom of the price pane: put it on its own scale and give that scale a large top margin, so it uses only the bottom fifth of the pane.
See the volume overlay example →
Category scales
categories: ["A", "B", "C"] turns a scale into a band scale where value i is the i-th category, for horizontal bar
charts (with xMode="linear" so values run along x). Pan, zoom and the crosshair keep working.
See the horizontal bars example →
Labels
Tick and axis labels use the scale's formatter: set precision for a fixed number of decimals or format(value) for
anything else (currencies, units, compact numbers). <YAxis tickFormat> only changes the axis ticks. All scale options
are listed in the PriceScaleOptions reference.