React ChartsHigh-Frequency Update

Version 14.2.0

Enterprise

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 />);

data.tsx

const DATA_INTERVAL_MS = 250;
const START_TIMESTAMP = Date.UTC(2024, 0, 1, 0, 0, 0);

export type SeriesType =
  | "line"
  | "area"
  | "bar"
  | "stacked-bar"
  | "stacked-area"
  | "range-area"
  | "range-bar"
  | "candlestick"
  | "ohlc";

export type ValueDatum = {
  timestamp: number;
  value: number;
  value2?: number;
};

export type OhlcDatum = {
  timestamp: number;
  open: number;
  high: number;
  low: number;
  close: number;
};

export type RangeDatum = {
  timestamp: number;
  low: number;
  high: number;
};

export type Datum = ValueDatum | OhlcDatum | RangeDatum;

function generateValueDatum(
  index: number,
  includeValue2: boolean = false,
): ValueDatum {
  const timestamp = START_TIMESTAMP + index * DATA_INTERVAL_MS;
  const trend = Math.sin(index / 240) * 40 + Math.cos(index / 80) * 25;
  const volatility = Math.sin(index / 15) * 5;
  const baseline = 1000 + index * 0.02;
  const datum: ValueDatum = {
    timestamp,
    value: Number((baseline + trend + volatility).toFixed(2)),
  };
  if (includeValue2) {
    const trend2 = Math.cos(index / 200) * 30 + Math.sin(index / 60) * 20;
    datum.value2 = Number((baseline + trend2 + volatility * 0.8).toFixed(2));
  }
  return datum;
}

function generateOhlcDatum(
  index: number,
  previousClose?: number,
): { datum: OhlcDatum; basePrice: number } {
  const timestamp = START_TIMESTAMP + index * DATA_INTERVAL_MS;

  const trend = Math.sin(index / 240) * 40 + Math.cos(index / 80) * 25;
  const volatility = Math.sin(index / 15) * 5;
  const baseline = 1000 + index * 0.02;
  const midPrice = baseline + trend + volatility;

  const open = previousClose ?? midPrice;
  const closeOffset = Math.sin(index / 7) * 2 + Math.cos(index / 11) * 1.5;
  const close = Number((midPrice + closeOffset).toFixed(2));

  const range = 2 + Math.abs(Math.sin(index / 13)) * 3;
  const high = Number((Math.max(open, close) + range).toFixed(2));
  const low = Number((Math.min(open, close) - range).toFixed(2));

  return {
    datum: {
      timestamp,
      open: Number(open.toFixed(2)),
      high,
      low,
      close,
    },
    basePrice: close,
  };
}

function generateRangeDatum(index: number): RangeDatum {
  const timestamp = START_TIMESTAMP + index * DATA_INTERVAL_MS;
  const trend = Math.sin(index / 240) * 40 + Math.cos(index / 80) * 25;
  const volatility = Math.sin(index / 15) * 5;
  const baseline = 1000 + index * 0.02;
  const midValue = baseline + trend + volatility;
  const range = 10 + Math.abs(Math.sin(index / 30)) * 20;
  return {
    timestamp,
    low: Number((midValue - range / 2).toFixed(2)),
    high: Number((midValue + range / 2).toFixed(2)),
  };
}

export function createSeedData(
  count: number,
  seriesType: SeriesType,
): { data: Datum[]; lastBasePrice?: number } {
  const result: Datum[] = [];
  let basePrice: number | undefined = undefined;
  const isStacked =
    seriesType === "stacked-bar" || seriesType === "stacked-area";
  const isRange = seriesType === "range-area" || seriesType === "range-bar";

  for (let i = 0; i < count; i++) {
    if (seriesType === "ohlc" || seriesType === "candlestick") {
      const { datum, basePrice: newBasePrice } = generateOhlcDatum(
        i,
        basePrice,
      );
      result.push(datum);
      basePrice = newBasePrice;
    } else if (isRange) {
      result.push(generateRangeDatum(i));
    } else {
      result.push(generateValueDatum(i, isStacked));
    }
  }
  return { data: result, lastBasePrice: basePrice };
}

export function generateNextDatum(
  index: number,
  seriesType: SeriesType,
  previousClose?: number,
): { datum: Datum; lastBasePrice?: number } {
  const isStacked =
    seriesType === "stacked-bar" || seriesType === "stacked-area";
  const isRange = seriesType === "range-area" || seriesType === "range-bar";

  if (seriesType === "ohlc" || seriesType === "candlestick") {
    const { datum, basePrice } = generateOhlcDatum(index, previousClose);
    return { datum, lastBasePrice: basePrice };
  } else if (isRange) {
    return { datum: generateRangeDatum(index), lastBasePrice: undefined };
  } else {
    return {
      datum: generateValueDatum(index, isStacked),
      lastBasePrice: undefined,
    };
  }
}

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 />);

data.tsx

import { random } from "./seededRandom";

const STARTING_PRICE = 185;
const DAILY_VOLATILITY = 0.015;
const DAILY_DRIFT = 0.0001;
export const MS_PER_DAY = 24 * 60 * 60 * 1000;

function randomNormal() {
  const u1 = random();
  const u2 = random();
  return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
}

export interface Candle {
  date: number;
  open: number;
  high: number;
  low: number;
  close: number;
  volume: number;
}

function generateCandle(prevClose: number, date: number): Candle {
  const open = prevClose * (1 + (random() - 0.5) * 0.002);
  let price = open;
  let high = open;
  let low = open;

  const tickCount = 100;
  const tickVol = DAILY_VOLATILITY / Math.sqrt(tickCount);
  const tickDrift = DAILY_DRIFT / tickCount;

  for (let i = 0; i < tickCount; i++) {
    const change = price * (tickDrift + tickVol * randomNormal());
    price = Math.max(price + change, 1);
    high = Math.max(high, price);
    low = Math.min(low, price);
  }

  return {
    date,
    open: Number(open.toFixed(2)),
    high: Number(high.toFixed(2)),
    low: Number(low.toFixed(2)),
    close: Number(price.toFixed(2)),
    volume: Math.round(1000000 + random() * 500000),
  };
}

export function getHistoricalData(days: number): Candle[] {
  const data: Candle[] = [];
  const startTimestamp = Date.UTC(2024, 0, 1);

  let prevClose = STARTING_PRICE;

  for (let i = 0; i < days; i++) {
    const date = startTimestamp + i * MS_PER_DAY;
    const candle = generateCandle(prevClose, date);
    data.push(candle);
    prevClose = candle.close;
  }

  return data;
}

export class PriceSimulator {
  private price: number;
  private readonly tickVolatility: number;
  private readonly tickDrift: number;

  constructor(startPrice: number, ticksPerCandle: number) {
    this.price = startPrice;
    this.tickVolatility = DAILY_VOLATILITY / Math.sqrt(ticksPerCandle);
    this.tickDrift = DAILY_DRIFT / ticksPerCandle;
  }

  tick(): number {
    const change =
      this.price * (this.tickDrift + this.tickVolatility * randomNormal());
    this.price = Math.max(this.price + change, 1);
    return Number(this.price.toFixed(2));
  }
}

seededRandom.tsx

export function createSeededRandom(seed = 42): () => number {
  let state = seed;
  return () => {
    state = (state * 16807) % 2147483647;
    return (state - 1) / 2147483646;
  };
}

export const random = createSeededRandom();

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

React ChartsHigh-Frequency Update

How it works Copy Link

Financial Charts Copy Link