Skip to main content
Skip to main content

Chart with your data

You already have prices somewhere — a REST API, a CSV file, a database. This tutorial shows how to turn that list into a chart like the one below.

Loading chart…
This is what you are aiming for: candles loaded from a simple array of numbers.

What you are building​

A web page with a chart that:

  • Shows historical candles (open, high, low, close for each time period).
  • Can reload when the user picks a different timeframe (for example 1 hour → 1 day).

If you want the chart to fetch market data for you instead, skip to Connect with a Data Connector.

Words worth knowing (30 seconds)​

WordPlain meaning
CandleOne bar on the chart — the price range during one time slice (e.g. one hour).
ContainerA <div> on your page where the chart is drawn.
init()Wakes the chart up. Call it once before loading data.

Step 1 — Install the library​

npm install @efixdata/exeria-chart

Step 2 — Add a box for the chart​

In your HTML or JSX, create an element with a fixed height:

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

The height matters. Without it the chart has nowhere to draw.

Step 3 — Create the chart​

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

const container = document.getElementById("chart-root");
if (!container) {
  throw new Error("Add a #chart-root div to your page first");
}

const chart = createChart({ container });
chart.init();

createChart attaches the engine to your div. init() prepares empty panels so data has a place to go.

Step 4 — Shape your data​

Each candle is one object with six numbers. Think of it as a row in a spreadsheet:

const candles: Candle[] = [
  // stamp = when the bar opens (UTC, milliseconds)
  // o,h,l,c = open, high, low, close
  // v = volume (use 0 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 },
];

The interval tells the chart how long each candle lasts:

const interval: Interval = {
  symbol: "1h",           // label you show in the UI
  milis: 60 * 60 * 1000,  // one hour in milliseconds
};

Step 5 — Load the candles​

await chart.setMainSeriesData(candles, interval);

After this line runs, you should see candles on screen — like the preview at the top of this page.

Loading from your API​

Replace the hard-coded array with a fetch:

const candles: Candle[] = await fetch("/api/candles?symbol=AAPL&interval=1h").then((r) =>
  r.json(),
);

await chart.setMainSeriesData(candles, interval);

Your backend just needs to return the same { stamp, o, h, l, c, v } shape.

Step 6 — When the user changes timeframe​

Fetch a new batch and load it the same way:

async function onIntervalChange(next: Interval) {
  const nextCandles = await fetch(`/api/candles?interval=${next.symbol}`).then((r) => r.json());
  await chart.setMainSeriesData(nextCandles, next);
}

Step 7 — Add new candles as they close​

When a full bar finishes (not every tiny price wiggle), append it:

chart.appendMainSeriesData([latestClosedBar]);

For live wiggles on the current bar, use Live data stream instead.

Clean up​

When the user navigates away:

chart.destroy();

Common gotchas​

ProblemFix
Blank white boxGive the container a CSS height.
Nothing after createChartCall init() before setMainSeriesData.
Bars look misalignedUse UTC millisecond timestamps at bar open time.

What is next?​