API

Charts

General Components

Cartesian Components

Polar Components

Shapes

Animation

Area

Related Links

Parent Components

Area consumes context provided by these components:

Child Components

Area provides context for these components:

  • dataKeyTypedDataKey<DataPointType, DataValueType>

    The data that you provide via the data prop is an array of objects. Each object can have multiple properties, each representing a different data dimension. Use the dataKey prop to specify which property (or dimension) to use for this component.

    Typically, you will want to have one dataKey on the X axis, and different dataKey on the Y axis, where they extract different values from the same data objects.

    Decides how to extract the value from the data:

    • string: the name of the field in the data object;
    • number: the index of the field in the data;
    • function: a function that receives the data object and returns the value.

    Examples:

  • activeDotFunction | Partial<ActiveDotProps> | ReactNode | false | trueoptional

    The active dot is rendered on the closest data point when user interacts with the chart. Options:

    • false: dots do not change on user activity; both active and inactive dots follow the dot prop (see below)
    • true: renders the active dot with default settings
    • object: the props of the active dot. This will be merged with the internal calculated props of the active dot
    • ReactElement: the custom active dot element
    • function: a render function of the custom active dot

    DEFAULT: true

    FORMAT: 

    <Area dataKey="value" activeDot={false} />
<Area dataKey="value" activeDot={{ stroke: 'red', strokeWidth: 2, r: 10 }} />
<Area dataKey="value" activeDot={CustomizedActiveDot} />

    Examples:

  • animationBeginnumberoptional

    Specifies when the animation should begin, the unit of this option is ms.

    DEFAULT: 0

    Examples:

  • animationDurationnumberoptional

    Specifies the duration of animation, the unit of this option is ms.

    DEFAULT: 1500

    Examples:

  • animationEasing"ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear" | "spring" | EasingFunction | `cubic-bezier(${number},${number},${number},${number})`optional

    The type of easing function.

    DEFAULT: "ease"

  • animationInterpolateFnAnimationInterpolateFn<AreaPointItem, CartesianLayout>optional

    Custom animation function for interpolating data items. When provided, this replaces the default animation interpolation.

    Available since Recharts 3.9

    Examples:

  • animationMatchBy"append" | "index" | AnimationMatchBy<AreaPointItem>optional

    Strategy for matching previous items to next items during animation. Determines how Recharts pairs old data points with new data points to create smooth transitions.

    • matchByIndex (default): match by array position with proportional stretching
    • matchAppend: match sequentially by index and treat newly appended items as new
    • matchByDataKey('someKey'): match by a data key from the payload
    • Custom function (item, index) => key: match by the returned key

    Available since Recharts 3.9

    DEFAULT: "index"

    Examples:

  • baseValue"dataMax" | "dataMin" | numberoptional

    Configures the starting value used to build the internal baseline for non-ranged, non-stacked areas.

    WARNING despite the name dataMin|dataMax this actually reads the domain instead, so it should rather bedomainMin|domainMax. This looks like a small detail, but it's actually important because domains are usually extended automatically. For example the default numerical domain starts from 0.

    • number: uses the corresponding axis value as a flat baseline
    • dataMin: uses the minimum of the value-axis domain
    • dataMax: uses the maximum of the value-axis domain

    Ignored when the area is stacked or when dataKey already returns [min, max] tuples.

    Note that the baseValue does not interact with animationInterpolateFn; baseValue is always animated by linear interpolation. If you want a custom animation then have your dataKey return a tuple of two values instead of a single number which will also render a ranged Area, and that does work with your custom animationInterpolateFn.

  • childrenReactNodeoptional

    Examples:

  • classNamestringoptional

  • connectNullsbooleanoptional

    Whether to connect the curve across null points.

    DEFAULT: false

    Examples:

  • dataReadonlyArray<DataPointType>optional

    The source data. Each element should be an object. The properties of each object represent the values of different data dimensions.

    Use the dataKey prop to specify which properties to use.

    FORMAT: 

    data={[{ name: 'a', value: 12 }]}
