Skip to main content
Skip to main content

Vanilla quickstart

Vanilla means no React, no framework — just JavaScript (or TypeScript) and a <div> on your page. You get the chart engine only: no toolbar, no menus. Perfect when you bring your own buttons or embed a small chart in an article.

Loading chart…
What you will build: candles loaded from a short array of numbers.

What you need​

  • Node.js installed (for npm)
  • Any web page with a empty box for the chart

Step 1 — Install​

Open a terminal in your project folder and run:

npm install @efixdata/exeria-chart

This downloads the chart library. One package, nothing else required.

Step 2 — Add a container on your page​

The chart draws inside a normal HTML element. Give it width and height — without height you get a blank page:

<div id="chart-root" style="width: 100%; height: 480px;"></div>

Think of this div as a picture frame. The chart fills the frame.

Step 3 — Prepare sample data​

A candle is one bar on the chart — prices during one time slice (here: one hour):

import { type Candle, type Interval } from "@efixdata/exeria-chart";

const candles: Candle[] = [
  // stamp = start time (UTC, milliseconds)
  // o,h,l,c = open, high, low, close
  // v = volume (0 is fine if you do not have it)
  { 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, // one hour in milliseconds
};

Later you will replace this array with data from your API. The shape stays the same.

Step 4 — Create and show the chart​

import { createChart } from "@efixdata/exeria-chart";

const container = document.getElementById("chart-root");

if (!container) {
  throw new Error("Add a #chart-root div to your HTML first");
}

const chart = createChart({ container });

chart.init();

await chart.setMainSeriesData(candles, interval);

What each line does:

LinePlain English
createChartAttach the engine to your div
init()Wake the chart up (do this once)
setMainSeriesDataPaint the candles

After this runs, you should see a chart like the preview above.

Step 5 — Change how it looks (optional)​

Switch from candles to a simple line:

chart.setMainDrawMode("Line");

Step 6 — Move the last price (optional)​

When a new price arrives, nudge the rightmost bar:

chart.appendTick({
  stamp: Date.now(),
  price: 104.12,
  v: 1200,
});

Full live-feed patterns: Live data stream.

Step 7 — Clean up​

When the user navigates away or you remove the chart:

chart.destroy();

Skipping this in a single-page app can cause slow leaks over time.

When things go wrong​

SymptomFix
Empty white boxSet height on #chart-root
Error before candles appearCall init() before setMainSeriesData
Bars look shiftedUse UTC millisecond timestamps at bar open time

Is vanilla right for you?​

Choose this path when:

  • You already have your own toolbar and buttons
  • You want the smallest possible install
  • You embed a chart in a blog post or CMS (see Market news demo)

Want a ready-made toolbar? Continue to React quickstart.

What is next?​