React ChartsArea Series

Version 14.2.0

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

Simple Area Copy Link

index.tsx

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Sales by Month",
    },
    data: getData(),
    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",
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

data.tsx

export function getData() {
  return [
    { month: "Jan", subscriptions: 222, services: 250, products: 200 },
    { month: "Feb", subscriptions: 240, services: 255, products: 210 },
    { month: "Mar", subscriptions: 280, services: 245, products: 195 },
    { month: "Apr", subscriptions: 300, services: 260, products: 205 },
    { month: "May", subscriptions: 350, services: 235, products: 215 },
    { month: "Jun", subscriptions: 420, services: 270, products: 200 },
    { month: "Jul", subscriptions: 300, services: 255, products: 225 },
    { month: "Aug", subscriptions: 270, services: 305, products: 210 },
    { month: "Sep", subscriptions: 260, services: 280, products: 250 },
    { month: "Oct", subscriptions: 385, services: 250, products: 205 },
    { month: "Nov", subscriptions: 320, services: 265, products: 215 },
    { month: "Dec", subscriptions: 330, services: 255, products: 220 },
  ];
}

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.

index.tsx

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Sales by Month",
    },
    data: getData(),
    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",
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

data.tsx

export function getData() {
  return [
    { month: "Jan", subscriptions: 222, services: 250, products: 200 },
    { month: "Feb", subscriptions: 240, services: 255, products: 210 },
    { month: "Mar", subscriptions: 280, services: 245, products: 195 },
    { month: "Apr", subscriptions: 300, services: 260, products: 205 },
    { month: "May", subscriptions: 350, services: 235, products: 215 },
    { month: "Jun", subscriptions: 420, services: 270, products: 200 },
    { month: "Jul", subscriptions: 300, services: 255, products: 225 },
    { month: "Aug", subscriptions: 270, services: 305, products: 210 },
    { month: "Sep", subscriptions: 260, services: 280, products: 250 },
    { month: "Oct", subscriptions: 385, services: 250, products: 205 },
    { month: "Nov", subscriptions: 320, services: 265, products: 215 },
    { month: "Dec", subscriptions: 330, services: 255, products: 220 },
  ];
}

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

