Skip to content
EliteChart

What is EliteChart?

A drop-in React component that renders a full trading workspace — chart, toolbar, indicators, drawings, replay, theming.

EliteChart is the batteries-included surface of ChartForge — a single React component that renders an entire trading workspace. Top toolbar, drawings rail, watchlist, alerts, replay, theme toggle, and the chart canvas itself, all wired together. Drop it into a Next.js page and it boots.

Quick example

code
'use client';
import { EliteChart } from '@elitechart/elitechart';
import '@elitechart/elitechart/styles.css';

export default function Page() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <EliteChart symbol="BTCUSD" timeframe="1h" kind="candle" />
    </div>
  );
}
View source on GitHub →

How it works

EliteChart is a thin orchestrator. Internally it composes the rendering engine (@elitechart/core), the indicator pack (@elitechart/indicators), the drawing-tool primitives (@elitechart/drawings), and the design tokens (@elitechart/themes). All of these are also published as standalone packages — EliteChart just wires the defaults so you get a working trading UI for free.

The component is client-only. The rendering engine touches Canvas, ResizeObserver, and devicePixelRatio, none of which exist during server rendering. In Next.js App Router that means EliteChart must mount inside a Client Component ('use client'; at the top of the file). See Next.js App Router for the four supported patterns.

State that survives reload (drawings, indicators, layout, theme) is serialised through the public Zustand stores re-exported from the package. See persistence for the contract.

Variations

Bring your own data

code
<EliteChart symbol="AAPL" timeframe="1d" datafeed={myDatafeed} />

Lock the timeframe

code
<EliteChart symbol="ETHUSD" timeframe="15m" kind="candle" />

Render headless inside an existing layout

If EliteChart's chrome is too much, drop down to @elitechart/core or @elitechart/react and mount only the canvas. See headless mode.

API

PropTypeDefaultDescription
symbolstring'BTCUSD'Initial symbol id passed to the datafeed.
timeframeResolution'1h'Initial bar resolution; see resolutions.
kindSeriesKind'candle'Initial series kind; see series.
datafeedDatafeed?mockOptional data backend; see datafeed contract.
onReady(handle) => void–Fires once the chart has mounted and initial data is loaded.

The full prop reference is in the API page for EliteChart.