A complete trading terminal in one React component: order flow, trading from the chart, bar replay and Pine-style scripts, running on your own data.

Quick start Read the guides
NIFTY 505m
loading chart engine

Eighty seconds of the terminal.

Order flow, chart trading, replay, scripts and the wall, as they run in the demo.

Five things a chart library usually leaves to the app.

All in the box, next to 68 indicators, 52 drawing tools and 18 chart types. Scroll, or pick a tab on the window.

loading chart engine

Read the tape inside the candle.

Footprint bars in bid-ask, delta, profile or count mode, with point of control, diagonal imbalances and a labelled stats footer. Volume profile, TPO, bubbles and an order-book heatmap layer over any chart.

Buy on the quote row, manage on the line.

Pass any ITradingAdapter and the whole trading layer comes up: order and position lines, brackets you drag, the price-axis “+”, an order ticket, and a dock with orders, positions, closed trades and stats.

Backtest in a worker, then arm it.

A strategy() script runs through the same paper pipeline as a manual order. The tester reports equity, drawdown, Sharpe, win rate and every fill, and flags ambiguous bars so a too-good result is easy to check.

Rewind the market and trade it again.

Truncate the chart at any bar and step or play forward at a chosen speed. Indicators, layers, order flow and the paper account all follow the replay clock as if the feed were live.

Pine-compatible scripts, native speed.

Indicators and strategies compile to the same incremental fold engine as the built-ins and run in a worker with a time budget. A library of prebuilt scripts, an editor with completion, plots, shapes, alerts and strategy calls.

Two axes of theme. Yours, or 10 of ours.

Light or dark, and a candle colour pair, chosen independently. Every pair clears the WCAG contrast floors and three colour-vision simulations in the test suite. Bring your own tokens with createTheme, or hand the shell your --ox-* custom properties.

OptionX·#74d10a#ff4d5e

NSE:RELIANCE5mdark · OptionX
loading chart engine
theme.ts
import { createTheme } from "@option-x-tech/ox-charts";

// "OptionX" on the dark base.
// Pass the object to <ChartShell theme={theme} />
export const theme = createTheme("dark", {
  name: "optionx-dark",
  upColor: "#74d10a",
  downColor: "#ff4d5e",
  accent: "#797ee3",
});
import { useState } from "react";
import { ChartShell, createPaperBroker } from "@option-x-tech/ox-charts";
import { nemesisFeed } from "./datafeed";

export function Terminal() {
  // Lazy state, not memo: a broker rebuilt on re-render would drop working orders.
  const [datafeed] = useState(() => nemesisFeed);
  const [broker] = useState(() =>
    createPaperBroker({ tickSize: 0.05, commission: { type: "percent", value: 0.01 } })
  );

  return (
    <ChartShell
      datafeed={datafeed}
      defaultSymbol="NSE:NIFTY"
      defaultResolution="5"
      theme="dark"
      trading={broker}
      tradingOptions={{ currencySymbol: "₹", qtyPresets: [1, 2, 5] }}
      defaultIndicators={[{ definitionId: "vwap" }]}
      features={{ learn: false }}
      storage={{
        get: (k) => localStorage.getItem(k),
        set: (k, v) => localStorage.setItem(k, v),
      }}
    />
  );
}

Mount it in an afternoon.

Implement IDatafeed against your backend, hand it to ChartShell and the whole terminal is yours: symbols, intervals, chart types, layers, drawings, indicators, replay and, with an adapter, trading. The engine is there too, if you want to go lower.

Full ChartShell API

Built for the tick, not the render.

The shell is the product; the engine is why it stays fast with sixteen charts, a footprint and a handful of scripts on screen.

src/core is plain TypeScript on canvas.

Series render from a struct-of-arrays store, axes and panes lay out on one animation frame, and the React shell is an optional wrapper around createChart. Fifteen series types and six bar transforms without a virtual DOM in the hot path.

Every indicator is a state fold, not a recompute.

A new bar advances the state; the still-forming bar rolls back and re-folds when it updates. EMA and MACD seed the way TradingView does. Scripts compile to the same folds, so OxScript pays no interpretation tax on every tick.

Any output can be the next one's source.

The engine treats an indicator's plot like a price source, so an RSI of an EMA, a Bollinger band around a VWAP or a script over CVD are one definition away. Delta and CVD fall back to an approximation on plain OHLC feeds.

Sixteen charts.
One component.

The demo's market wall, live on one ChartShell: each cell with its own instrument, interval, chart type and studies. Four cells on a phone, sixteen on a desk. Click into any of them.

loading chart engine

Now on your data.

Quick start