index.tsx

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Sales by Month",
    },
    data: getData(),
    series: [
      {
        type: "area",
        xKey: "month",
        yKey: "subscriptions",
        stacked: true,
        normalizedTo: 1000,
        yName: "Subscriptions",
      },
      {
        type: "area",
        xKey: "month",
        yKey: "services",
        yName: "Services",
        stacked: true,
        normalizedTo: 1000,
      },
      {
        type: "area",
        xKey: "month",
        yKey: "products",
        yName: "Products",
        stacked: true,
        normalizedTo: 1000,
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

data.tsx

export function getData() {
  return [
    { month: "Jan", subscriptions: 222, services: 250, products: 200 },
    { month: "Feb", subscriptions: 240, services: 255, products: 210 },
    { month: "Mar", subscriptions: 280, services: 245, products: 195 },
    { month: "Apr", subscriptions: 300, services: 260, products: 205 },
    { month: "May", subscriptions: 350, services: 235, products: 215 },
    { month: "Jun", subscriptions: 420, services: 270, products: 200 },
    { month: "Jul", subscriptions: 300, services: 255, products: 225 },
    { month: "Aug", subscriptions: 270, services: 305, products: 210 },
    { month: "Sep", subscriptions: 260, services: 280, products: 250 },
    { month: "Oct", subscriptions: 385, services: 250, products: 205 },
    { month: "Nov", subscriptions: 320, services: 265, products: 215 },
    { month: "Dec", subscriptions: 330, services: 255, products: 220 },
  ];
}

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

index.tsx

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Sales by Month",
    },
    data: getData(),
    series: [
      {
        type: "area",
        xKey: "month",
        yKey: "subscriptions",
        yName: "Subscriptions",
        stroke: "blue",
        strokeWidth: 3,
        lineDash: [3, 4],
        fill: "lightBlue",
      },
      {
        type: "area",
        xKey: "month",
        yKey: "services",
        yName: "Services",
        stroke: "red",
        strokeWidth: 3,
        fill: "pink",
        marker: {
          enabled: true,
          fill: "red",
        },
      },
      {
        type: "area",
        xKey: "month",
        yKey: "products",
        yName: "Products",
        stroke: "green",
        strokeWidth: 3,
        fill: "lightGreen",
        label: {
          enabled: true,
          fontWeight: "bold",
          formatter: ({ value }) => value.toFixed(0),
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

data.tsx

export function getData() {
  return [
    { month: "Jan", subscriptions: 222, services: 250, products: 200 },
    { month: "Feb", subscriptions: 240, services: 255, products: 210 },
    { month: "Mar", subscriptions: 280, services: 245, products: 195 },
    { month: "Apr", subscriptions: 300, services: 260, products: 205 },
    { month: "May", subscriptions: 350, services: 235, products: 215 },
    { month: "Jun", subscriptions: 420, services: 270, products: 200 },
    { month: "Jul", subscriptions: 300, services: 255, products: 225 },
    { month: "Aug", subscriptions: 270, services: 305, products: 210 },
    { month: "Sep", subscriptions: 260, services: 280, products: 250 },
    { month: "Oct", subscriptions: 385, services: 250, products: 205 },
    { month: "Nov", subscriptions: 320, services: 265, products: 215 },
    { month: "Dec", subscriptions: 330, services: 255, products: 220 },
  ];
}

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.

index.tsx

import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgLineSeriesOptions,
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";

let interpolationType: "linear" | "smooth" | "step" = "smooth";
let stepPosition: "start" | "middle" | "end" = "end";
ModuleRegistry.registerModules([
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    title: {
      text: "2023 Average Temperatures",
    },
    subtitle: {
      text: "Oxford, UK",
    },
    data: getData(),
    series: [
      {
        type: "area",
        xKey: "month",
        yKey: "subscriptions",
        yName: "Subscriptions",
        stacked: true,
        interpolation: { type: "smooth" },
      },
      {
        type: "area",
        xKey: "month",
        yKey: "services",
        yName: "Services",
        stacked: true,
        interpolation: { type: "smooth" },
      },
      {
        type: "area",
        xKey: "month",
        yKey: "products",
        yName: "Products",
        stacked: true,
        interpolation: { type: "smooth" },
      },
    ],
  });

  const typeChange = (event: Event) => {
    const nextOptions = clone(options);

    interpolationType = (event.target as HTMLInputElement).value as
      | "linear"
      | "smooth"
      | "step";
    const stepPositionGroup = document.getElementById(
      "stepPositionGroup",
    ) as HTMLFieldSetElement;
    stepPositionGroup.disabled = interpolationType !== "step";
    nextOptions.series?.forEach((series) => {
      (series as AgLineSeriesOptions).interpolation =
        interpolationType === "step"
          ? { type: "step", position: stepPosition }
          : { type: interpolationType };
    });

    setOptions(nextOptions);
  };

  const positionChange = (event: Event) => {
    const nextOptions = clone(options);

    stepPosition = (event.target as HTMLInputElement).value as
      | "start"
      | "middle"
      | "end";
    nextOptions.series?.forEach((series) => {
      (series as AgLineSeriesOptions).interpolation = {
        type: "step",
        position: stepPosition,
      };
    });

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <span>Interpolation:</span>
          <div
            className="button-group gap-right"
            role="group"
            aria-label="Interpolation"
          >
            <input
              type="radio"
              id="type-linear"
              name="interpolation-type"
              defaultValue="linear"
              onChange={(event) => typeChange(event)}
            />
            <label htmlFor="type-linear">Linear</label>
            <input
              type="radio"
              id="type-smooth"
              name="interpolation-type"
              defaultValue="smooth"
              defaultChecked
              onChange={(event) => typeChange(event)}
            />
            <label htmlFor="type-smooth">Smooth</label>
            <input
              type="radio"
              id="type-step"
              name="interpolation-type"
              defaultValue="step"
              onChange={(event) => typeChange(event)}
            />
            <label htmlFor="type-step">Step</label>
          </div>
          <fieldset
            id="stepPositionGroup"
            className="control-group"
            disabled={true}
          >
            <span>Step Position:</span>
            <div
              className="button-group"
              role="group"
              aria-label="Step Position"
            >
              <input
                type="radio"
                id="position-start"
                name="step-position"
                defaultValue="start"
                onChange={(event) => positionChange(event)}
              />
              <label htmlFor="position-start">Start</label>
              <input
                type="radio"
                id="position-middle"
                name="step-position"
                defaultValue="middle"
                onChange={(event) => positionChange(event)}
              />
              <label htmlFor="position-middle">Middle</label>
              <input
                type="radio"
                id="position-end"
                name="step-position"
                defaultValue="end"
                defaultChecked
                onChange={(event) => positionChange(event)}
              />
              <label htmlFor="position-end">End</label>
            </div>
          </fieldset>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

data.tsx

export function getData() {
  return [
    { month: "Jan", subscriptions: 222, services: 250, products: 200 },
    { month: "Feb", subscriptions: 240, services: 255, products: 210 },
    { month: "Mar", subscriptions: 280, services: 245, products: 195 },
    { month: "Apr", subscriptions: 300, services: 260, products: 205 },
    { month: "May", subscriptions: 350, services: 235, products: 215 },
    { month: "Jun", subscriptions: 420, services: 270, products: 200 },
    { month: "Jul", subscriptions: 300, services: 255, products: 225 },
    { month: "Aug", subscriptions: 270, services: 305, products: 210 },
    { month: "Sep", subscriptions: 260, services: 280, products: 250 },
    { month: "Oct", subscriptions: 385, services: 250, products: 205 },
    { month: "Nov", subscriptions: 320, services: 265, products: 215 },
    { month: "Dec", subscriptions: 330, services: 255, products: 220 },
  ];
}

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

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

Missing Data Copy Link

index.tsx

import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgAreaSeriesOptions,
  AgCartesianChartOptions,
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    title: {
      text: "Sales by Month",
    },
    data: getData(),
    series: [
      {
        type: "area",
        xKey: "month",
        yKey: "subscriptions",
        yName: "Subscriptions",
        connectMissingData: false,
      },
      {
        type: "area",
        xKey: "month",
        yKey: "services",
        yName: "Services",
        connectMissingData: false,
      },
      {
        type: "area",
        xKey: "month",
        yKey: "products",
        yName: "Products",
        connectMissingData: false,
      },
    ],
  });

  const toggleConnectMissingData = () => {
    const nextOptions = clone(options);

    nextOptions.series = (nextOptions.series as Array<AgAreaSeriesOptions>).map(
      (series) => ({
        ...series,
        connectMissingData: !series.connectMissingData,
      }),
    );

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={toggleConnectMissingData}>
            Toggle Connect Missing Data
          </button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

data.tsx

export function getData() {
  return [
    { month: "Jan", subscriptions: 222, services: 250, products: 200 },
    { month: "Feb", subscriptions: 240, services: 255, products: 210 },
    { month: "Mar", subscriptions: 280, services: 245, products: null },
    { month: "Apr", subscriptions: 300, services: 260, products: 205 },
    { month: "May", subscriptions: 350, services: 235, products: 215 },
    { month: "Jun", subscriptions: 420, services: Infinity, products: 200 },
    { month: "Jul", subscriptions: 300, services: 255, products: undefined },
    { month: "Aug", subscriptions: 270, services: 305, products: 210 },
    { month: "Sep", subscriptions: 260, services: 280, products: 250 },
    { month: "Oct", subscriptions: 385, services: 250, products: NaN },
    { month: "Nov", subscriptions: 320, services: 265, products: 215 },
    { month: "Dec", subscriptions: 330, services: 255, products: 220 },
  ];
}

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.

Area Chart Examples Copy Link

See more Area Chart examples in the AG Charts Gallery.

Area Chart Example

Area Chart With Labels Example

Stacked Area Chart Example

Area Chart With Markers Example

100% Stacked Area Chart Example

Area Chart With Negative Values Example

API Reference Copy Link

Properties available on the AgAreaSeriesOptions interface.

type required 'area': Configuration for the Area Series.
xKey required DatumKey: The key to use to retrieve x-values from the data.
yKey required DatumKey: The key to use to retrieve y-values from the data.
normalizedTo number: 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.
stacked boolean: An option indicating if the areas should be stacked.
stackGroup string: An ID to be used to group stacked items.
id string default: auto-generated value: 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.
context ContextDefault: Context object to use in callbacks.
data DatumDefault[]: The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible boolean: Whether to display the series.
cursor string: The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
selection AgSelectionOptions: Configuration for data selection.
nodeClickRange InteractionRange: Range from a node that a click triggers the listener.
showInLegend boolean: Whether to include the series in the legend.
listeners AgSeriesListeners: A map of event names to event listeners.
xKeyAxis string default: 'x': The key of the x-axis to which this series is bound.
yKeyAxis string default: 'y': The key of the y-axis to which this series is bound.
xName string: 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.
yName string: 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.
legendItemName string: Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together.
styler Styler: Function used to return formatting for entire series, based on the given parameters.
marker AgSeriesMarkerOptions: Configuration for the markers used in the series.
interpolation AgInterpolationType: Configuration for the line used in the series.
shadow AgDropShadowOptions: Configuration for the shadow used behind the chart series.
label AgAreaSeriesLabelOptions: Configuration for the labels shown on top of data points.
tooltip AgSeriesTooltip: Series-specific tooltip configuration.
connectMissingData boolean: Set to `true` to connect across missing data points.
highlight AgMultiSeriesHighlightOptions: Configuration for highlighting when a series or legend item is hovered over.
segmentation AgSeriesSegmentation: Configuration for styling series as separate segments.
stroke AgCssColorOrRef: The colour for the stroke.
strokeWidth PixelSize: The width of the stroke in pixels.
strokeOpacity Opacity: The opacity of the stroke colour.
fill AgColorType: The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
fillOpacity Opacity: The opacity of the fill colour.
lineDash PixelSize[]: An array specifying the length in pixels of alternating dashes and gaps.
lineDashOffset PixelSize: The initial offset of the dashed line in pixels.
showInMiniChart boolean: Whether to include the series in the Mini Chart.

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

React ChartsArea Series

Simple Area Copy Link

Multiple Area Series Copy Link

Stacked Area Series Copy Link

Normalized Area Series Copy Link

Customisation Copy Link

Interpolation Copy Link

Missing Data Copy Link

Area Chart Examples Copy Link

API Reference Copy Link