TradingChart

"use client";
import { TradingChart } from "@reincharts/widget";
import { useState } from "react";
import { createDemoFeed } from "@/lib/demo-feed";
import { useDocsChartTheme } from "@/lib/use-docs-theme";

export default function TradingChartExample() {
    const theme = useDocsChartTheme();
    // any Datafeed works: history pages, realtime bars and symbol search come from it
    const [feed] = useState(() => createDemoFeed());
    return (
        <TradingChart
            datafeed={feed}
            defaultSymbol="REIN"
            defaultResolution="15"
            defaultIndicators={["ema", "rsi"]}
            theme={theme}
        />
    );
}

<TradingChart> (@reincharts/widget) is the most complete thing you can build with Reincharts: every package assembled into a full trading terminal with a top toolbar, drawing toolbar, legends with controls, dialogs, context menu, object tree, range presets and scale toggles. If you know the TradingView chart, it will feel familiar, and it is free, including multi-chart layouts with sync and bar replay.

Use it when you want a finished trading UI. When you need something smaller or different, compose your own chart from the same components.

import { TradingChart } from "@reincharts/widget";
import "@reincharts/widget/styles.css";

<div style={{ height: 600 }}>
  <TradingChart datafeed={feed} defaultSymbol="AAPL" defaultIndicators={["ema", "rsi"]} theme="dark" />
</div>;

Without height the widget fills its parent, so give the parent a size.

What's includedCopy Anchor Link

• Top toolbar: symbol search, favorite intervals, chart type, indicators dialog, compare symbols, layouts, bar replay, undo / redo, object tree, settings, theme toggle, fullscreen and snapshot (a PNG of the whole layout).
• Drawing toolbar: every drawing tool, freehand brush and highlighter included, with magnet, keep drawing, lock, hide and remove.
• Legends with hide / settings / remove buttons on every series and indicator. On narrow charts they switch to the compact legend.
• Indicators dialog: searchable by name, grouped by category, with the indicators already on the chart listed first under On chart (hide, settings and remove buttons). See Indicators.
• Compare: overlay other symbols of the datafeed on the price pane; adding one switches the price scale to percent.
• Multi-chart layouts and bar replay: see Layouts & replay.
• Object tree: a side panel listing everything on the active chart pane by pane (main series, volume, compare symbols, indicators and drawings) with hide, settings and remove buttons. Pass objectTree="open" to show it initially.
• Settings dialog: crosshair mode, time zone, volume, watermark, legend, grid lines and the last price line. The choices are saved in state.settings.
• Context menu (right-click): view, price, indicator, drawing and scale mode actions, plus shortcuts to the object tree and the settings.
• Bottom bar: range presets (1D, 5D, 1M, 3M, 6M, YTD, 1Y, 5Y, All), the time zone, and % (percent), log and auto scale toggles.
• Chart interaction: everything from Interaction: pan, zoom, scale the price axis (dragging then pans vertically too), double-click the axis to autoscale again, resize panes by dragging separators.

Data mode or datafeed modeCopy Anchor Link

Data mode: pass your bars. symbol and resolution are labels; everything else (indicators, drawings, chart types, replay, layouts) works the same.

See the your own data example →

<TradingChart data={bars} symbol="MSFT" resolution="1D" />

Datafeed mode: pass a Datafeed. The widget loads history, scrolls back in time page by page, streams realtime bars, searches symbols and loads compare symbols through it.

<TradingChart datafeed={feed} defaultSymbol="AAPL" defaultResolution="15" resolutions={["1", "5", "15", "60", "1D"]} />

Symbol, resolution, chart type, indicators and layout are each available uncontrolled (defaultSymbol, defaultResolution, defaultChartType, defaultIndicators...) or controlled (symbol + onSymbolChange, resolution + onResolutionChange...).

Chart typesCopy Anchor Link

defaultChartType / chartType take one of the ids below (also exported as CHART_TYPE_IDS):

Feature togglesCopy Anchor Link

Every part of the UI can be turned off: toolbar, drawingToolbar, legend, volume, watermark, grid, bottomBar, contextMenu, objectTree (or "open"), replay, compare; plus crosshair ("normal", "magnet", "hidden") and timeZone.

See the minimal ui example →

Imperative APICopy Anchor Link

The ref exposes save(), load(state), addIndicator(idOrDefinition, options), removeIndicator(id), screenshot(), resetView() and the active chart's engine. See State, save & load and the API reference.

Building blocksCopy Anchor Link

<TradingChart> is built from the same public components documented on this site. When you need a layout it doesn't offer, compose your own from ChartCanvas, series, indicators, drawings and legends. The widget also exports the pieces it adds on top:

See the chart type switcher example →