Loading data

Loading data means: take a list of candles from somewhere and paint them on the chart. This is usually the first thing you do after createChart() and init().

Loading chart…

Result of setMainSeriesData — a full history slice on screen.

The main method

await chart.setMainSeriesData(candles, interval);

This one call:

1. Replaces the current candles with your new array.
2. Updates the timeframe label when you pass an interval.
3. Redraws the chart (and recalculates indicators if any are active).

Step-by-step: your own API

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

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

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

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

await chart.setMainSeriesData(candles, interval);

Your API must return objects with stamp, o, h, l, c, and optionally v. Shape details: Data model.

When the user changes timeframe

Fetch a new batch and call the same method again:

async function loadInterval(nextInterval: Interval) {
  const nextCandles = await fetchCandles(nextInterval.symbol);
  await chart.setMainSeriesData(nextCandles, nextInterval);
}

The chart emits an INTERVAL_CHANGE event after the load completes — useful if your UI needs to sync a dropdown.

Scroll to the latest bar on load

Pass true as the third argument to land on the right edge after data arrives:

await chart.setMainSeriesData(candles, interval, true);

Handy for live dashboards where users expect to see the most recent price first.

Loading older history (scroll back)

There is no public “prepend only” method today. Merge on your side, then load the full slice you want visible:

const older = await fetchOlderCandles();
const recent = await fetchRecentCandles();

await chart.setMainSeriesData([...older, ...recent], interval);

Fetch more when the user scrolls left in your app, merge arrays, call setMainSeriesData again.

Loading with a Data Connector

When you use a Data Connector, the connector fetches candles for you:

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

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

await chart.loadData("BTCUSDT", {
  interval: "1h",
  limit: 1000,
});

loadData() calls the connector, converts the response to candles, and applies your interval.

Options for loadData

Field	Required?	What it does
interval	Yes	Candle size — "1h", "1d", "1w", …
from	No	Start of date range
to	No	End of date range
limit	No	Max candles (Binance caps at 1,000 per call)

Omit from / to to get the most recent bars up to limit.

Your API vs connector — which to pick?

Situation	Use
Your company's prices	setMainSeriesData + your fetch
Public crypto from Binance	loadData + Binance connector
Public crypto from Bybit	loadData + Bybit connector
Public crypto from OKX	loadData + OKX connector
Public crypto USD spot from Kraken	loadData + Kraken connector
Public crypto USDT spot from KuCoin	loadData + KuCoin connector
Broad crypto catalog	loadData + CoinGecko connector
Prototype / vibe coding	Binance, Bybit, OKX, Kraken, KuCoin, or CoinGecko live demo

What is next?

• Realtime updates — after history loads, keep the last bar moving
• Chart with your data — beginner tutorial
• Data Connectors API — build your own connector