SciTrader SDK - Financial Trading Charts in React

scichart-scitrader-react is the React edition of the SciTrader SDK: components and hooks for building financial trading and crypto charting apps in React. Drop in a GPU-accelerated candlestick chart with linked multi-pane layouts, 30 technical indicators, about 35 drawing tools, a market-depth ladder, live exchange connectors, CSV data and themes, plus the toolbars and settings forms that go around it.

It is the toolkit behind the SciTrader app: everything you see there is built from these packages.

• See it running: scitrader.io -> Menu -> Web App
• Built on SciChart.js. SciTrader depends on SciChart.js, the high-performance WebGL and WebAssembly charting library for React and JavaScript.
• Thin React bindings. Each component mounts its equivalent from scichart-scitrader, the framework-agnostic SDK, and manages its lifecycle. Studies, exchanges, themes and the chart API come from that package, so the React and plain TypeScript APIs match.

License

Deployment of scichart-scitrader-react to commercial applications requires a SciChart Advanced License, and ships under the same license terms as SciChart.js. For non-commercial, or personal use, community license terms apply.

• SciChart EULA
• Free Community Licensing FAQs
• Purchase commercial licenses

Contents

• What's in the SDK
• Setup
• Getting started
• SciFinanceChartView
• Examples
• Studies and indicators
• Drawing tools
• Toolbars and UI components
• Data sources and exchanges
• Themes and styling
• Saving and restoring
• Troubleshooting
• Known issues
• Support

What's in the SDK

Financial charts

Candlesticks, OHLC bars, line, mountain and Heikin-Ashi candles, plus Renko and point & figure. Price, volume and indicator panes pan and zoom together. Users scroll to zoom, drag to pan, drag an axis to rescale it, and pan left to load older history, which is fetched in the background. A legend and crosshair follow the mouse.

Technical indicators

30 studies: moving averages, bands and channels, Ichimoku, oscillators such as RSI, MACD, Stochastic and ADX, volume studies, volume profile, and order-book studies. Every input and colour can be edited at runtime from a ready-made settings form, and you can write your own studies. See the full list.

Drawing tools

About 35 tools: lines, channels, pitchforks, Fibonacci tools, cycles, harmonic and Elliott wave patterns, measure, stop-loss / take-profit, freehand pen and highlighter. They come with a toolbar, a list of drawings, a floating quick-edit toolbar, keyboard shortcuts and touch support. useDrawingTools wires them to a chart. See the full list.

Layout

Panes stacked vertically or side by side. Each pane has a control bar to resize, lock, maximise, hide, reorder and close it, with a touch layout for phones and tablets. Loading states, a skeleton placeholder and progress dots are built in, and paneInfo renders your own React content into each pane's control bar.

Market depth

<MarketDepthView> draws a live order book as a price ladder, with depth bars, price grouping, flashes for pulled liquidity and a slippage readout on hover or long press.

Toolbars and UI components

Interval, period, candle-type and follow / anchored pickers, study settings forms, a colour picker, a study list, a drawings list, a candle counter and UI icons, as controlled React components. They render on the server too. See the full list.

Themes

Dark, light and Ocean themes are built in. One theme object sets every colour of the chart, its studies, its drawings and its UI. <SciTraderThemeProvider> themes every component, and switching theme restyles a live chart in place.

Data

Built-in connectors for Binance and Coinbase (history plus live updates, no API key), a CSV connector for your own files, and one interface to implement for any other source. Downloaded candles are cached in IndexedDB.

State

Save a chart, with its studies, settings, panes and drawings, to JSON, and restore it later.

Setup

Four steps. Steps 2 and 3 are not optional: skip either and the chart will not appear. If it still doesn't, see Troubleshooting.

1. Install

npm install scichart-scitrader-react scichart-scitrader scichart scichart-financial-tools rxjs react react-dom

scichart-scitrader, react and react-dom are peer dependencies of this package, and scichart, scichart-financial-tools and rxjs are peers of scichart-scitrader. Your app installs them all, so there's one copy of each. An app must have exactly one copy of scichart, because SciChart keeps global state (the licence, the WebAssembly engine, the registry used to save and restore charts).

| Package | Version | | -------------------------- | -------------------------------- | | scichart-scitrader | the same version as this package | | react, react-dom | 16.14 or later | | scichart | 6.0.14 or later 6.x | | scichart-financial-tools | 6.0.14 or later 6.x | | rxjs | 7.5.5 or later |

2. Serve SciChart's WebAssembly

SciChart draws with a WebAssembly engine. Your bundler bundles SciChart's JavaScript, but the browser downloads the engine as a separate file when the first chart is created, so your app has to serve it. The files are in node_modules/scichart/_wasm/: scichart.wasm, and scichart-nosimd.wasm for older browsers.

Then tell SciChart the file's absolute URL, before the first chart is created. By default SciChart looks relative to the page's URL, which breaks on nested routes such as /charts/btc.

