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:
xKey
defines the categories, and is mapped to the Category Axis.yKey
provides the numerical values for each dataset, corresponding to the Number Axis.yName
configures 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
stroke
andfill
colour. - A custom
lineDash
is 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
yKey
value of positive or negativeInfinity
,null
,undefined
orNaN
will be rendered as gaps. SetconnectMissingData: true
to draw a connection between points either side of a missing point. - Data points with invalid
xKey
values 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.