Financial charts
Overview
Candlesticks and every other price chart type, on the same engine as the general charts.
Financial charts use the same <ChartCanvas>, panes, axes and crosshair as every other chart. The x axis defaults to
evenly spaced slots (xMode="index"), so weekends and overnight gaps disappear, and the y axis supports log, percent
and indexed scales.
"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>
);
}Candlestick
Candles, hollow candles, volume candles.
OHLC & HLC bars
Open-high-low-close bars.
Heikin Ashi
Smoothed candles that filter noise.
Baseline
Two colors above / below a base value.
HLC area
High, low and close as a filled range.
Volume & columns
Volume bars and close columns.
Volume profile
Volume by price, per range or session.
Renko
Fixed-size bricks, time-independent.
Kagi
Reversal lines with yin / yang thickness.
Point & Figure
Columns of X and O.
Line break
Three-line break boxes.
Beyond chart types
- Indicators: 30+ technical indicators as pure calculators and ready-made components.
- Drawing tools: Fibonacci, channels, positions and price labels, on top of the general drawing tools.
- Datafeed: history pages, realtime updates, aggregation and bar replay.
- TradingChart widget: all of the above assembled into one component.