Vite needs no copy step. Import each file's URL; Vite copies the file into the build and returns its hashed URL:

import { SciChartSurface } from "scichart";
import wasmUrl from "scichart/_wasm/scichart.wasm?url";
import wasmNoSimdUrl from "scichart/_wasm/scichart-nosimd.wasm?url";

SciChartSurface.configure({ wasmUrl, wasmNoSimdUrl });

For TypeScript to accept the ?url imports, your app needs Vite's client types. A Vite-scaffolded app already has them, in src/vite-env.d.ts:

/// <reference types="vite/client" />

webpack (including Create React App ejected setups), with copy-webpack-plugin:

// webpack.config.js
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

const scichartWasm = path.join(path.dirname(require.resolve("scichart/package.json")), "_wasm");

module.exports = {
    // …
    plugins: [new CopyWebpackPlugin({ patterns: [{ from: scichartWasm, to: "" }] })],
};

import { SciChartSurface } from "scichart";

SciChartSurface.configure({ wasmUrl: "/scichart.wasm" });

Next.js and anything else: copy the folder into the folder your server publishes (public/ in Next.js) as part of your build, and call SciChartSurface.configure({ wasmUrl: "/scichart.wasm" }) on the client.

From a CDN, with no copy step. Your users then need to reach cdn.jsdelivr.net:

SciChartSurface.loadWasmFromCDN();

If you also use scichart-react, note that importing it sets wasmUrl to /scichart.wasm. To use a different URL, call configure after that import. If the file can't be loaded, chart creation fails with "Could not load SciChart WebAssembly module": look for a 404 on scichart.wasm in the browser's network tab.

3. Turn off <StrictMode>

SciFinanceChartView does not yet start under React's <StrictMode>, which mounts components twice in development builds. The Vite and Create React App templates turn it on, so remove it:

// src/main.tsx: no <React.StrictMode> wrapper
ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

Next.js turns StrictMode on in next.config.js; set reactStrictMode: false until this is fixed.

Without this, the chart silently never appears in development, while a production build of the same code works.

4. Import the stylesheet

Import it once, next to your first import of the SDK. It gives the toolbars, pane controls, menus and overlays their look:

import "scichart-scitrader/scitrader.css";

Getting started

A chart gets its candles from an exchange, looked up by name. This example charts your own CSV file, served with your app at /data/crypto-1h.csv:

symbol,time,open,high,low,close,volume
BTCUSDT,2026-07-01 12:00,58622.02,58676,58326,58538.01,1716.61
BTCUSDT,2026-07-01 13:00,58538,59508,58536,59498.03,2321.79

A complete Vite + React + TypeScript app is two files:

// src/main.tsx
import ReactDOM from "react-dom/client";
import { SciChartSurface } from "scichart";
import wasmUrl from "scichart/_wasm/scichart.wasm?url";
import wasmNoSimdUrl from "scichart/_wasm/scichart-nosimd.wasm?url";
import { CSVExchange, defaultExchangeProvider, registerCSVExchange } from "scichart-scitrader";
import { TradingChart } from "./TradingChart";

// Before the first chart: where your build serves SciChart's WebAssembly.
SciChartSurface.configure({ wasmUrl, wasmNoSimdUrl });

// Once, at startup: register your data under the name charts will ask for.
const dataReady = CSVExchange.fromUrl("/data/crypto-1h.csv", { name: "MyData" }).then((csv) =>
    registerCSVExchange(defaultExchangeProvider, csv)
);

// No <StrictMode>: SciFinanceChartView doesn't yet start under its double mount.
ReactDOM.createRoot(document.getElementById("root")!).render(<TradingChart dataReady={dataReady} />);

// src/TradingChart.tsx
import "scichart-scitrader/scitrader.css";
import * as React from "react";
import {
    CandleInterval,
    ISciFinanceChartPanelConfig,
    OHLCStudy,
    RSIStudy,
    SMAStudy,
    VolumeStudy,
} from "scichart-scitrader";
import {
    DrawingToolbar,
    ISciFinanceChartViewApi,
    SciFinanceChartView,
    SciTraderThemeProvider,
    useDrawingTools,
} from "scichart-scitrader-react";

export function TradingChart({ dataReady }: { dataReady: Promise<unknown> }) {
    const [ready, setReady] = React.useState(false);
    const [chart, setChart] = React.useState<ISciFinanceChartViewApi>();
    const { controller } = useDrawingTools(chart);

    React.useEffect(() => {
        dataReady.then(() => setReady(true));
    }, [dataReady]);

    // Create the config once per mounted chart: studies are live objects bound to one chart.
    const config = React.useMemo<ISciFinanceChartPanelConfig>(
        () => ({
            exchangeName: "MyData",
            symbol: "BTCUSDT",
            interval: CandleInterval.FOUR_HOURS, // resampled from the hourly rows
            period: "3M",
            studies: [new OHLCStudy(), new VolumeStudy(), new SMAStudy({ length: 50 }), new RSIStudy()],
        }),
        []
    );

    return (
        <SciTraderThemeProvider>
            <div style={{ display: "flex", height: 600 }}>
                <DrawingToolbar controller={controller} />
                <div style={{ flex: 1, position: "relative" }}>
                    {ready && <SciFinanceChartView config={config} onInit={setChart} />}
                </div>
            </div>
        </SciTraderThemeProvider>
    );
}

