Angular 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

Options are supplied to the AG Charts component, and mutations of the options trigger an update of the chart 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.

// Loading...