Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

JavaScript Charts: Create/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
Function
Create a new AgChartInstance based upon the given configuration options. 
create = (
    options: AgChartOptions
) => AgChartInstance;
update
Function
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. 
update = (
    chart: AgChartInstance,
    options: AgChartOptions
) => void;

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.
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;
To assist with state management, the complete applied options state can be retrieved by calling getOptions() on the AgChartInstance:
getOptions
Function
Get the AgChartOptions representing the current chart configuration. 
getOptions = () => AgChartOptions;

The following example demonstrates:

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

Destroying Charts

Charts can be destroyed by using the AgChartInstance.destroy() method:
destroy
Function
Destroy the chart instance and any allocated resources to support its rendering. 
destroy = () => void;