Then npm run dev. Users scroll to zoom, drag to pan, drag an axis to rescale it, and pan left to load older history.

• config is read once, when the chart mounts. Change a live chart through its API, for example chart.financeApi.changeInterval(…). To start over, remount with a new key.
• Wait for onInit before using the API. The ref is set at mount, but financeApi is ready only once the chart is.
• Give the chart's container a height. SciFinanceChartView fills its parent, so a parent of height 0 renders nothing.

To chart live crypto data instead, register an exchange connector: see Data sources.

SciFinanceChartView

<SciFinanceChartView> creates the chart: its layout, its price pane, a data feed for the symbol, and a pane for each study that needs one.

| Prop | Read | Meaning | | -------------------- | -------------- | -------------------------------------------------------------------------------- | | config | once, at mount | The chart's configuration: see the table below. | | restoreState | once, at mount | A saved state to restore instead: Saving and restoring. | | useSubCharts | once, at mount | Overrides config.useSubCharts. | | onInit | | Called with the chart's API once it is ready. | | ref | | The same API. Set at mount, but financeApi is ready only once onInit fires. | | paneControls | live | Each pane's control bar: { visible, touch, buttons }. | | paneInfo | live | (paneId) => ReactNode, rendered at the start of each pane's control bar. | | paneLoadingContent | once, at mount | (paneId) => ReactNode, shown in a pane until its chart is ready. | | className, style | live | For the host <div>. |

config is read once. Change a live chart through its API, for example chart.financeApi.changeInterval(…). To start over with a new config, remount with a new key.

The API (ISciFinanceChartViewApi):

| Member | Use | | -------------------------- | ---------------------------------------------------------------------------------------------------- | | financeApi | The chart (SciFinanceChart): studies, data feeds, interval, period, candle type, theme and events. | | paneGroupApi | The layout: pane order, sizes, visibility. | | addCustomPane(node) | Adds a pane holding your own React content. | | setPaneControls(options) | Changes the control bars. | | toJSON() | The chart's state as JSON. |

config is an ISciFinanceChartPanelConfig:

| Option | Default | Meaning | | ------------------------------------ | ---------------------- | ----------------------------------------------------------------------------------------------------------- | | exchangeName, symbol, interval | required | The data to chart. | | studies | required | What to draw, in order: Studies. | | period | none | How much time to show at first: "1D", "5D", "1W", "1M", "3M", "6M", "YTD", "1Y", "ALL", … | | lockPeriodWidth | true | Whether period also caps how far the user can zoom out. | | liveTipMode | "follow" | Whether the view scrolls with new candles ("follow") or stays put ("anchored"). | | useSubCharts | true | Draw all panes on one surface (true, fastest), or give each pane its own surface (false). | | direction | "column" | Stack panes vertically ("column") or side by side ("row"). | | maxPanes | 6 | Most panes allowed. A study that would add more is refused, and paneLimitReached is raised. | | paneSizing | price 3 : indicator 1 | Size hints per pane id, e.g. { [PaneId.DEFAULT.value]: { grow: 4 } }. | | loading | skeleton and overlay | What panes show while they load. | | theme | SCITRADER_DARK_THEME | Every colour the chart draws with: Themes. | | axisDefaults | none | SciChart axis options applied to every axis, over the theme's. | | surfaceConfig | none | A function run on each pane's SciChartSurface as it is created. | | services | global | Data services private to this chart, e.g. its own exchange registry. |

Server rendering is safe: charts and the other components are created in effects, which only run in the browser.

<StrictMode>: SciFinanceChartView doesn't yet start under React's development double mount. See Setup, step 3.

Examples

Each example assumes the CSV exchange from Getting started is registered as "MyData". Studies, enums and themes are imported from scichart-scitrader, components from scichart-scitrader-react.

Indicators with custom settings

Overlays (moving averages, bands, channels) share the price pane. Oscillators each get a pane of their own.

function IndicatorChart() {
    const config = React.useMemo<ISciFinanceChartPanelConfig>(
        () => ({
            exchangeName: "MyData",
            symbol: "ETHUSDT",
            interval: CandleInterval.ONE_DAY,
            period: "6M",
            studies: [
                new OHLCStudy(),
                new VolumeStudy({ volumeUpColor: "#26A69A80", volumeDownColor: "#EF535080" }),
                new SMAStudy({ length: 50 }),
                new EMAStudy({ length: 20, renderOptions: { stroke: "#FFB74D", strokeThickness: 2 } }),
                new BollingerBandsStudy({ period: 20, stdDev: 2 }),
                new RSIStudy({ length: 14, overbought: 70, oversold: 30 }),
                new MACDStudy({ fast: 12, slow: 26, signal: 9 }),
            ],
            paneSizing: { [PaneId.DEFAULT.value]: { grow: 4 } },
        }),
        []
    );

    return (
        <div style={{ height: 700 }}>
            <SciFinanceChartView
                config={config}
                onInit={(api) => api.financeApi.attachStudy(new StochasticStudy({ length: 14, signalPeriod: 3 }))}
            />
        </div>
    );
}

