Quickstart

Render your first ChartForge chart in a Next.js App Router app in under thirty seconds.

ChartForge is a production-grade trading-chart library for React and TypeScript. This page gets a candlestick chart on screen as fast as possible — no datafeed wiring, no theme overrides, just EliteChart in a Next.js app/page.tsx.

ChartForge is client-only. Anything that touches the chart needs to run inside a Client Component. In Next.js App Router, ensure the parent component has 'use client'; at the top of the file (or import the chart through next/dynamic).

1. Install

@elitechart/elitechart is the batteries-included drop-in: chart + toolbar + drawings + indicators + theme toggle, in one component.

code

pnpm add @elitechart/elitechart react react-dom
# or: npm install @elitechart/elitechart react react-dom
# or: yarn add @elitechart/elitechart react react-dom

react and react-dom are peer dependencies. If your app already has them, you don't need to install them again.

2. Render the chart

Drop this into a fresh Next.js App Router project (app/page.tsx):

code

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

export default function Page() {
  return (
    <div className="h-screen w-screen">
      <EliteChart symbol="BTCUSD" timeframe="1h" />
    </div>
  );
}

That's it. You now have:

A live candlestick chart with seeded sample data.
The full EliteChart chrome — top toolbar, drawing tools, watchlist, bottom screeners, right-click menus, replay, alerts.
A theme toggle (light / dark) wired through CSS variables.
Pinch-zoom and pan on touch devices.

3. Set the container size

EliteChart fills its parent, so the parent must have a non-zero height. The h-screen w-screen Tailwind classes above are one option; an explicit style works too:

code

<div style={{ width: '100%', height: 600 }}>
  <EliteChart symbol="BTCUSD" timeframe="1h" />
</div>

If you forget this, the chart canvas measures as 0×0 and nothing paints — a common first-run gotcha.

4. Plug in your own datafeed (optional)

By default EliteChart ships with a built-in sample datafeed so the chart renders out of the box. To pipe in real OHLCV data, pass a datafeed prop that conforms to the Datafeed interface:

code

'use client';
import { EliteChart } from '@elitechart/elitechart';
import '@elitechart/elitechart/styles.css';
import { myDatafeed } from '@/lib/datafeed';

export default function Page() {
  return (
    <div className="h-screen w-screen">
      <EliteChart datafeed={myDatafeed} symbol="BTCUSD" timeframe="1h" />
    </div>
  );
}

See the EliteChart datafeed-adapter guide for a complete REST + WebSocket example.

What's next?

Installation — pick the right package for your use case (batteries-included vs. compose-your-own).
Next.js App Router — 'use client' boundaries, dynamic imports, and hydration-warning prevention.
API Reference — every public symbol, generated from TSDoc.