JavaScript Charts: Options Reference

The AgChartOptions interface is the gateway to creating charts.

To initialise a chart, an instance of the AgChartOptions is passed to the AgChart.create() factory method. Once the chart is initialised, it can be modified using the AgChart.update() method.

Options by Chart Type

An instance of AgChartOptions is an essential configuration object required to create a chart with the desired data and attributes.

Properties, formatters and event handlers are all available through the AgChartOptions interface. Specifying these on the options object will enable fine grained control of charts including registering event listeners and applying styles to individual data points.

The AgChartOptions interface is displayed below in an expandable JSON graph, which can be navigated to explore the object structure.

Click through the tabs to see the three main variations of AgChartOptions depending on the chart/series type to be rendered.

options: {
type?: 'cartesian' | 'groupedCategory' | 'line' | 'bar' | 'column' | 'area' | 'scatter' | 'histogram'; 
data: any[]; 
container?: HTMLElement | null; 
axes?: AgCartesianAxisOptions[] [ ... ]; 
series?: AgCartesianSeriesOptions[] [ ... ]; 
width?: number; 
height?: number; 
autoSize?: boolean; 
padding?: AgChartPaddingOptions { ... }; 
background?: AgChartBackground { ... }; 
title?: AgChartCaptionOptions { ... }; 
subtitle?: AgChartCaptionOptions { ... }; 
tooltip?: AgChartTooltipOptions { ... }; 
legend?: AgChartLegendOptions { ... }; 
listeners?: AgBaseChartListeners { ... }; 
navigator?: AgNavigatorOptions { ... }; 
theme?: string | AgChartTheme; 
}

Creating and Updating Charts Using Options

AgChart exposes create() and update() static methods to perform chart initialisation and update respectively. 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 to update to, not a partial configuration. If properties or nested objects are missing compared with an earlier create()/update() call, features may be disabled or defaults assumed as the target configuration.

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