Light theme, side-by-side panes, line chart

const config = React.useMemo<ISciFinanceChartPanelConfig>(
    () => ({
        exchangeName: "MyData",
        symbol: "SOLUSDT",
        interval: CandleInterval.ONE_HOUR,
        period: "1W",
        theme: SCITRADER_LIGHT_THEME,
        direction: "row",
        useSubCharts: false,
        liveTipMode: "anchored",
        studies: [
            new OHLCStudy({ candleType: ECandleType.Line }),
            new IchimokuCloudStudy(),
            new ATRStudy({ length: 14 }),
        ],
        axisDefaults: { drawMinorGridLines: false, labelStyle: { fontSize: 12 } },
    }),
    []
);

<SciTraderThemeProvider theme={SCITRADER_LIGHT_THEME}>
    <SciFinanceChartView config={config} style={{ height: 500 }} />
</SciTraderThemeProvider>;

Toolbar, candle counter and a touch layout

function ChartWithToolbar() {
    const [chart, setChart] = React.useState<ISciFinanceChartViewApi>();
    const [interval, setInterval] = React.useState(CandleInterval.FOUR_HOURS);
    const [period, setPeriod] = React.useState<TPeriod | null>("3M");
    const [candleType, setCandleType] = React.useState(ECandleType.Candlestick);
    const isPhone = useMediaQuery("(max-width: 600px)"); // your own hook

    const config = React.useMemo<ISciFinanceChartPanelConfig>(
        () => ({
            exchangeName: "MyData",
            symbol: "BTCUSDT",
            interval: CandleInterval.FOUR_HOURS,
            period: "3M",
            maxPanes: 3,
            studies: [new OHLCStudy(), new VolumeStudy(), new RSIStudy()],
        }),
        []
    );

    return (
        <>
            <div className="toolbar">
                <IntervalSelector
                    value={interval}
                    intervals={[CandleInterval.ONE_HOUR, CandleInterval.FOUR_HOURS, CandleInterval.ONE_DAY]}
                    onChange={(next) => {
                        // Keep about the same span, adjusted to suit the new interval.
                        const carried = carryPeriodToInterval(period, next);
                        setInterval(next);
                        setPeriod(carried);
                        chart?.financeApi.changeInterval(next, carried);
                    }}
                />
                <PeriodSelector
                    value={period}
                    currentInterval={interval}
                    onChange={(next) => {
                        setPeriod(next);
                        chart?.financeApi.setPeriod(next);
                    }}
                />
                <CandleTypeSelector
                    value={candleType}
                    onChange={(next) => {
                        setCandleType(next);
                        chart?.financeApi.setCandleType(next);
                    }}
                />
            </div>
            <div style={{ height: 600 }}>
                <SciFinanceChartView
                    config={config}
                    onInit={setChart}
                    paneControls={{ touch: isPhone, buttons: { close: false } }}
                    paneInfo={(paneId) =>
                        paneId === PaneId.DEFAULT.value && chart ? <CandleCounter chart={chart.financeApi} /> : null
                    }
                />
            </div>
        </>
    );
}

paneControls applies to the live chart: the chart doesn't detect touch screens, so your page decides, usually from its own breakpoint.

Drawing tools with a list of drawings

function DrawingChart({ config }: { config: ISciFinanceChartPanelConfig }) {
    const [chart, setChart] = React.useState<ISciFinanceChartViewApi>();
    const { controller, activeTool, drawings } = useDrawingTools(chart, { touch: true });

    return (
        <div style={{ display: "flex", height: 600 }}>
            <DrawingToolbar controller={controller} orientation="vertical" />
            <SciFinanceChartView config={config} onInit={setChart} style={{ flex: 1 }} />
            <DrawingList controller={controller} style={{ width: 260 }} />
        </div>
    );
}

useDrawingTools attaches a DrawingToolsController once the chart is ready, detaches it on unmount, and returns activeTool and drawings as state. Start a tool from your own button with controller.selectTool(ETradingAnnotationType.FibonacciRetracementAnnotation) (ETradingAnnotationType is from scichart-financial-tools).

Study settings

function StudiesPanel({ chart }: { chart: ISciFinanceChartViewApi }) {
    // Each study opens its settings form; × removes it. Edits apply to the chart live.
    return <StudyList chart={chart.financeApi} />;
}

Studies and indicators

