JavaScript ChartsHigh-Frequency Update

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

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.

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.