React ChartsCreate/Update

Learn about creating and updating charts in more detail.

Creating and Updating Charts

AgChartOptions are supplied to the AG Charts component, and mutations of the options trigger an update of the chart configuration.

See the Options Reference for more detail about the AgChartOptions structure.

The following example demonstrates both create and update cases:

Definition of an options object used to create the initial chart state.
Buttons that invoke mutations of the options and trigger update of the chart state.

Example: Create and Update with AgChartOptions

Delta Options Update

AgChart exposes an updateDelta() static method to allow partial updates to an existing charts configuration:

updateDelta() should not be normally used with the AG Charts component; framework change detection and updates to the chart apply automatically after an options change.

However when using Integrated Charts it may be necessary to use this API to perform chart updates in Grid callbacks.

`updateDelta`

Function

Update an existing AgChartInstance by applying a partial set of option changes.

NOTE: As each call could trigger a chart redraw, each individual delta options update should leave the chart in a valid options state. Also, multiple calls to update options in quick succession could result in undesirable flickering, so callers should batch up and/or debounce changes to avoid unintended partial update renderings.

updateDelta = (
    chart: AgChartInstance,
    deltaOptions: DeepPartial<AgChartOptions>
) => void;

Destroying Charts

Charts are automatically destroyed when the AG Charts component is removed from the DOM.