Everything a chart draws is a study: OHLCStudy draws price, VolumeStudy draws volume, and every indicator is a study too. Pass them in config.studies, or add them later with financeApi.attachStudy(study). To create a study by type, for a picker or a saved chart, use studyProvider.getStudy(EStudyType.RSI). All are exported by scichart-scitrader.

| Name | Class | EStudyType | Category | Pane | | ------------------------------------------------------ | ------------------------- | -------------------- | ------------------- | ----- | | Price (candlestick, OHLC, line, mountain, Heikin-Ashi) | OHLCStudy | OHLC | Price & Chart Types | price | | Renko | RenkoStudy | Renko | Price & Chart Types | own | | Point & Figure | PointAndFigureStudy | PointAndFigure | Price & Chart Types | own | | Simple Moving Average (SMA) | SMAStudy | SMA | Trend | price | | Exponential Moving Average (EMA) | EMAStudy | EMA | Trend | price | | Weighted Moving Average (WMA) | WMAStudy | WMA | Trend | price | | Parabolic SAR (PSAR) | PSARStudy | PSAR | Trend | price | | Ichimoku Cloud | IchimokuCloudStudy | Ichimoku | Trend | price | | Average Directional Index (ADX) | ADXStudy | ADX | Trend | own | | Relative Strength Index (RSI) | RSIStudy | RSI | Momentum | own | | Moving Average Convergence / Divergence (MACD) | MACDStudy | MACD | Momentum | own | | Stochastic Oscillator | StochasticStudy | Stochastic | Momentum | own | | Commodity Channel Index (CCI) | CCIStudy | CCI | Momentum | own | | Williams Percent Range (Williams %R) | WilliamsRStudy | WilliamsR | Momentum | own | | Rate of Change (ROC) | ROCStudy | ROC | Momentum | own | | Triple EMA Oscillator (TRIX) | TRIXStudy | TRIX | Momentum | own | | Awesome Oscillator (AO) | AwesomeOscillatorStudy | AO | Momentum | own | | Bollinger Bands | BollingerBandsStudy | BBANDS | Volatility | price | | Keltner Channels | KeltnerChannelsStudy | Keltner | Volatility | price | | Donchian Channels | DonchianChannelsStudy | Donchian | Volatility | price | | Average True Range (ATR) | ATRStudy | ATR | Volatility | own | | Volume | VolumeStudy | Volume | Volume | price | | Volume Profile (volume traded by price) | VolumeProfileStudy | VolumeProfile | Volume | price | | Volume Weighted Average Price (VWAP) | VWAPStudy | VWAP | Volume | price | | On Balance Volume (OBV) | OBVStudy | OBV | Volume | own | | Money Flow Index (MFI) | MFIStudy | MFI | Volume | own | | Force Index | ForceIndexStudy | ForceIndex | Volume | own | | Order Book Heatmap (historical resting liquidity) | OrderBookHeatmapStudy | OrderBookHeatmap | Order Book | price | | Order Book Imbalance (bid vs ask depth) | OrderBookImbalanceStudy | OrderBookImbalance | Order Book | own |

The order-book studies need an order-book data source (IOrderBookSource, registered with setOrderBookSources). The Binance, Coinbase and CSV connectors don't provide one.

• Candle types. The price study draws ECandleType.Candlestick, OhlcBars, Line, Mountain or HeikinAshi: new OHLCStudy({ candleType }), or financeApi.setCandleType(type) on a live chart.
• A study picker. STUDY_MENU_ITEMS lists every study with its type, label, description and category; filterStudyMenuItems and groupStudyMenuItems search and group it.
• Settings. <StudySettingsForm study={study} /> renders any study's settings as a form whose edits apply live. <StudyList chart={chart.financeApi} /> lists the chart's studies, each with its form.
• Your own study. Extend StudyBase<T> and register it with studyProvider.registerStudy(...); see the scichart-scitrader README.

Drawing tools

useDrawingTools(chart) returns a DrawingToolsController. <DrawingToolbar controller={controller} /> shows a rail of tools (by default DEFAULT_DRAWING_TOOLBAR_TOOLS, with an "all tools" flyout), and controller.selectTool(toolId) starts any tool from your own UI. Drawings are saved with the chart.

Most tool ids are values of ETradingAnnotationType from scichart-financial-tools; the rest are EDrawingToolVariantId values from scichart-scitrader.

