React ChartsTransactions

Efficiently update chart data using incremental transactions without replacing the entire dataset. Use Transaction Updates for fast changes to large datasets.

Apply Transaction API Copy Link

The applyTransaction() method allows incrementally updating the chart data without replacing the entire dataset. It returns a Promise that resolves once the transaction has been applied and rendered.

The AgChartInstance can be obtained using a React Ref to our <AgCharts /> tag, which exposes a chart property.

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.

• Add 5 Items: Appends 5 new items to the end of the dataset.
• Add at Index 2: Inserts a new item at position 2 using addIndex.
• Remove Last: Removes the last item from the dataset.
• Update First 5: Modifies the values of the first 5 items.

Adding Data Copy Link

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

// Add new items to the end
chart.applyTransaction({
    add: [
        { category: 'Item 1', value: 42 },
        { category: 'Item 2', value: 38 },
    ],
});

Use addIndex to control where items are inserted:

// Add item to the beginning
chart.applyTransaction({
    add: [{ category: 'Item 0', value: 50 }],
    addIndex: 0,
});

// Add item at a specific position
chart.applyTransaction({
    add: [{ category: 'Item 3', 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 = [
    { category: 'Item 1', value: 50 },
    { category: 'Item 2', value: 55 },
    { category: 'Item 3', 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 = [
    { category: 'Item 1', value: 50 },
    { category: 'Item 2', 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: [
        { category: 'Item 10', value: 62 },
        { category: 'Item 11', value: 58 },
    ],
});

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

API Reference Copy Link