Financial charts
Heikin Ashi
Smoothed candles computed from averaged prices.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { CandlestickSeries } from "@reincharts/series";
import { heikinAshi } 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 HeikinAshiChart() {
const theme = useDocsChartTheme();
// heikinAshi() returns new bars (averaged OHLC); draw them with the regular candlestick series
const bars = useMemo(() => heikinAshi(daily), []);
return (
<ChartCanvas data={bars} theme={theme} barSpacing={10}>
<Pane>
<Grid />
<CandlestickSeries name="MSFT" />
<YAxis />
<Legend title="MSFT · Heikin Ashi" />
</Pane>
<XAxis />
<Crosshair />
</ChartCanvas>
);
}Usage
Heikin Ashi is a data transform, not a separate series: heikinAshi(bars) from @reincharts/indicators returns new
bars with averaged OHLC, which you draw with the regular <CandlestickSeries>.
import { CandlestickSeries } from "@reincharts/series";
import { heikinAshi } from "@reincharts/indicators";
const haBars = useMemo(() => heikinAshi(bars), [bars]);
<ChartCanvas data={haBars}>
<CandlestickSeries />
</ChartCanvas>;close = (open + high + low + close) / 4open = (previous HA open + previous HA close) / 2high/low= the extremes of the bar's high / low and the HA open / close
Indicators keep working on the transformed bars. To compute indicators on the real prices instead, pass the original
values through as extra fields and point the indicator source at them.