| Name | Tool id | Group | | ------------------------------- | --------------------------------------------------------------- | -------------- | | Poly Line (trend line) | ETradingAnnotationType.PolyLineAnnotation | Lines | | Extended Line | ETradingAnnotationType.ExtendedLineAnnotation | Lines | | Horizontal Line | ETradingAnnotationType.HorizontalTrendLineAnnotation | Lines | | Vertical Line | ETradingAnnotationType.VerticalTrendLineAnnotation | Lines | | Cross Line | ETradingAnnotationType.CrossLineAnnotation | Lines | | Angle Line | ETradingAnnotationType.AngleLineAnnotation | Lines | | Channel | ETradingAnnotationType.ChannelAnnotation | Channels | | Flat Bottom Channel | ETradingAnnotationType.FlatBottomChannelAnnotation | Channels | | Disjoint Channel | ETradingAnnotationType.DisjointChannelAnnotation | Channels | | Pitchfork | ETradingAnnotationType.PitchforkAnnotation | Pitchforks | | Inside Pitchfork | ETradingAnnotationType.InsidePitchforkAnnotation | Pitchforks | | Schiff Pitchfork | ETradingAnnotationType.SchiffPitchforkAnnotation | Pitchforks | | Modified Schiff Pitchfork | ETradingAnnotationType.ModifiedSchiffPitchforkAnnotation | Pitchforks | | Fibonacci Retracement | ETradingAnnotationType.FibonacciRetracementAnnotation | Fibonacci | | Fibonacci Extension | ETradingAnnotationType.FibonacciExtensionAnnotation | Fibonacci | | Fibonacci Time Zone | ETradingAnnotationType.FibonacciTimeZoneAnnotation | Fibonacci | | Fibonacci Speed Resistance Arcs | ETradingAnnotationType.FibonacciSpeedResistanceArcsAnnotation | Fibonacci | | Fibonacci Circles | ETradingAnnotationType.FibonacciCirclesAnnotation | Fibonacci | | Fibonacci Wedge | ETradingAnnotationType.FibonacciWedgeAnnotation | Fibonacci | | Pitchfan | ETradingAnnotationType.PitchfanAnnotation | Fibonacci | | Cyclic Line | ETradingAnnotationType.CyclicLineAnnotation | Cycles & Time | | Cyclic Arc | ETradingAnnotationType.CyclicArcAnnotation | Cycles & Time | | Sector | ETradingAnnotationType.SectorAnnotation | Cycles & Time | | XABCD Pattern | EDrawingToolVariantId.PatternXabcd | Patterns | | Elliott Impulse Wave (12345) | EDrawingToolVariantId.PatternElliottImpulse | Patterns | | Elliott Correction Wave (ABC) | EDrawingToolVariantId.PatternElliottCorrection | Patterns | | Elliott Triangle Wave (ABCDE) | EDrawingToolVariantId.PatternElliottTriangle | Patterns | | Elliott Double Combo (WXY) | EDrawingToolVariantId.PatternElliottDoubleCombo | Patterns | | Elliott Triple Combo (WXYXZ) | EDrawingToolVariantId.PatternElliottTripleCombo | Patterns | | Measure | ETradingAnnotationType.MeasureAnnotation | Measure & Risk | | Stop Loss / Take Profit | ETradingAnnotationType.StopLossTakeProfitAnnotation | Measure & Risk | | Freehand | ETradingAnnotationType.FreehandDrawingAnnotation | Freehand | | Highlighter | EDrawingToolVariantId.Highlighter | Freehand | | Eraser | EDrawingToolVariantId.Eraser | Eraser |

useDrawingTools(chart, options) takes the controller's options: touch (long press selects; drag to aim the placement cursor, tap to commit each point), selectFinishedDrawing, resumeGestures, and editorContainer for the full annotation editor.

Toolbars and UI components

The components are controlled, like an <input>: they show value and report the user's choice through onChange. Props apply in place, without a remount. All take className and style.

Toolbars

| Name | Component | What it is | | -------------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | Drawing toolbar | <DrawingToolbar> | A rail of drawing tools, vertical or horizontal, with an "all tools" flyout. | | Drawing quick-edit toolbar | built in | Floats on the selected drawing: stroke colour, line thickness, delete, and a button to open the full editor. | | Pane control bar | built in, set up by paneControls | Per-pane buttons: lock size, Y-axis autorange, move, maximise, hide, close. In a swipe-out drawer in the touch layout. | | Hidden-pane restore strip | built in | A pill for each hidden pane, to bring it back. | | Interval buttons | <IntervalSelector> | Candle interval, from 1s to 1M. | | Period buttons | <PeriodSelector> | Time span shown, with "Free"; disables periods that don't suit the interval. | | Candle-type menu | <CandleTypeSelector> | Candlestick, OHLC bars, line, mountain, Heikin-Ashi. | | Follow / Anchored toggle | <LiveTipToggle> | Whether the view follows new candles. |

Other components and hooks

| Export | What it is | | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | <SciFinanceChartView> | The trading chart. The ref and onInit receive its API. paneControls changes the pane control bars live; paneInfo and paneLoadingContent render your content into the panes; addCustomPane takes a React node. | | <StudySettingsForm> | A study's settings form. Edits apply to the chart live. | | <StudyList> | The chart's studies, each with its settings form and a remove button. | | <ColorPicker> | A colour field with opacity. | | <DrawingList> | The list of drawings on the chart: select, edit, delete, clear. | | <MarketDepthView> | The order-book ladder. | | <PaneProgressDots> | Loading progress dots for a pane, for paneLoadingContent. | | <CandleCounter> | "visible / loaded / ~total" candle counts, for paneInfo. | | <SciTraderIcon> | The SciTrader UI icons as inline SVG. | | useDrawingTools(chart) | Attaches the drawing tools to a chart, and returns the controller, the active tool and the drawings as state. | | <SciTraderThemeProvider>, useSciTraderTheme(), useSciTraderThemeSwitch() | Applies a theme's colours to every component through CSS variables, and provides the theme and a theme switch to your own components. |

