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.