data={[{ label: 'foo', measurements: [5, 12] }]}

  • dotFunction | Partial<Props> | ReactNode | false | trueoptional

    Renders a circle element at each data point. Options:

    • false: no dots are drawn;
    • true: renders the dots with default settings;
    • object: the props of the dot. This will be merged with the internal calculated props of each dot;
    • ReactElement: the custom dot element;
    • function: a render function of the custom dot.

    DEFAULT: false

    Examples:

  • formatterFormatteroptional

    Formats the value displayed in the tooltip for this Area. When set, takes precedence over the formatter prop on the Tooltip component.

  • hidebooleanoptional

    Hides the whole graphical element when true.

    Hiding an element is different from removing it from the chart: Hidden graphical elements are still visible in Legend, and can be included in axis domain calculations, depending on includeHidden props of your XAxis/YAxis.

    DEFAULT: false

  • idstringoptional

    Unique identifier of this component. Used as an HTML attribute id, and also to identify this element internally.

    If undefined, Recharts will generate a unique ID automatically.

  • isAnimationActive"auto" | false | trueoptional

    If set false, animation of area will be disabled. If set "auto", will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.

    DEFAULT: "auto"

    Examples:

  • labelFunction | Props | ReactNode | false | trueoptional

    Renders one label for each data point. Options:

    • true: renders default labels
    • false: no labels are rendered
    • object: the props of LabelList component
    • ReactElement: a custom SVG label element, such as <text> or <g>. HTML elements such as <div> are not valid inside the chart SVG and may trigger React DOM warnings.
    • function: a render function of custom label

    DEFAULT: false

  • legendType"circle" | "cross" | "diamond" | "line" | "none" | "plainline" | "rect" | "square" | "star" | "triangle" | "wye"optional

    The type of icon in legend. If set to 'none', no legend item will be rendered.

    DEFAULT: "line"

  • namestringoptional

    The name of data. This option will be used in tooltip and legend to represent this graphical item. If no value was set to this option, the value of dataKey will be used alternatively.

  • shape(union of 5 variants)optional

    If set a ReactElement, the shape of area can be customized. If set a function, the function will be called to render customized shape. By default, renders a filled curve path with a clipPath entrance animation.

    During animations the shape receives additional props: animationElapsedTime, isAnimating, and isEntrance. When a custom shape is provided, the built-in clipPath entrance animation is skipped.

    FORMAT: 

    <Area dataKey="value" shape={CustomizedShapeComponent} />
<Area dataKey="value" shape={renderShapeFunction} />

    Examples:

  • stackIdnumber | stringoptional

    When two Areas have the same axisId and same stackId, then the two Areas are stacked in the chart.

    Examples:

  • strokestringoptional

    The stroke color. If "none", no line will be drawn.

    DEFAULT: "#3182bd"

    Examples:

  • strokeDasharraynumber | stringoptional

    The pattern of dashes and gaps used to paint the line.

    FORMAT: 

    strokeDasharray="5 5"
strokeDasharray={10}

    Examples:

  • strokeWidthnumber | stringoptional

    The width of the stroke

    DEFAULT: 1

    Examples:

  • tooltipType"none"optional

  • type"basis" | "basisClosed" | "basisOpen" | "bump" | "bumpX" | "bumpY" | "linear" | "linearClosed" | "monotone" | "monotoneX" | "monotoneY" | "natural" | "step" | "stepAfter" | "stepBefore" | CurveFactoryoptional

    The interpolation type of curve. Allows custom interpolation function.

    DEFAULT: "linear"

    Examples:

  • unitnumber | stringoptional

    The unit of data. This option will be used in tooltip.

  • xAxisIdnumber | stringoptional

    The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.

    DEFAULT: 0

  • yAxisIdnumber | stringoptional

    The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.

    DEFAULT: 0

  • zIndexnumberoptional

    Z-Index of this component and its children. The higher the value, the more on top it will be rendered. Components with higher zIndex will appear in front of components with lower zIndex. If undefined or 0, the content is rendered in the default layer without portals.

    Available since Recharts 3.4

    DEFAULT: 100

    Examples: