React ChartsArea Series

An Area Series is used to visualise continuous data, and is primarily used to compare multiple datasets over time.

Simple Area Copy Link

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 Copy Link

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 Copy Link

Setting stacked: true will enable the series stacking behaviour.

{
    series: [
        { type: 'area', xKey: 'month', yKey: 'subscriptions', stacked: true, yName: 'Subscriptions' },
        { type: 'area', xKey: 'month', yKey: 'services', stacked: true, yName: 'Services' },
        { type: 'area', xKey: 'month', yKey: 'products', stacked: true, yName: 'Products' },
    ],
}

Normalized Area Series Copy Link

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', stacked: true, normalizedTo: 1000, yName: 'Subscriptions' },
        { type: 'area', xKey: 'month', yKey: 'services', stacked: true, normalizedTo: 1000, yName: 'Services' },
        { type: 'area', xKey: 'month', yKey: 'products', stacked: true, normalizedTo: 1000, yName: 'Products' },
    ],
}

Customisation Copy Link

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 and fill colour.
A custom lineDash is provided for the Subscriptions series.
Markers are enabled for the Services series.
Labels are enabled for the Products series.

Interpolation Copy Link

A straight line is used to connect points by default in the Area Series. Use the interpolation option to change the line style.

{
    series: [
        {
            // ...
            interpolation: {
                type: 'smooth',
            },
        },
    ],
}

Please see the API Reference for a list of all available interpolation options.

Missing Data Copy Link

Data points with a yKey value of positive or negative Infinity, null, undefined or NaN will be rendered as gaps. Set connectMissingData: true to draw a connection between points either side of a missing point.
Data points with invalid xKey values will be ignored.

Getting started

Core features

Specialised Charts

Series

Gauges