Introduction
ChartForge in one minute — what it is, who it's for, and where to dig in next.
ChartForge is a production-grade trading-chart library for React and
TypeScript. It targets the same feature bar as professional desktop
trading platforms — candles, 30+ indicators, 40+ drawing tools,
replay, alerts, theming, drag-and-resize panels — and ships under the
@elitechart/* npm scope.
What's in this section
- What is EliteChart? — the elevator pitch. One paragraph, one image, one CTA.
- How it works — the data path from your backend to a painted candle, in five steps.
- Architecture overview — package boundaries, module graph, runtime model.
Two ways to use it
ChartForge ships as two complementary surfaces:
@elitechart/elitechart— the batteries-included drop-in: chart + toolbar + indicators + drawings + theme switcher in one<EliteChart />component. Render it, walk away.@elitechart/core+ add-ons — the rendering engine on its own. Use this when you have a custom chrome and just want a fast, correct chart primitive.
Most teams start with EliteChart and graduate to core if they hit a
hard customisation ceiling. The transition is incremental — you keep
the same data contracts (Bar, Datafeed, Theme).
Why a new charting library?
The market has historically split between two extremes — heavyweight proprietary platforms with locked-down customisation, and tiny chart primitives with no UI scaffolding. ChartForge sits in the middle: production-grade UX out of the box, open primitives when you need to override.
Specifically:
- 60fps on 10,000 candles, 50ms budget at 100k.
- 150KB gzipped core, tree-shakeable add-ons.
- Strict TypeScript, branded financial primitives, zero
any. - WCAG 2.1 AA accessibility, keyboard-navigable, screen-reader-aware.
- Next.js App Router-safe out of the box (no hydration warnings).