React 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.

index.tsx

import React, { useState, useRef, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgCartesianSeriesOptions,
  AgChartsInstance,
  AreaSeriesModule,
  BarSeriesModule,
  CandlestickSeriesModule,
  CrosshairModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  OhlcSeriesModule,
  RangeAreaSeriesModule,
  RangeBarSeriesModule,
  TimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { Datum, SeriesType, createSeedData, generateNextDatum } from "./data";
import clone from "clone";

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;
  chartRef.current!.update(options);
  if (wasRunning) startUpdates();
}
ModuleRegistry.registerModules([
  AreaSeriesModule,
  BarSeriesModule,
  CandlestickSeriesModule,
  CrosshairModule,
  LineSeriesModule,
  NumberAxisModule,
  OhlcSeriesModule,
  RangeAreaSeriesModule,
  RangeBarSeriesModule,
  TimeAxisModule,
  ZoomModule,
]);

const ChartExample = () => {
  const chartRef = useRef<AgChartsInstance>(null);
  const [options, setOptions] = useState<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 },
  });

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

  const 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);
    chartRef.current!.applyTransaction({
      remove: pointsToRemove,
      add: newPoints,
    });
    data.splice(0, batchSize);
    data.push(...newPoints);
  };

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

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

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

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

  const toggleUpdates = () => {
    if (isRunning) {
      stopUpdates();
    } else {
      startUpdates();
    }
  };

  const updateSeriesType = (value: string) => {
    const nextOptions = clone(options);

    const wasRunning = isRunning;
    if (wasRunning) stopUpdates();
    currentSeriesType = value as SeriesType;
    const seedResult = createSeedData(initialPoints, currentSeriesType);
    data = seedResult.data;
    nextIndex = data.length;
    lastBasePrice = seedResult.lastBasePrice;
    nextOptions.data = data;
    nextOptions.series = createSeriesConfig(currentSeriesType);

    if (wasRunning) startUpdates();

    setOptions(nextOptions);
  };

  const updateMode = (value: string) => {
    const nextOptions = clone(options);

    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";
    nextOptions.subtitle = { text: subtitleText };
    const seedResult = createSeedData(initialPoints, currentSeriesType);
    data = seedResult.data;
    nextIndex = data.length;
    lastBasePrice = seedResult.lastBasePrice;
    nextOptions.data = data;

    if (wasRunning) startUpdates();

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button id="toggleBtn" onClick={toggleUpdates}>
            Start Updates
          </button>
          <select
            id="seriesTypeSelect"
            onChange={(event) => updateSeriesType(event.target.value)}
          >
            <option value="line">Line</option>
            <option value="area">Area</option>
            <option value="bar">Bar</option>
            <option value="stacked-bar">Stacked Bar</option>
            <option value="stacked-area">Stacked Area</option>
            <option value="range-area">Range Area</option>
            <option value="range-bar">Range Bar</option>
            <option value="candlestick">Candlestick</option>
            <option value="ohlc">OHLC</option>
          </select>
          <select
            id="updateModeSelect"
            onChange={(event) => updateMode(event.target.value)}
          >
            <option value="rolling">Rolling Window</option>
            <option value="append">Append Only</option>
          </select>
        </div>
      </div>
      <AgCharts ref={chartRef} options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

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.

index.tsx

import React, { useState, useRef, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgFinancialCharts } from "ag-charts-react";
import {
  AgChartsInstance,
  AgFinancialChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { Candle, MS_PER_DAY, PriceSimulator, getHistoricalData } from "./data";
import { random } from "./seededRandom";
import clone from "clone";

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 ChartExample = () => {
  const chartRef = useRef<AgChartsInstance>(null);
  const [options, setOptions] = useState<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 },
      },
    },
  });

  const 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);
    chartRef.current!.applyTransaction({ add: [currentCandle] });
  };

  const 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);
    chartRef.current!.applyTransaction({ update: [currentCandle] });
  };

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

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

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

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

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button id="toggleBtn" onClick={toggleUpdates}>
            Start
          </button>
        </div>
      </div>
      <AgFinancialCharts ref={chartRef} options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

React ChartsHigh-Frequency Update

How it works Copy Link

Financial Charts Copy Link