Vite + React

Vite is a fast way to start a React app in the browser. This guide goes from zero to a working chart in one sitting — scaffold the project, install Exeria, paste one file, run npm run dev.

Loading chart…

End result: a Vite app with chart and toolbar, running locally.

What you will do

1. Create a fresh Vite + React + TypeScript project
2. Install Exeria packages
3. Replace App.tsx with a chart component
4. Open localhost:5173 and see candles

No server-side rendering tricks needed — everything runs in the browser.

Step 1 — Scaffold the app

In a terminal:

npm create vite@latest exeria-vite -- --template react-ts
cd exeria-vite
npm install

You now have a minimal React app in the exeria-vite folder.

Step 2 — Install Exeria

Still in that folder:

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

Step 3 — Replace src/App.tsx

Delete the default Vite content and paste this entire file:

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: 101.2, h: 103.1, l: 100.9, c: 102.8, v: 3200 },
  { stamp: 1715475600000, o: 102.8, h: 104.2, l: 102.1, c: 103.9, v: 2950 },
];

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

export default function App() {
  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 (
    <main style={{ padding: 24 }}>
      <h1>My first Exeria chart</h1>
      <div style={{ height: 560 }}>
        <ChartUI chart={chart}>
          <div ref={containerRef} style={{ width: "100%", height: "100%" }} />
        </ChartUI>
      </div>
    </main>
  );
}

This is the same pattern as the React quickstart — Vite just happens to be the bundler.

Step 4 — Run it

npm run dev

Open the URL Vite prints (usually http://localhost:5173). You should see candles and a toolbar.

Do you need ChartUI?

Yes — keep ChartUI	No — remove ChartUI
You want toolbar, drawings, settings out of the box	You build your own controls
Trading-style or analytics apps	Minimal embeds, custom UI

Without ChartUI, keep createChart + useEffect and drop the wrapper — same as Vanilla quickstart, but inside React.

Common issues

Problem	Fix
Blank chart area	The div around ChartUI needs height: 560px (or any non-zero value)
TypeScript errors on import	Run npm install again; restart the dev server
Hot reload looks broken after edits	Refresh the page — chart mounts in useEffect

What is next?

• React quickstart — explains the wrapper pattern in more detail
• Connect with a Data Connector — live crypto prices
• Theming overview — colors for chart and toolbar