@elitechart/elitechart
v0.1.0
Published
Drop-in, fully-featured React trading chart — install, pass a datafeed, customize colors + tools + bars.
Downloads
75
Maintainers
sammirzaevReadme
@elitechart/elitechart
Drop-in, fully-featured React trading chart. One <EliteChart /> tag gives you the TopBar + drawing-tool rail + watchlist sidebar + screener bottom bar + 46 drawing tools + 30 indicators + right-click menus + replay mode + alerts + theme toggle + trading panel — production-ready and brandable from day one.
SSR note: EliteChart is a client component. The bundle ships with a
'use client';banner, so you can import it directly from a Next.js Server Component without wrapping. The chart engine boots inuseEffect, never at module scope.
Install
pnpm add @elitechart/elitechartreact and react-dom are peer dependencies (>=18.3). The package bundles @elitechart/core, @elitechart/drawings, @elitechart/indicators, and @elitechart/themes so consumers don't have to manage four pinned versions.
Quick example
// app/page.tsx
import { EliteChart } from '@elitechart/elitechart';
import '@elitechart/elitechart/styles.css';
export default function Page() {
return <EliteChart symbol="BTCUSD" timeframe="1h" />;
}That's it. You now have the full EliteChart UI mounted at the page root with a synthetic mock datafeed wired in for development.
Next.js App Router
// app/layout.tsx
import '@elitechart/elitechart/styles.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className="dark">
<body>{children}</body>
</html>
);
}
// app/chart/page.tsx
import { EliteChart } from '@elitechart/elitechart';
export default function ChartPage() {
return <EliteChart symbol="ETHUSD" timeframe="15m" kind="candle" />;
}The CSS bundle is the only side-effect file in the package — import it once in your root layout. The engine itself boots inside useEffect so this code is safe to import from a Server Component.
Props
| Prop | Type | Default | Description |
| ----------- | ------------------------------------------------------------------------ | ----------- | ----------------------------------------------------------------- |
| symbol | string | 'BTCUSD' | Initial ticker symbol. |
| timeframe | '1m' \| '5m' \| '15m' \| '30m' \| '1h' \| '4h' \| '1D' \| '1W' \| '1M' | '1h' | Initial timeframe. |
| kind | 'candle' \| 'bar' \| 'line' \| 'area' | 'candle' | Initial series kind. |
| onReady | () => void | undefined | Fired once the chart handle is live — wire custom listeners here. |
| className | string | undefined | Class on the outer workspace container. |
| style | React.CSSProperties | undefined | Inline style on the outer container. |
| children | ReactNode | undefined | Slot above the chart — use for custom branding. |
Richer knobs (per-tool enable/disable, indicator set, panel toggles, full theme overrides, datafeed adapter, broker adapter, every event hook) are on the roadmap.
Custom theme
EliteChart's theme tokens live in CSS variables under :root, html.dark, and html.light. Override any token in your own stylesheet — no JS theme-toggle plumbing required, because the chart engine reads the same tokens at paint time.
/* your-app.css — loaded after @elitechart/elitechart/styles.css */
html.dark {
--accent-blue: #f43f5e;
--up: #16a34a;
--down: #dc2626;
--bg-primary: #050505;
}
html.light {
--accent-blue: #2563eb;
--up: #15803d;
--down: #b91c1c;
}For programmatic theme changes the package re-exports the underlying stores so you can drive light/dark from your own code:
'use client';
import { useUIStore, useChartStore, useChartHandle } from '@elitechart/elitechart';
function StatusBar() {
const symbol = useChartStore((s) => s.symbol);
const themeMode = useUIStore((s) => s.themeMode);
return (
<span>
{symbol} · {themeMode}
</span>
);
}
function ExportButton() {
const handle = useChartHandle();
return <button onClick={() => handle?.exportPng({ filename: 'chart.png' })}>Export PNG</button>;
}Datafeed contract (preview)
EliteChart consumes the Datafeed interface re-exported from @elitechart/core. Today the package ships a synthetic mock datafeed for local development; first-class adapter wiring lands in Phase 1b.
import type { Datafeed, Bar, GetBarsRequest, SubscribeRequest } from '@elitechart/elitechart';
export const myFeed: Datafeed = {
async getBars({ symbol, resolution, from, to, signal }: GetBarsRequest) {
const url = `/api/bars?s=${symbol.id}&res=${resolution.kind}${resolution.value}&from=${from}&to=${to}`;
const res = await fetch(url, { signal });
return (await res.json()) as ReadonlyArray<Bar>;
},
subscribe({ symbol, resolution }: SubscribeRequest, onBar) {
const ws = new WebSocket(`wss://example.com/${symbol.id}/${resolution.kind}${resolution.value}`);
ws.onmessage = (e) => onBar(JSON.parse(e.data) as Bar);
return () => ws.close();
},
searchSymbols: async (q) => fetch(`/api/search?q=${q}`).then((r) => r.json()),
resolveSymbol: async (id) => fetch(`/api/symbol/${id}`).then((r) => r.json()),
};Works with REST + polling, WebSocket streams, MetaTrader 5 via your own server-side bridge, Interactive Brokers gateway, or a fully custom protocol.
What's in the box
- Full chrome — TopBar, left drawing-tool rail, right watchlist sidebar, bottom screener panel, settings drawer.
- 46 drawing tools including Andrews pitchforks, Fibonacci channels, anchored VWAP, fixed-range volume profile, long/short positions.
- 30+ indicators wired into the catalog dialog with edit/delete chips on the legend.
- Replay mode, alerts (with anchoring to drawings), bar export, full keyboard shortcut overlay.
- Brand-tunable via CSS variables — no JS rewiring needed for color overrides.
- Mobile-first responsive layout — sidebar collapses, dialogs become bottom-sheets, 44px+ touch targets.
Compatibility
- React 18.3+ and React 19.
- Next.js App Router (with
'use client'banner) and Pages Router. - Browsers Chrome / Safari / Firefox / Edge (evergreen), iOS Safari 16+, Android Chrome.
- SSR safe to import from Server Components; engine boots in
useEffect. - Tree-shakeable ESM + CJS dual emit; CSS is a single side-effect import.
Links
License
MIT — see LICENSE.
Copyright © 2026 EliteChart (ChartForge) — founded and engineered by Samandar Mirzaev.