Financial charts
Volume & columns
Volume bars on an overlay scale or in their own pane, and close-price columns.
Volume overlay
The classic layout: volume bars at the bottom of the price pane. Put <VolumeSeries> on its own scale (any id without
an axis is an overlay) and give that scale a large top margin, so the bars use only the bottom fifth of the pane.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { CandlestickSeries, VolumeSeries } from "@reincharts/series";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair } from "@reincharts/coordinates";
import { Legend } from "@reincharts/tooltip";
import { daily } from "@/lib/data";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
export default function OverlayScale() {
const theme = useDocsChartTheme();
return (
<ChartCanvas data={daily} theme={theme} barSpacing={8}>
<Pane
scales={{
// price uses the top 70%, the overlay "volume" scale (no axis) the bottom 20%
right: { margins: { top: 0.1, bottom: 0.3 } },
volume: { margins: { top: 0.8, bottom: 0 } },
}}
>
<Grid />
<CandlestickSeries name="MSFT" />
{/* after the candles, so the legend lists MSFT first */}
<VolumeSeries scale="volume" />
<YAxis />
<Legend title="MSFT · 1D" />
</Pane>
<XAxis />
<Crosshair />
</ChartCanvas>
);
}<Pane scales={{ volume: { margins: { top: 0.8, bottom: 0 } } }}>
<VolumeSeries scale="volume" />
<CandlestickSeries />
</Pane>Bars are colored by the bar's direction (close >= open) with the theme's volume.up / volume.down colors. Because
volume is never negative, bars grow from the bottom of the pane.
Volume pane
Or give volume a pane of its own, with compact axis labels.
Columns
<ColumnsSeries> draws one column per close price, colored by the change from the
previous bar.