For a watchlist, scichart-scitrader has WatchListDataManager (prices, 24-hour change and sparkline data) and SparkLineChart.

Data sources and exchanges

A chart asks for data by exchange name. Register each exchange once, at startup, with defaultExchangeProvider from scichart-scitrader. It starts empty.

| Exchange | Export | Name | Live updates | Notes | | --------- | ------------------ | ----------------------------- | ------------ | ---------------------------------------------------------------------------------------------------- | | Binance | BinanceExchange | "Binance" | yes | Symbols like BTCUSDT. No API key. Binance refuses connections from some regions, including the US. | | Coinbase | CoinbaseExchange | "Coinbase" | yes | Symbols like BTC-USD. No API key. Fewer intervals than Binance. | | CSV files | CSVExchange | your choice (default "CSV") | no | Your own data. Serves the file's interval and every coarser one. |

import { BinanceExchange, CoinbaseExchange, defaultExchangeProvider, idbPriceStore } from "scichart-scitrader";

// idbPriceStore caches candles in IndexedDB, so a reload draws at once and fetches only what's new.
defaultExchangeProvider.registerExchange(BinanceExchange, idbPriceStore);
defaultExchangeProvider.registerExchange(CoinbaseExchange, idbPriceStore);

// Then: config = { exchangeName: "Binance", symbol: "BTCUSDT", interval: CandleInterval.ONE_MINUTE, period: "1H", studies }

CSV. Columns are found by their usual names (time / date / timestamp, open, high, low, close, volume, symbol), or mapped with columns: { time: "Date", close: 4 }. Times may be epoch seconds, epoch milliseconds or date strings (UTC). By default the dates move forward so the last candle is now; pass alignToNow: false for data that is already current. Several files can cover one symbol, for example hourly and daily:

const csv = await CSVExchange.fromUrl(
    [
        { url: "/data/aapl-1h.csv", symbol: "AAPL" },
        { url: "/data/aapl-1d.csv", symbol: "AAPL" },
    ],
    { name: "Stocks", alignToNow: false }
);
registerCSVExchange(defaultExchangeProvider, csv);

A custom exchange

To chart data from your own API, implement IRemoteExchange from scichart-scitrader and register it:

import { EMPTY, Observable } from "rxjs";
import { CandleInterval, ExchangeRestCandle, IRemoteExchange, SciTraderCandle } from "scichart-scitrader";

class MyExchange implements IRemoteExchange {
    readonly name = "MyExchange";
    candleLimit = 1000; // most candles per getCandles call
    readonly hasCompleteCandleStream = true; // getCandleStream emits whole candles

    async getInstruments() {
        return ["ALPHA", "BETA"];
    }
    getSupportedIntervals() {
        return [CandleInterval.ONE_MINUTE, CandleInterval.ONE_HOUR, CandleInterval.ONE_DAY];
    }
    async getListingDate() {
        return { openTime: Date.UTC(2024, 0, 1) };
    } // or null if unknown

    // History: candles with start <= openTime <= end, oldest first, at most `limit`.
    // Times in epoch ms, closeTime = openTime + interval - 1; prices and volume as strings.
    async getCandles(
        symbol: string,
        interval: CandleInterval,
        start: number,
        end: number,
        limit: number
    ): Promise<ExchangeRestCandle[]> {
        const res = await fetch(
            `/api/candles?symbol=${symbol}&interval=${interval}&start=${start}&end=${end}&limit=${limit}`
        );
        return res.json();
    }

    // Live: emit the whole forming candle whenever it changes. EMPTY for history only.
    getCandleStream(symbol: string | string[], interval: CandleInterval): Observable<SciTraderCandle> {
        return EMPTY;
    }

    // Trades and tickers feed the trade studies and the watchlist. Empty if you have none.
    async getTrades() {
        return [];
    }
    getTradeStream() {
        return EMPTY;
    }
    getTickerStream() {
        return EMPTY;
    }
    getAllTickerStream() {
        return EMPTY;
    }
}

defaultExchangeProvider.registerExchange(new MyExchange(), idbPriceStore);

getCandles is all a historical chart needs: the SDK pages through long ranges, caches them, and stops at the listing date. Without hasCompleteCandleStream, it builds the live candle from getTradeStream. Build Observables with your app's single copy of rxjs, and use nullCandleStore instead of idbPriceStore for data that isn't stable between sessions.

