Embedding ChartShell or OxChart
Pick the full terminal (ChartShell) or the bare canvas (OxChart), and what each one needs.
ox-charts has two React entry points. ChartShell is the whole terminal: toolbar, drawing rail, chart grid, indicators, OxScript, order flow, trading and the status bar. OxChart is only the canvas engine, for hosts that build their own chrome.
| ChartShell | OxChart | |
|---|---|---|
| You get | The full terminal | One chart, driven through IChartApi |
| Data | datafeed prop (an IDatafeed) | You call series.setData / update yourself |
| Trading | trading adapter + tradingOptions | attachTrading(chart, adapter) if you want lines |
| State | Persists through the storage prop | None; the host owns it |
The terminal
import { ChartShell, createPaperBroker } from "@option-x-tech/ox-charts";
const broker = createPaperBroker({ initialCapital: 500_000, currency: "INR" });
export function Terminal() {
return (
<div style={{ height: "100vh" }}>
<ChartShell
datafeed={myDatafeed}
defaultSymbol="NSE:NIFTY"
defaultResolution="5"
trading={broker}
tradingOptions={{ currencySymbol: "\u20b9" }} // tick and lot sizes: resolveSymbol, per symbol
/>
</div>
);
}- The shell fills its parent, so give the parent a height.
storagetakes{ get, set }. Cells, layout, sync toggles, theme and settings persist underox-shell:v1. Without it the shell useslocalStorage.defaultIndicatorsseeds a cell that has never saved indicators, e.g.[{ definitionId: "ema", params: { length: 20 } }].scriptStoreswaps where OxScript files are saved. See Saving scripts and the library.- Leave out
tradingand the quote buttons, the "+" menu, order lines and the trading panel disappear.
The bare chart
import { OxChart } from "@option-x-tech/ox-charts/react";
import type { IChartApi, OhlcBar } from "@option-x-tech/ox-charts";
function Mini({ bars }: { bars: OhlcBar[] }) {
return (
<OxChart
style={{ height: 320 }}
onReady={(chart: IChartApi) => {
const series = chart.addSeries("candlestick");
series.setData(bars);
}}
/>
);
}The CSS is contained
Tailwind classes carry the ox: prefix, preflight is off and nothing is declared on :root, so your app's styles and the chart's never collide. The stylesheet is compiled ahead of time and injected on first use; hosts need no Tailwind.