Indicators
Default indicators, controlled indicators and custom indicator definitions.
"use client";
import { bollinger, defineIndicator } from "@reincharts/indicators";
import { TradingChart } from "@reincharts/widget";
import { daily } from "@/lib/data";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
/** Bollinger %B: where the close sits inside the bands. */
const percentB = defineIndicator<{ period: number; multiplier: number }>({
id: "percentB",
name: "Bollinger %B",
shortName: "%B",
category: "volatility",
overlay: false,
inputs: {
period: { type: "number", label: "Length", default: 20, min: 1 },
multiplier: { type: "number", label: "StdDev", default: 2, min: 0.1, step: 0.1 },
},
outputs: { pb: { type: "line", label: "%B", color: "#0ea5e9" } },
levels: [{ value: 1 }, { value: 0 }],
fills: [{ between: [1, 0], color: "rgba(14, 165, 233, 0.08)" }],
calculate(data, { period, multiplier }) {
const { upper, lower } = bollinger(data, { period, multiplier });
return {
pb: data.map((d, i) => {
const [u, l] = [upper[i], lower[i]];
return u === undefined || l === undefined || u === l ? undefined : (d.close - l) / (u - l);
}),
};
},
});
export default function WidgetCustomIndicator() {
const theme = useDocsChartTheme();
return (
<TradingChart
data={daily}
symbol="MSFT"
// listed under "Custom" in the indicators dialog, usable in defaultIndicators and saved layouts
extraIndicators={[percentB]}
defaultIndicators={[{ definitionId: "bollinger" }, { definitionId: "percentB" }]}
theme={theme}
/>
);
}Default indicators
defaultIndicators takes registry ids or configs. Overlays go on the price pane, oscillators get their own pane; set
paneId to share a pane.
<TradingChart
datafeed={feed}
defaultIndicators={[
"ema",
{ definitionId: "ema", inputs: { period: 50 }, styles: { ma: { color: "#8b5cf6" } } },
{ definitionId: "rsi" },
{ definitionId: "stochastic", paneId: "pane-rsi-1" }, // share the RSI pane
]}
/>Users add, edit (settings dialog), hide and remove indicators from the toolbar and legends. Observe changes with
onIndicatorsChange, or control the list with indicators. The ref's addIndicator / removeIndicator work too.
The indicators dialog
The Indicators button opens a searchable list of every definition, grouped into Custom, Trend, Momentum,
Volatility, Volume and Other (the definition's category). Clicking a row adds the indicator and keeps the dialog
open, so several can be added in a row; Enter adds the first match of the search. A badge counts the instances
already on the chart.
Above the categories, On chart lists the indicators of the active chart with their current inputs ("EMA 50 close"), each with hide / show, settings and remove buttons, so the dialog doubles as an indicator manager.
Custom indicators
Pass definitions created with defineIndicator as extraIndicators. They are listed
under "Custom" in the indicators dialog, get settings dialogs from their inputs, and can be used in
defaultIndicators and saved layouts by id:
<TradingChart extraIndicators={[percentB]} defaultIndicators={[{ definitionId: "percentB" }]} />