React ChartsArea Series

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

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: {
            style: 'smooth'
        },
    },
],

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

Missing Data

• 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.

API Reference