Getting started

Quick start

Draw your first candlestick chart, stream live updates, and clean up.

Add a container

The chart fills its container, so give the container an explicit size.

index.html

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

Create a chart and add a series

createChart is asynchronous because it may acquire a WebGPU device. With autoSize, the chart follows the container's size.

chart.ts

import { createChart } from "@aeristerminal/aeris-charts";
import "@aeristerminal/aeris-charts/design.css";

const container = document.querySelector<HTMLElement>("#chart");
if (!container) throw new Error("missing chart container");

const chart = await createChart(container, { autoSize: true });
const candles = chart.addSeries("candlestick");

candles.setData([
  { time: 1735689600, open: 100, high: 108, low: 98, close: 105 },
  { time: 1735776000, open: 105, high: 112, low: 103, close: 110 },
  { time: 1735862400, open: 110, high: 111, low: 101, close: 104 },
]);

chart.timeScale().fitContent();

Stream live updates

update appends a new bar or replaces the last one when the time matches, which is how you feed a forming bar from a live feed.

Live updates

socket.addEventListener("message", (event) => {
  const bar = JSON.parse(event.data);
  candles.update({
    time: bar.time, // whole UTC seconds
    open: bar.open,
    high: bar.high,
    low: bar.low,
    close: bar.close,
  });
});

Add an indicator

Indicators

chart.add_ema(candles, 20);
chart.add_rsi(candles, 14); // opens its own oscillator pane

Clean up

Call remove() when the chart leaves the page. It releases the engine, canvases, and listeners, and is safe to call twice. Calls on a removed chart throw an AerisChartsError with code disposed.

Cleanup

chart.remove();

camelCase and snake_case

The common methods have camelCase aliases: addSeries, removeSeries, addPane, addAxis, applyOptions, timeScale, priceScale, takeScreenshot, exportState, and on series setData, applyOptions, moveToPane, and priceScale. Every method is also available under its original snake_case name, such as add_series and set_data, on the same handle. Option and data field names keep their documented spelling.