Candlestick
Candlesticks with hollow, colored and volume-weighted variants.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { CandlestickSeries } from "@reincharts/series";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair, LastValueLine } from "@reincharts/coordinates";
import { Legend } from "@reincharts/tooltip";
import { daily } from "@/lib/data";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
export default function CandlestickExample() {
const theme = useDocsChartTheme();
return (
<ChartCanvas data={daily} theme={theme} barSpacing={10}>
<Pane>
<Grid />
<CandlestickSeries name="MSFT" />
<LastValueLine />
<YAxis />
<Legend title="MSFT · 1D" />
</Pane>
<XAxis />
<Crosshair />
</ChartCanvas>
);
}Usage
import { CandlestickSeries } from "@reincharts/series";
<Pane>
<CandlestickSeries />
<YAxis />
</Pane>;By default the series reads open, high, low and close and colors candles with the theme's up / down colors.
Map other data shapes with accessors:
<CandlestickSeries<Quote> open="o" high="h" low="l" close={(d) => d.last} />All candles of one color are batched into a single path, so tens of thousands of candles render in a few milliseconds. Bodies narrower than 3px collapse to wicks only.
Hollow candles
hollow draws rising candles as outlines. Pair it with the magnet crosshair, which snaps to the nearest open / high /
low / close.
See the hollow candles example →
Custom colors
Set upColor / downColor, or compute a color per candle with fill (plus wickColor and borderColor). The example
highlights wide ranges.
See the custom candle colors example →
Volume candles
<VolumeCandlesSeries> encodes volume in each candle: its opacity (mode="color"), its body
width ("width", equivolume) or both.