Financial charts
Renko
Fixed-size bricks that ignore time.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { RenkoSeries } from "@reincharts/series";
import { renko } from "@reincharts/indicators";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair } from "@reincharts/coordinates";
import { Legend } from "@reincharts/tooltip";
import { useMemo } from "react";
import { daily } from "@/lib/data";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
export default function Renko() {
const theme = useDocsChartTheme();
// renko() turns time bars into Renko data: one datum per brick
const data = useMemo(() => renko(daily, { boxSize: 0.5 }), []);
return (
<ChartCanvas data={data} theme={theme} barSpacing={10}>
<Pane>
<Grid />
<RenkoSeries name="MSFT" />
<YAxis />
<Legend title="MSFT · Renko" />
</Pane>
<XAxis />
<Crosshair />
</ChartCanvas>
);
}Usage
Renko bricks are built by the renko() transform from @reincharts/indicators and drawn by <RenkoSeries>. A
new brick is added each time the price moves one box size beyond the last brick; reversals need two boxes. The box size
is a price amount or "atr" (default, the ATR at the last bar).
import { RenkoSeries } from "@reincharts/series";
import { renko } from "@reincharts/indicators";
const bricks = useMemo(() => renko(bars, { boxSize: 0.5 }), [bars]);
<ChartCanvas data={bricks}>
<RenkoSeries />
</ChartCanvas>;The last brick is still forming (fullyFormed: false) and drawn hollow; pass partial: false to renko() to drop it.