React quickstart

React apps need two packages: the chart engine and ChartUI — a wrapper that adds the toolbar, drawing tools menu, and settings panels around your chart.

Loading chart…

What you will build: chart + toolbar, like a mini trading terminal.

What you need

• A React project (any version that supports hooks)
• Basic familiarity with useEffect — or an AI assistant to paste this for you

Step 1 — Install both packages

npm install @efixdata/exeria-chart @efixdata/exeria-chart-ui-react

Package	What it does
@efixdata/exeria-chart	Draws candles, lines, indicators
@efixdata/exeria-chart-ui-react	Adds toolbar and menus around the chart

Step 2 — Copy this component

Create a file (for example ChartExample.tsx) and paste:

import { useEffect, useRef, useState } from "react";
import {
  createChart,
  type Candle,
  type ChartInstance,
  type Interval,
} from "@efixdata/exeria-chart";
import { ChartUI } from "@efixdata/exeria-chart-ui-react";

const candles: Candle[] = [
  { stamp: 1715472000000, o: 1.1, h: 1.2, l: 1.05, c: 1.18, v: 2500 },
];

const interval: Interval = {
  symbol: "1h",
  milis: 60 * 60 * 1000,
};

export function ChartExample() {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [chart, setChart] = useState<ChartInstance | null>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) {
      return;
    }

    let disposed = false;
    const instance = createChart({ container });

    instance.init();

    void (async () => {
      await instance.setMainSeriesData(candles, interval);

      if (!disposed) {
        setChart(instance);
      }
    })();

    return () => {
      disposed = true;
      instance.destroy();
    };
  }, []);

  return (
    <div style={{ height: 480 }}>
      <ChartUI chart={chart}>
        <div ref={containerRef} style={{ width: "100%", height: "100%" }} />
      </ChartUI>
    </div>
  );
}

Render <ChartExample /> anywhere in your app.

How the pieces fit together

flowchart TB
  subgraph wrapper["Your page"]
    ChartUI["ChartUI — toolbar & menus"]
    div["div ref — chart draws here"]
  end
  ChartUI --> div
  createChart["createChart() in useEffect"] --> div

1. useEffect runs once when the component mounts.
2. createChart attaches to the inner div.
3. setChart(instance) tells ChartUI the engine is ready — toolbar buttons start working.
4. Cleanup calls destroy() when the component unmounts.

Important rules (easy to miss)

Rule	Why
Outer wrapper needs height: 480px (or similar)	Chart cannot size itself from nothing
Chart div must be inside <ChartUI>	Toolbar wraps around that child
ChartUI can receive chart={null} at first	It renders immediately; toolbar activates when chart is set

Styling

• Chart colors (candles, grid): pass theme to createChart({ … })
• Toolbar colors: pass theme to <ChartUI theme={…} />

Play with colors in the live theme creator.

Stack-specific setup

Your stack	Guide
New Vite project	Vite + React
Next.js App Router	Next.js App Router
Plain JS, no React	Vanilla quickstart

What is next?

• Add an indicator — EMA and RSI in two lines
• Custom theme — match your brand
• React UI integration — deeper ChartUI options