Area

Renders a filled area in a Cartesian chart.

Usage

import { AreaChart, Area, XAxis, YAxis } from 'recharts';

<AreaChart data={data} width={600} height={300}>
  <XAxis dataKey="name" />
  <YAxis />
  <Area dataKey="value" fill="#8884d8" />
</AreaChart>

Props

dataKey · string | number | function · required

The key or getter function of a group of data which should be displayed in the area.

fill · string · default: "#3182bd"

The fill color of the area.

fillOpacity · number · default: "0.6"

The opacity of the fill color.

stroke · string · default: "#3182bd"

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

strokeWidth · string | number · default: "1"

The width of the stroke.

type · CurveType · default: "linear"

The interpolation type of curve. Allows custom interpolation function.

See d3-shape curves for available options.

connectNulls · boolean · default: "false"

Whether to connect the area across null points.

baseLine · number | array

Baseline of the area:

• number: uses the corresponding axis value as a flat baseline
• array of coordinates: describes a custom baseline path

baseValue · number | 'dataMin' | 'dataMax'

The base value of area. Used to calculate the baseline.

dot · boolean | object | ReactElement | function · default: "false"

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, merged with internal calculated props
• ReactElement: the custom dot element
• function: a render function of the custom dot

activeDot · boolean | object | ReactElement | function · default: "true"

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
• true: renders the active dot with default settings
• object: the props of the active dot, merged with internal calculated props
• ReactElement: the custom active dot element
• function: a render function of the custom active dot

label · boolean | object | ReactElement | function · default: "false"

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 label element
• function: a render function of custom label

hide · boolean · default: "false"

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.

stackId · string | number

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

isRange · boolean

Whether the area represents a range (with both upper and lower bounds).

name · string | number

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.

unit · string | number

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

xAxisId · string | number · default: "0"

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

yAxisId · string | number · default: "0"

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

legendType · LegendType · default: "line"

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

tooltipType · TooltipType

The type of tooltip item.

data · array

If set, data will be read from this property instead of from the chart data context.

Animation props

isAnimationActive · boolean | 'auto' · default: "auto"

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.

animationBegin · number · default: "0"

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

animationDuration · number · default: "1500"

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

animationEasing · AnimationTiming · default: "ease"

The type of easing function.

onAnimationStart · function

The customized event handler of animation start.

onAnimationEnd · function

The customized event handler of animation end.

Layout props

id · string

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.

zIndex · number · default: "100"

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.

@since 3.4

className · string

CSS class name for styling.

Source

https://github.com/recharts/recharts/blob/main/src/cartesian/Area.tsx