Vue 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 the Vue $refs component property to reference 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.

Identifying Items by Key Copy Link

Set dataIdKey to a property name on your data items to identify them by that field instead of by object reference. When dataIdKey is set:

• Remove operations only need the ID field on each item.
• Update operations match by ID and replace the existing datum with the new object.
• Add operations work the same as without dataIdKey.

• Add 3 Items: Appends 3 new items to the dataset.
• Remove Last by ID: Removes the last item using only its id field.
• Update First by ID: Creates a new object with the same id to replace the first item.

Setting dataIdKey Copy Link

const options = {
    dataIdKey: 'id',
    data: [
        { id: 'item-1', category: 'Category A', value: 42 },
        { id: 'item-2', category: 'Category B', value: 58 },
    ],
    // ...
};

The values of the dataIdKey field must be unique strings or numbers across the dataset.

Removing by ID Copy Link

When dataIdKey is set, remove items by passing objects containing only the ID field:

chart.applyTransaction({
    remove: [{ id: 'item-1' }],
});

Updating by ID Copy Link

Pass a new object with the matching ID. The existing datum is fully replaced:

chart.applyTransaction({
    update: [{ id: 'item-2', category: 'Category B', value: 99 }],
});

Unlike reference-based updates where you mutate the original object, ID-based updates use replacement semantics — the chart stores the new object in place of the old one.

API Reference Copy Link