React ChartsArea Series
react logo

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:

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.

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