Installation

ChartForge ships as six tree-shakeable packages under the @elitechart/* scope. Pick the one that matches your goal — you almost never need all six.

Three install paths

Path A — @elitechart/elitechart (recommended)

The fastest way to ship a real trading chart.

pnpm add @elitechart/elitechart react react-dom

'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>
  );
}

EliteChart already bundles @elitechart/core, @elitechart/themes, @elitechart/indicators, and @elitechart/drawings internally — you do not need to install them separately.

Path B — Compose your own UI

Pick the rendering engine and assemble whatever surface your product needs (custom toolbar, custom watchlist, custom layouts).

pnpm add @elitechart/core
# optional add-ons:
pnpm add @elitechart/themes @elitechart/indicators @elitechart/drawings

import { createChart, asTimestampMs, asPrice, asVolume } from '@elitechart/core';
import { darkTheme, applyTheme } from '@elitechart/themes';

const container = document.getElementById('chart')!;
applyTheme(container, darkTheme);
const chart = createChart(container, { autosize: true });
chart.setTheme(darkTheme);
chart.setBars([
  { time: asTimestampMs(Date.now()), open: asPrice(100), high: asPrice(105),
    low: asPrice(99), close: asPrice(104), volume: asVolume(1_200) },
]);

Add-on packages

• @elitechart/themes — darkTheme, lightTheme, applyTheme(), plus helpers for custom palettes.
• @elitechart/indicators — 50+ pure-function technical-analysis indicators, each with its own subpath import:
  codeCopy

  import { rsi } from '@elitechart/indicators/rsi';
  import { macd } from '@elitechart/indicators/macd';

• @elitechart/drawings — drawing-tool primitives (trend lines, channels, Fibonacci retracement, rectangles, etc.).

Each add-on is tree-shakeable: importing one indicator pulls in only its math, not the rest of the catalogue.

Path C — @elitechart/react (headless)

Minimal React adapter — a <Chart /> that mounts the engine into a <div>, plus two hooks. Use this when you already have a chrome layer (toolbar, sidebars, etc.) and just need a chart primitive.

pnpm add @elitechart/react @elitechart/core react react-dom

'use client';
import { useRef } from 'react';
import { Chart, useChart, useChartTheme } from '@elitechart/react';
import { darkTheme, lightTheme } from '@elitechart/themes';

export function MyChart() {
  const ref = useRef(null);
  const handle = useChart(ref);
  const [theme, setTheme] = useChartTheme(handle, darkTheme);

  return (
    <>
      <button onClick={() => setTheme(theme === darkTheme ? lightTheme : darkTheme)}>
        Toggle theme
      </button>
      <Chart ref={ref} options={{ autosize: true }} className="h-96 w-full" />
    </>
  );
}

@elitechart/react already prepends 'use client'; to its bundle, so it's safe to import directly from a Next.js Server Component file — Next will treat it as a client boundary automatically.

Stylesheet (EliteChart only)

@elitechart/elitechart ships a precompiled stylesheet. Import it once near your app's root:

import '@elitechart/elitechart/styles.css';

Vite / CRA equivalent goes in src/main.tsx. The stylesheet is namespaced — class collisions with your app's own Tailwind only happen if you deliberately reuse the same custom utility names.

TypeScript

ChartForge is written in strict TypeScript with branded types for financial primitives (Price, TickSize, TimestampMs, Volume). Construct branded values via the as* helpers:

import { asPrice, asTimestampMs, asVolume } from '@elitechart/core';

const bar = {
  time: asTimestampMs(1_700_000_000_000),
  open: asPrice(100.25),
  high: asPrice(101.00),
  low: asPrice(99.75),
  close: asPrice(100.80),
  volume: asVolume(1_500),
};

This rules out unit-mismatch bugs at compile time (e.g. passing seconds where milliseconds are expected).

Node version

ChartForge requires Node 20.11 or newer for development. Runtime support targets evergreen browsers (Chrome, Safari, Firefox, Edge) plus iOS Safari 16+ and Android Chrome.

What's next?

• Quickstart — first chart on screen.
• Next.js App Router — SSR safety + dynamic import patterns.
• API Reference — full TypeDoc reference, package by package.