Themes and styling

One theme object, ISciTraderTheme, sets every colour: the chart, its studies and drawings, the market-depth ladder and the UI components. Three are built in: SCITRADER_DARK_THEME (the default), SCITRADER_LIGHT_THEME and SCITRADER_OCEAN_THEME, listed in SCITRADER_THEME_LIST.

Wrap your components in SciTraderThemeProvider, and pass the same theme to the chart's config. The provider themes the HTML components through CSS variables; the chart is drawn with WebGL and takes the theme through config.theme and setTheme:

import { SCITRADER_DARK_THEME, SCITRADER_THEME_LIST } from "scichart-scitrader";
import { SciTraderThemeProvider, useSciTraderThemeSwitch } from "scichart-scitrader-react";

function App() {
    const [theme, setTheme] = React.useState(SCITRADER_DARK_THEME);
    const [chart, setChart] = React.useState<ISciFinanceChartViewApi>();

    // Restyle the live chart when the theme changes.
    React.useEffect(() => {
        chart?.financeApi.setTheme(theme);
    }, [chart, theme]);

    return (
        <SciTraderThemeProvider theme={theme} onThemeChange={setTheme} themes={SCITRADER_THEME_LIST}>
            <ThemePicker />
            <SciFinanceChartView config={config} onInit={setChart} />
        </SciTraderThemeProvider>
    );
}

function ThemePicker() {
    const themeSwitch = useSciTraderThemeSwitch(); // undefined without onThemeChange
    if (!themeSwitch) return null;
    return (
        <select
            value={themeSwitch.theme.name}
            onChange={(e) => themeSwitch.setTheme(themeSwitch.themes.find((t) => t.name === e.target.value)!)}
        >
            {themeSwitch.themes.map((t) => (
                <option key={t.name}>{t.name}</option>
            ))}
        </select>
    );
}

Your own theme. createSciTraderTheme(base, overrides) copies a theme and changes only the colours you list:

const myTheme = createSciTraderTheme(SCITRADER_DARK_THEME, {
    name: "Midnight",
    chart: { background: "#0B1D2E", axisBackground: "#0F2438", gridLine: "#16324A", axisLabel: "#8FB3D1" },
    studies: { EMA: { strokeColor: "#FFD54F" } },
    ui: { accent: "#4FC3F7" },
});

The groups are chart, candles, market, studies (keyed by EStudyType, then by the setting's name in the study's form), ui and drawing. On setTheme, colours set explicitly (in a study's constructor, axisDefaults, or the user's settings) are kept.

Overriding the CSS. The components are styled by scitrader.css, through st-* classes and CSS variables (--st-ui-text, --st-ui-panel, …) that the provider sets. Override them in your own CSS, loaded after it, scoped under a class of your own:

.my-chart .st-drawing-toolbar__button[aria-pressed="true"] {
    border-width: 2px;
}
.my-chart .st-toggle-group__button {
    border-radius: 999px;
}

.my-panel {
    background: var(--st-ui-panel, #262334);
    color: var(--st-ui-text-muted, #9da2bc);
}

The packages don't use MUI. If your app does, build its MUI theme from the same ISciTraderTheme (background, paper, text, ui.accent, light or dark mode) so both match.

Saving and restoring

const state = chart.toJSON(); // studies, settings, panes, drawings, symbol, interval, period
localStorage.setItem("my-chart", JSON.stringify(state));

// Later: pass it as restoreState, and remount with a new key to apply it.
<SciFinanceChartView
    key={restoreKey}
    config={config}
    restoreState={savedState}
    useSubCharts={savedState?.useSubCharts}
/>;

Custom studies must be registered with studyProvider before a state that uses them is restored. The zoom position isn't restored: the chart opens on its period.

Troubleshooting

| Symptom | Cause | | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | Blank space where the chart should be, and a 404 for a .wasm file in the network tab | Step 2 missing: SciChartSurface.configure was never called, so SciChart looked for the engine relative to the page URL. | | "Could not load SciChart WebAssembly module" | The wasmUrl you configured doesn't serve the file. Check the network tab for the request that failed. | | Nothing renders with npm run dev, but npm run build works | Step 3 missing: <StrictMode> is still wrapping the app. | | Cannot find module 'scichart/_wasm/scichart.wasm?url' from tsc | Vite's client types are missing. Add /// <reference types="vite/client" /> to src/vite-env.d.ts. | | The chart area stays zero-height | The parent element has no height. Give it an explicit height, or flex: 1 inside a sized flex container. | | The toolbars and pane controls are unstyled | Step 4 missing: import scichart-scitrader/scitrader.css. | | A "SciChart trial" watermark | No licence key set. SciChart runs unlicensed on localhost; any other origin needs a key. See License. |

Known issues

• <StrictMode>. SciFinanceChartView doesn't yet start under React's development double mount. See Setup, step 3.

Support

• scitrader.io
• SciChart.js React charts
• Community forums
• Contact SciChart