Overview

"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { CandlestickSeries } from "@reincharts/series";
import { BollingerBands, MACD, MovingAverage, RSI } from "@reincharts/indicators";
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 IndicatorsOverview() {
    const theme = useDocsChartTheme();
    return (
        <ChartCanvas data={daily} theme={theme} barSpacing={8}>
            <Pane id="price" size={3}>
                <Grid />
                <CandlestickSeries name="MSFT" />
                {/* overlays share the price scale */}
                <MovingAverage type="ema" period={20} color="#f59e0b" />
                <BollingerBands />
                <YAxis />
                <Legend title="MSFT · 1D" />
            </Pane>
            {/* oscillators get their own panes */}
            <Pane id="rsi">
                <Grid vertical={false} />
                <RSI />
                <YAxis />
                <Legend />
            </Pane>
            <Pane id="macd">
                <Grid vertical={false} />
                <MACD />
                <YAxis />
                <Legend />
            </Pane>
            <XAxis />
            <Crosshair />
        </ChartCanvas>
    );
}

@reincharts/indicators (also exported by reincharts) has three layers:

• Calculators: pure, single-pass functions such as sma, ema, rsi, macd, bollinger, ichimoku, vwap... Each returns arrays aligned 1:1 with your data, undefined during warm-up. Use them anywhere, even on a server. See Calculators.
• Definitions: a registry (indicators.rsi, indicators.macd... 32 of them) describing each indicator's inputs, outputs, levels, fills and scale. Each definition is also exported on its own (rsiIndicator, macdIndicator...). Add your own with defineIndicator.
• <Indicator definition={...} /> renders any definition: lines, histograms, areas, dots, step lines, levels and band fills, with autoscale, a legend item ("RSI 14 close") and magnet support.

import { Indicator, indicators, MovingAverage, RSI } from "@reincharts/indicators";

<ChartCanvas data={bars}>
  <Pane size={3}>
    <CandlestickSeries />
    <MovingAverage type="ema" period={21} />
    <Indicator definition={indicators.bollinger} inputs={{ multiplier: 2.5 }} />
  </Pane>
  <Pane>
    <RSI />
  </Pane>
</ChartCanvas>;

Overlays and panesCopy Anchor Link

Overlays (moving averages, bands, Ichimoku, SAR, VWAP...) go in the price pane and share its scale. Oscillators (RSI, MACD, Stochastic...) go in their own <Pane>. Their levels and band fills (RSI 30 / 70) are part of the autoscale; pass fitDomain to always show the full range (RSI 0-100), or pin it with <Pane scales={{ right: { domain: [0, 100] } }}>. Each definition's overlay flag says which kind it is.

Convenience componentsCopy Anchor Link

MovingAverage, BollingerBands, MACD, RSI, Stochastic, ATR, ElderRay, ForceIndex and SAR are <Indicator> with typed inputs as props:

<MACD fast={8} slow={21} signal={5} />
<Indicator definition={indicators.macd} inputs={{ fast: 8, slow: 21, signal: 5 }} /> {/* same */}
<Stochastic variant="slow" />

See the indicator components example →

StylingCopy Anchor Link

styles overrides output colors, widths and visibility by output key; showLevels / showFills toggle levels and fills; name replaces the legend name.

<RSI styles={{ rsi: { color: "#f59e0b", width: 2 } }} showFills={false} />

Browse by categoryCopy Anchor Link