An Area Series is used to visualise continuous data, and is primarily used to compare multiple datasets over time.
Simple Area
To create an Area series use the 'area' series type.
series: [
{ type: 'area', xKey: 'month', yKey: 'subscriptions', yName: 'Subscriptions' },
{ type: 'area', xKey: 'month', yKey: 'services', yName: 'Services' },
{ type: 'area', xKey: 'month', yKey: 'products', yName: 'Products' },
],
In this configuration:
xKeydefines the categories, and is mapped to the Category Axis.yKeyprovides the numerical values for each dataset, corresponding to the Number Axis.yNameconfigures display names, reflected in Tooltip Titles and Legend Items.
Multiple Area Series
If multiple Area Series are provided, the series will be overlaid in the provided order, as seen in the above example. The default fillOpacity of an Area Series is 0.8, to allow all series to be visible.
Stacked Area Series
Setting stacked: true will enable the series stacking behaviour.
series: [
{ type: 'area', xKey: 'month', yKey: 'subscriptions', yName: 'Subscriptions', stacked: true },
{ type: 'area', xKey: 'month', yKey: 'services', yName: 'Services', stacked: true },
{ type: 'area', xKey: 'month', yKey: 'products', yName: 'Products', stacked: true },
],
Normalized Area Series
To normalize the totals of all Area Series in the chart, so that for any given category the stack will always sum to a certain value, use the normalizedTo option. It is possible to normalize to any non-zero value.
series: [
{ type: 'area', xKey: 'month', yKey: 'subscriptions', yName: 'Subscriptions', stacked: true, normalizedTo: 1000 },
{ type: 'area', xKey: 'month', yKey: 'services', yName: 'Services', stacked: true, normalizedTo: 1000 },
{ type: 'area', xKey: 'month', yKey: 'products', yName: 'Products', stacked: true, normalizedTo: 1000 },
],
Customisation
It is possible to customise the appearance of the line, fill, labels and markers for each series.
In this example
- All series have a custom
strokeandfillcolour. - A custom
lineDashis provided for the Subscriptions series. - Markers are enabled for the Services series.
- Labels are enabled for the Products series.
Missing Data
- Data points with a
yKeyvalue of positive or negativeInfinity,null,undefinedorNaNwill be rendered as gaps. SetconnectMissingData: trueto draw a connection between points either side of a missing point. - Data points with invalid
xKeyvalues will be ignored.
API Reference
Properties available on the AgAreaSeriesOptions interface.
The number to normalise the area stacks to. For example, if normalizedTo is set to 100, the stacks will all be scaled proportionally so that their total height is always 100.
Primary identifier for the series. This is provided as seriesId in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique id value.
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
Configuration for marker and series highlighting when a series or legend item is hovered over.
A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.