JavaScript ChartsHigh-Frequency Update

Version 14.2.0

AG Charts is optimised for high-frequency data updates, maintaining smooth performance with rapid or real-time data updates on large datasets, while maintaining full functionality.

main.ts

import {
  AgCartesianChartOptions,
  AgCartesianSeriesOptions,
  AgCharts,
  AreaSeriesModule,
  BarSeriesModule,
  CandlestickSeriesModule,
  CrosshairModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  OhlcSeriesModule,
  RangeAreaSeriesModule,
  RangeBarSeriesModule,
  TimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { Datum, SeriesType, createSeedData, generateNextDatum } from "./data";

let initialPoints = 1000;
let batchSize = 10;
let currentSeriesType: SeriesType = "line";
let currentUpdateMode: "rolling" | "append" = "rolling";
const seedResult = createSeedData(initialPoints, currentSeriesType);
let data: Datum[] = seedResult.data;
let nextIndex = data.length;
let lastBasePrice: number | undefined = seedResult.lastBasePrice;
function createSeriesConfig(
  seriesType: SeriesType,
): AgCartesianSeriesOptions[] {
  switch (seriesType) {
    case "ohlc":
    case "candlestick":
      return [
        {
          type: seriesType,
          xKey: "timestamp",
          openKey: "open",
          highKey: "high",
          lowKey: "low",
          closeKey: "close",
        },
      ];
    case "stacked-bar":
      return [
        { type: "bar", xKey: "timestamp", yKey: "value", stacked: true },
        { type: "bar", xKey: "timestamp", yKey: "value2", stacked: true },
      ];
    case "stacked-area":
      return [
        {
          type: "area",
          xKey: "timestamp",
          yKey: "value",
          stacked: true,
          marker: { enabled: false },
        },
        {
          type: "area",
          xKey: "timestamp",
          yKey: "value2",
          stacked: true,
          marker: { enabled: false },
        },
      ];
    case "range-area":
      return [
        {
          type: "range-area",
          xKey: "timestamp",
          yLowKey: "low",
          yHighKey: "high",
        },
      ];
    case "range-bar":
      return [
        {
          type: "range-bar",
          xKey: "timestamp",
          yLowKey: "low",
          yHighKey: "high",
        },
      ];
    case "area":
      return [
        {
          type: "area",
          xKey: "timestamp",
          yKey: "value",
          marker: { enabled: false },
          strokeWidth: 1,
        },
      ];
    case "bar":
      return [
        {
          type: "bar",
          xKey: "timestamp",
          yKey: "value",
        },
      ];
    case "line":
    default:
      return [
        {
          type: "line",
          xKey: "timestamp",
          yKey: "value",
          marker: { enabled: false },
          strokeWidth: 1,
        },
      ];
  }
}
let isRunning = false;
let animationFrameId: number | undefined;
function updateBatchSize(value: string) {
  batchSize = parseInt(value, 10);
}
function updateDataSize(value: string) {
  const wasRunning = isRunning;
  if (wasRunning) stopUpdates();
  initialPoints = parseInt(value, 10);
  const seedResult = createSeedData(initialPoints, currentSeriesType);
  data = seedResult.data;
  nextIndex = data.length;
  lastBasePrice = seedResult.lastBasePrice;
  options.data = data;
  chart.update(options);
  if (wasRunning) startUpdates();
}
ModuleRegistry.registerModules([
  AreaSeriesModule,
  BarSeriesModule,
  CandlestickSeriesModule,
  CrosshairModule,
  LineSeriesModule,
  NumberAxisModule,
  OhlcSeriesModule,
  RangeAreaSeriesModule,
  RangeBarSeriesModule,
  TimeAxisModule,
  ZoomModule,
]);

const options: AgCartesianChartOptions = {
  data,
  title: { text: "High-Frequency Data Updates" },
  subtitle: { text: "Rolling Window: removing old points, adding new points" },
  animation: { enabled: false },
  zoom: { enabled: true, onDataChange: { strategy: "preserveRatios" } },
  axes: {
    x: {
      type: "time",
      position: "bottom",
      nice: false,
      label: {
        format: "%H:%M:%S",
      },
    },
  },
  series: createSeriesConfig(currentSeriesType),
  legend: { enabled: false },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function runUpdate() {
  if (!isRunning) return;
  switch (currentUpdateMode) {
    case "rolling":
      performRollingUpdate();
      break;
    case "append":
      performAppendUpdate();
      break;
  }
  animationFrameId = requestAnimationFrame(runUpdate);
}

function performRollingUpdate() {
  const newPoints: Datum[] = [];
  for (let i = 0; i < batchSize; i++) {
    const result = generateNextDatum(
      nextIndex++,
      currentSeriesType,
      lastBasePrice,
    );
    newPoints.push(result.datum);
    lastBasePrice = result.lastBasePrice;
  }
  const pointsToRemove = data.slice(0, batchSize);
  chart.applyTransaction({
    remove: pointsToRemove,
    add: newPoints,
  });
  data.splice(0, batchSize);
  data.push(...newPoints);
}

function performAppendUpdate() {
  const newPoints: Datum[] = [];
  for (let i = 0; i < batchSize; i++) {
    const result = generateNextDatum(
      nextIndex++,
      currentSeriesType,
      lastBasePrice,
    );
    newPoints.push(result.datum);
    lastBasePrice = result.lastBasePrice;
  }
  chart.applyTransaction({
    add: newPoints,
  });
  data.push(...newPoints);
}

function startUpdates() {
  if (isRunning) return;
  isRunning = true;
  updateButton();
  animationFrameId = requestAnimationFrame(runUpdate);
}

function stopUpdates() {
  if (!isRunning) return;
  isRunning = false;
  updateButton();
  if (animationFrameId !== undefined) {
    cancelAnimationFrame(animationFrameId);
    animationFrameId = undefined;
  }
}

function updateButton() {
  const button = document.getElementById("toggleBtn");
  if (button) {
    button.textContent = isRunning ? "Stop Updates" : "Start Updates";
  }
}

function toggleUpdates() {
  if (isRunning) {
    stopUpdates();
  } else {
    startUpdates();
  }
}

function updateSeriesType(value: string) {
  const wasRunning = isRunning;
  if (wasRunning) stopUpdates();
  currentSeriesType = value as SeriesType;
  const seedResult = createSeedData(initialPoints, currentSeriesType);
  data = seedResult.data;
  nextIndex = data.length;
  lastBasePrice = seedResult.lastBasePrice;
  options.data = data;
  options.series = createSeriesConfig(currentSeriesType);

  if (wasRunning) startUpdates();
  chart.update(options);
}

function updateMode(value: string) {
  const wasRunning = isRunning;
  if (wasRunning) stopUpdates();
  currentUpdateMode = value as "rolling" | "append";
  const subtitleText =
    currentUpdateMode === "rolling"
      ? "Rolling Window: removing old points, adding new points"
      : "Append Only: continuously adding new points";
  options.subtitle = { text: subtitleText };
  const seedResult = createSeedData(initialPoints, currentSeriesType);
  data = seedResult.data;
  nextIndex = data.length;
  lastBasePrice = seedResult.lastBasePrice;
  options.data = data;

  if (wasRunning) startUpdates();
  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).toggleUpdates = toggleUpdates;
  (<any>window).updateSeriesType = updateSeriesType;
  (<any>window).updateMode = updateMode;
}

In the above example:

Use the controls to select different series types.
Choose between update modes: Rolling Window (remove old, add new) or Append Only (continuously add).
Updates run at requestAnimationFrame speed for maximum throughput.
The zoom functionality is available during the updates.

Performance may vary based on your specific use case, environment and hardware.

How it works Copy Link

The applyTransaction() API provides efficient incremental updates to chart data. Instead of replacing the entire dataset on each update, transactions specify only the changes: items to add, remove, or update. This dramatically reduces processing overhead for real-time scenarios.

// Rolling window: remove old points, add new ones
chart.applyTransaction({
    remove: oldPoints,
    add: newPoints,
});

For detailed information on transaction operations and best practices, see Transactions.

Financial Charts Copy Link

High-frequency updates also work with Financial Charts.

The following example simulates real-time candlestick trading data:

Starts with 365 days of historical data.
Every 2 seconds, a new candle is created representing a new trading day.
Between new candles, price ticks update the current candle's high, low, and close values at requestAnimationFrame speed.

main.ts

import {
  AgCharts,
  AgFinancialChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { Candle, MS_PER_DAY, PriceSimulator, getHistoricalData } from "./data";
import { random } from "./seededRandom";

const CANDLE_INTERVAL_MS = 2000;
const TICKS_PER_CANDLE = 100;
const INITIAL_POINTS = 365;
const VISIBLE_POINTS = 25;
const data: Candle[] = getHistoricalData(INITIAL_POINTS);
let currentCandle: Candle | undefined;
let simulator: PriceSimulator | undefined;
let candleIntervalId: ReturnType<typeof setInterval> | undefined;
let animationFrameId: number | undefined;
let isRunning = false;
ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgFinancialChartOptions = {
  title: { text: "High-Frequency Update" },
  data,
  volume: true,
  navigator: false,
  rangeButtons: false,
  statusBar: true,
  toolbar: false,
  zoom: true,
  initialState: {
    zoom: {
      ratioX: { start: 1 - VISIBLE_POINTS / data.length, end: 1 },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createFinancialChart(options);

function startNewCandle() {
  const lastCandle = data[data.length - 1];
  const newTimestamp = lastCandle.date + MS_PER_DAY;
  const openPrice = lastCandle.close;
  simulator = new PriceSimulator(openPrice, TICKS_PER_CANDLE);
  currentCandle = {
    date: newTimestamp,
    open: openPrice,
    high: openPrice,
    low: openPrice,
    close: openPrice,
    volume: Math.round(1000000 + random() * 500000),
  };
  data.push(currentCandle);
  chart.applyTransaction({ add: [currentCandle] });
}

function processTick() {
  if (!currentCandle || !simulator) return;
  const newPrice = simulator.tick();
  currentCandle.close = newPrice;
  currentCandle.high = Math.max(currentCandle.high, newPrice);
  currentCandle.low = Math.min(currentCandle.low, newPrice);
  chart.applyTransaction({ update: [currentCandle] });
}

function scheduleNextTick() {
  if (isRunning) {
    animationFrameId = requestAnimationFrame(() => {
      processTick();
      scheduleNextTick();
    });
  }
}

function stopAllUpdates() {
  if (candleIntervalId) {
    clearInterval(candleIntervalId);
    candleIntervalId = undefined;
  }
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId);
    animationFrameId = undefined;
  }
}

function updateButton() {
  const button = document.getElementById("toggleBtn");
  if (button) {
    button.textContent = isRunning ? "Stop" : "Start";
  }
}

function toggleUpdates() {
  if (isRunning) {
    isRunning = false;
    stopAllUpdates();
  } else {
    isRunning = true;
    startNewCandle();
    scheduleNextTick();
    candleIntervalId = setInterval(() => startNewCandle(), CANDLE_INTERVAL_MS);
  }
  updateButton();
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).toggleUpdates = toggleUpdates;
}

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

JavaScript ChartsHigh-Frequency Update

How it works Copy Link

Financial Charts Copy Link