JavaScript ChartsCreate/Update

Learn about creating and updating charts in more detail.

Creating and Updating Charts

AgChart exposes create() and update() static methods to perform chart initialisation and update based upon the AgChartOptions configuration structure.

Mutations to the previously used options object are not automatically picked up by the chart implementation, AgChart.update() should be called for changes to be applied.

NOTE: We expect the options supplied to AgChart.update() to be the full configuration state to update to, not a partial configuration. Use AgChart.updateDelta() to apply partial updates.

AgChart has the following API:

create TypeFunction	Create a new `AgChartInstance` based upon the given configuration options.
update TypeFunction	Update an existing `AgChartInstance`. Options provided should be complete and not partial. NOTE: As each call could trigger a chart redraw, 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.

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.

Delta Options Update

AgChart exposes an updateDelta() static method to allow partial updates to a charts options.

TypeFunction

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.

To assist with state management, the complete applied options state can be retrieved by calling getOptions() on AgChartInstance:

TypeFunction

Get the AgChartOptions representing the current chart configuration.

The following example demonstrates:

Retrieving current Chart configuration via getOptions().
Mutation of the Chart configuration via updateDelta().

TypeFunction

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.

Destroying Charts

Charts can be destroyed by using the AgChartInstance.destroy() method:

TypeFunction

Destroy the chart instance and any allocated resources to support its rendering.