Getting started
You want a chart on screen. This section gets you there — no trading jargon, no assumptions that you have built charts before.
Each guide includes copy-paste code, plain explanations, and a live preview so you know what you are aiming for.
Pick your path
Not sure where to start? Use this table:
| You are building… | Start here | Why |
|---|---|---|
| Plain HTML/JS, or your own UI | Vanilla quickstart | Smallest install — just the chart engine |
| Any React app | React quickstart | Chart + built-in toolbar and menus |
| Brand-new Vite + React project | Vite + React | Scaffold → install → paste one file |
| Next.js (App Router) | Next.js App Router | Safe client-only mounting for SSR |
Vibe coding? Tell your AI: “Follow the Exeria Vanilla quickstart” or “Follow the Exeria React quickstart” and paste the code blocks from that page.
The whole flow in four steps
Every path — vanilla or React — follows the same idea:
- Install the npm package(s).
- Add a
<div>with a fixed height (the chart draws inside it). - Call
createChart→init()→setMainSeriesDatawith your candles. - Call
destroy()when the user leaves the page (or React unmounts).
That is the entire integration loop. Everything else — live prices, indicators, themes — builds on top.
After your first chart
- Tutorials — step-by-step recipes (live data, indicators, themes, …)
- Chart with your data — load candles from your API
- Choosing a package — core only vs React UI
Quick checklist
| Check | Why it matters |
|---|---|
Container has height: 480px (or similar) | Zero height = invisible chart |
init() before loading data | Chart needs to wake up first |
destroy() on teardown | Avoids memory leaks in SPAs |
Ready? Open Vanilla quickstart or React quickstart and build something you can show off in the next ten minutes.