Angular ChartsHigh-Frequency Data

Efficiently update chart data in real-time scenarios using incremental transactions.

High-frequency data updates occur when charts need to reflect rapidly changing data, such as live financial tickers, IoT sensor readings, or real-time analytics dashboards. The applyTransaction() API provides high-performance incremental updates that are 90%+ faster than full data replacement for small changes.

Apply Transaction API Copy Link

The applyTransaction() method allows efficient incremental updates to chart data without replacing the entire dataset.

The AgChartInstance can be obtained using an Angular @ViewChild decorator to reference our AgCharts tag, which exposes a chart property.

This example demonstrates using applyTransaction() to handle high-frequency updates on a large dataset. The chart starts with 50,000 data points and updates every frame using requestAnimationFrame(), maintaining a scrolling time window by removing old points and adding new ones:

In this example:

• The chart starts with 50,000 data points to demonstrate scalability.
• Updates occur every animation frame (typically 60 FPS) for smooth real-time streaming.
• Each update removes 10 old points from the start and adds 10 new points to the end.
• The transaction combines both operations efficiently: applyTransaction({ remove: [...], add: [...] }).
• Performance metrics (FPS and update count) demonstrate the efficiency of incremental updates.

Transaction Operations Copy Link

Transactions support three types of operations: adding, removing, and updating data items. Multiple operations can be combined in a single transaction.

Adding Data Copy Link

Use the add property to append new data items to the dataset.

// Append new items to the end
chart.applyTransaction({
    add: [
        { time: new Date('2024-01-05'), value: 42 },
        { time: new Date('2024-01-06'), value: 38 },
    ],
});

Use addIndex to control where items are inserted:

// Prepend items to the beginning
chart.applyTransaction({
    add: [{ time: new Date('2024-01-01'), value: 50 }],
    addIndex: 0,
});

// Insert items at a specific position
chart.applyTransaction({
    add: [{ time: new Date('2024-01-03'), value: 45 }],
    addIndex: 2,
});

Removing Data Copy Link

Use the remove property to remove items from the dataset. Items are matched by referential equality, meaning you must provide the exact object reference that exists in the data array.

// Keep a reference to the data items
const data = [
    { time: new Date('2024-01-01'), value: 50 },
    { time: new Date('2024-01-02'), value: 55 },
    { time: new Date('2024-01-03'), value: 45 },
];

// Later, remove specific items by reference
const itemToRemove = data[0];
chart.applyTransaction({
    remove: [itemToRemove],
});

Updating Data Copy Link

Use the update property to modify existing items. First mutate the item in place, then pass the reference in the transaction.

// Keep a reference to the data items
const data = [
    { time: new Date('2024-01-01'), value: 50 },
    { time: new Date('2024-01-02'), value: 55 },
];

// Mutate the item in place
const itemToUpdate = data[1];
itemToUpdate.value = 100;

// Notify the chart of the change
chart.applyTransaction({
    update: [itemToUpdate],
});

Combined Operations Copy Link

Multiple operations can be performed in a single transaction for efficiency:

chart.applyTransaction({
    remove: [oldItems[0], oldItems[1]],
    update: [modifiedItem],
    add: [
        { time: new Date('2024-01-10'), value: 62 },
        { time: new Date('2024-01-11'), value: 58 },
    ],
});

Operations are processed in order: remove, then update, then add.

Performance Considerations Copy Link

The applyTransaction() API is optimized for high-frequency updates:

• Processing Speed: 90%+ faster than full data refresh for small updates
• Update Frequency: Supports 100+ updates per second
• Chart State: Maintains zoom, pan, and selection state
• Animations: Not supported during transactions to maximize performance

For best performance:

• Batch multiple changes into a single transaction when possible
• Maintain references to data items if you need to remove or update them later
• Use applyTransaction() for incremental changes; use update() or updateDelta() for replacing the entire dataset

For full data replacement or configuration changes, see Create/Update.

API Reference Copy Link