Quick start
A running ox-charts terminal on the mock datafeed and the paper broker, in a dozen lines.
Add the package
ox-charts is published to GitHub Packages, private to the option-x-tech organisation. Send the scope there in your app's .npmrc, with a token that has read:packages in your user config, then install:
@option-x-tech:registry=https://npm.pkg.github.compnpm add @option-x-tech/ox-chartsInside the ox-charts monorepo, depend on "@option-x-tech/ox-charts": "workspace:*" instead.
React 18 or 19 is a peer dependency. Host integration covers the token, CI, older Vite versions and linking the source from another repo.
Render the shell
import { ChartShell, createMockDatafeed, createPaperBroker } from "@option-x-tech/ox-charts";
const feed = createMockDatafeed({ seed: 7 });
const broker = createPaperBroker({ initialCapital: 500_000, currency: "INR" });
export function Terminal() {
return (
<div style={{ height: "100vh" }}>
<ChartShell
datafeed={feed}
defaultSymbol="NSE:NIFTY"
defaultResolution="5"
theme="optionx"
trading={broker}
tradingOptions={{ currencySymbol: "₹" }} // tick and lot sizes come from resolveSymbol
/>
</div>
);
}Swap in your own data and broker
Replace the mock feed with your IDatafeed and the paper broker with your trading adapter. Leave out trading for a read-only chart.
Live
This is the code above, running in the page: a real ChartShell on the library's mock feed, trading the paper broker. Click Buy, drag a bracket, add an indicator.
Give the parent a height
The shell fills its container. A parent with no height renders a zero-height chart.