Getting Started

Before You Start

Follow Installation first: it installs the packages, imports the stylesheet, and serves SciChart's WebAssembly with your bundler.

Register a Data Source

Charts get their candles from an exchange, looked up by name. The SDK registers none by default. Register the ones your app uses once at startup, before any chart is created:

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

defaultExchangeProvider.registerExchange(BinanceExchange, idbPriceStore);
defaultExchangeProvider.registerExchange(CoinbaseExchange, idbPriceStore);

The second argument is the candle store. idbPriceStore caches downloaded candles in IndexedDB, so a reload draws straight away and fetches only what is new.

Create a Chart

SciFinanceChartPanel.create builds a whole chart inside a DOM element: the price pane, a pane for each study that needs one, and a data feed for the symbol.

import {
    CandleInterval,
    CoinbaseExchange,
    OHLCStudy,
    SciFinanceChartPanel,
    VolumeStudy
} from "scichart-scitrader";

const financeChartPanel = await SciFinanceChartPanel.create(document.getElementById("chart"), {
    exchangeName: CoinbaseExchange.name, // name="Coinbase" matches the built-in CoinbaseExchange
    symbol: "BTC-USD",
    interval: CandleInterval.ONE_HOUR,
    studies: [new OHLCStudy(), new VolumeStudy()],
});

The element needs a size: the chart fills it, and follows it when it resizes. Out of the box, the user can zoom with the wheel or a pinch, pan by dragging, load older candles by panning left, rescale an axis by dragging it, and double-click to fit. The legend and crosshair follow the mouse.

create resolves with the chart's API, called financeChartPanel in these docs. Its financeApi is the chart, with the methods in the sections below; cleanup() removes it.

The chart below is live, with Coinbase data. Edit on CodePen opens the code in CodePen.

TS

import "scichart-scitrader/scitrader.css";
import {
    CandleInterval,
    CoinbaseExchange,
    defaultExchangeProvider,
    idbPriceStore,
    OHLCStudy,
    SciFinanceChartPanel,
    VolumeStudy,
} from "scichart-scitrader";

// 1. Register a data source, once, at app startup.
//    idbPriceStore caches candles in IndexedDB, so a reload only fetches what is new.
defaultExchangeProvider.registerExchange(CoinbaseExchange, idbPriceStore);

// 2. Create the chart inside an element that has a size, e.g. <div id="chart" style="height: 600px">
async function createChart(elementId: string) {
    const financeChartPanel = await SciFinanceChartPanel.create(document.getElementById(elementId), {
        exchangeName: CoinbaseExchange.name, // name="Coinbase" matches the built-in CoinbaseExchange
        symbol: "BTC-USD", // Coinbase's symbol format
        interval: CandleInterval.ONE_HOUR, // Coinbase offers 1m, 5m, 15m, 1h, 6h and 1d candles
        // OHLCStudy draws the candles; VolumeStudy adds volume columns along the bottom of the price pane
        studies: [new OHLCStudy(), new VolumeStudy()],
    });

    // 3. When the element goes away, free the chart's resources with financeChartPanel.cleanup()
    return financeChartPanel;
}

createChart("chart");

Using React? <SciFinanceChartView config={config} />, from scichart-scitrader-react, takes the same config. SciFinanceChart has a live React example.

Next: the SciFinanceChart Component

SciFinanceChart is the chart you just created, in full: in TypeScript and React, the pane sizes, maximising, hiding and autoranging panes in code, touch and mouse modes, its API and every config option.

What Else You Can Do

Each section below is a short taste. chart is financeChartPanel.financeApi.

Symbols, Intervals and Periods

Change what the chart shows: the symbol, the candle interval, and the period in view.

await chart.setSymbol("ETH-USD");
await chart.changeInterval(CandleInterval.ONE_DAY);
await chart.setPeriod("1Y");

See Symbols, Intervals and Periods.

Studies and Indicators

Add technical indicators such as RSI, MACD, moving averages and Bollinger Bands, in the price pane or a pane of their own, and change the candle type.

const rsi = new RSIStudy();
await chart.attachStudy(rsi); // in a pane of its own, below the price
chart.detachStudy(rsi);

See Studies and Indicators, with a page for each indicator.

Drawing Tools

Let users draw trend lines, Fibonacci retracements, channels and patterns, from a toolbar.

const drawing = DrawingToolsController.attach(chart);
DrawingToolbar.create(document.getElementById("tools"), drawing, { orientation: "vertical" });

See Drawing Tools.

Data Sources

Besides Coinbase and Binance, chart CSV files, JSON, or any market data API through an exchange of your own.

const exchange = await CSVExchange.fromUrl("/data/btc-1h.csv", { name: "MyData" });
registerCSVExchange(defaultExchangeProvider, exchange); // charts can now use exchangeName: "MyData"

See Data Sources.

UI Components

The controls a trading app puts around the chart: interval and period pickers, a candle-type menu, study settings, a drawing list, a market-depth ladder and watchlist sparklines, in plain DOM and React.

IntervalSelector.create(document.getElementById("intervals"), {
    value: CandleInterval.ONE_HOUR,
    onChange: (interval) => chart.changeInterval(interval),
});

See UI Components.

Saving and Restoring

Save a chart's symbol, studies, drawings and layout as JSON, and restore it later.

const state = financeChartPanel.toJSON();

// Later, e.g. on the next visit
financeChartPanel.cleanup();
const restored = await SciFinanceChartPanel.fromJSON(element, state);

See Saving and Restoring.

Styling and Themes

Choose a built-in theme, dark, light or ocean, or make your own, and switch a live chart.

const financeChartPanel = await SciFinanceChartPanel.create(element, { /* … */ theme: SCITRADER_LIGHT_THEME });
financeChartPanel.financeApi.setTheme(SCITRADER_OCEAN_THEME);

See Styling and Themes.