Choosing a package

Exeria Charts ships as two npm packages. You can install one or both. This page helps you pick without over-engineering day one.

Loading chart…

Core only — chart canvas, no built-in toolbar.

The two packages

Package	What you get
@efixdata/exeria-chart	Chart engine — candles, indicators, drawings, data connectors
@efixdata/exeria-chart-ui-react	ChartUI — toolbar, indicators menu, settings dialogs around the chart

ChartUI depends on the core package. It does not replace it — you still call createChart() and pass the instance into <ChartUI chart={chart}>.

Decision flow

flowchart TD
  Start["Starting a chart integration"]
  OwnUI{"Already have your own\n toolbar / menus?"}
  React{"Using React?"}
  Core["Install core only"]
  Both["Install core + ChartUI"]
  Other["Use core + your framework UI"]

  Start --> OwnUI
  OwnUI -->|Yes| Core
  OwnUI -->|No| React
  React -->|Yes| Both
  React -->|No| Core
  Core --> Other

Choose core only (@efixdata/exeria-chart)

Best when:

• You build a custom trading terminal with your own top bar and side panels
• You embed a minimal chart in an article or dashboard tile
• You use Vue, Svelte, or plain HTML (no React)
• You want the smallest bundle and full layout control
• You integrate via WebView with native chrome

npm install @efixdata/exeria-chart

Guide: Vanilla quickstart.

You still get: data connectors, indicators, drawings, theming, mobile layout API — just no pre-built React toolbar.

Choose core + ChartUI (@efixdata/exeria-chart-ui-react)

Best when:

• You want a working terminal UI quickly — intervals, indicators, settings, drawings
• You already use React (Vite, Next.js, CRA, …)
• Your product can accept the default toolbar layout (or hide parts via theme.toolbar)
• You are prototyping and can refine chrome later

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

Guide: React quickstart.

Loading chart…

Core + ChartUI — toolbar and left menu included.

Compare at a glance

Feature	Core only	+ ChartUI
Candles, zoom, pan	✅	✅
Indicators / strategies	✅ (code or your UI)	✅ + picker dialog
Drawing tools	✅ (toolDrawer)	✅ + left menu
Chart settings dialog	API only	✅ built-in
Top toolbar	You build	✅ built-in
Mobile compact toolbar	Your CSS	✅ built-in
Theming	Runtime theme	Runtime + UI theme prop
SSR / Next.js	Your boundary	Next.js guide

Recommended path for beginners

1. Prove data flow with core only or React quickstart — one symbol, one timeframe.
2. If you use React and need toolbar → add ChartUI.
3. Hide buttons you do not need (theme.toolbar) before rebuilding the shell.
4. Read Advanced integration when you customize mobile or share.

Data connectors work with both

import { BinanceAdapter } from "@efixdata/connector-binance";
// or: import { BybitAdapter } from "@efixdata/connector-bybit";
// or: import { OkxAdapter } from "@efixdata/connector-okx";

const chart = createChart({ container, dataAdapter: new BinanceAdapter() });

Connectors attach to core — ChartUI is optional on top. See Binance, Bybit, OKX, Kraken, or KuCoin for exchange-specific setup.

Licensing is the same core

Both packages are AGPL v3 for the open-source distribution. Closed-source products need a commercial license regardless of whether you use ChartUI.

What is next?

• Vanilla quickstart
• React quickstart
• Licensing
• Choosing data path — connector vs your API