Recharts

Area

Parent Components

Child Components

<LabelList />

Properties

type'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | Function
The interpolation type of area. And customized interpolation function can be set to type.
DEFAULT: 'linear'
Examples:
- d3-shape interpolation
- An AreaChart which has two area with different interpolation.
dataKeyString | Number | Function
The key of a group of data which should be unique in an area chart.
xAxisIdString | Number
The id of x-axis which is corresponding to the data.
DEFAULT: 0
yAxisIdString | Number
The id of y-axis which is corresponding to the data.
DEFAULT: 0
legendType'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'optional
The type of icon in legend. If set to 'none', no legend item will be rendered.
DEFAULT: 'line'
dotBoolean | Object | ReactElement | Function
If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally. If object set, dots will be drawn which have the props merged by the internal calculated props and the option. If ReactElement set, the option can be the custom dot element. If set a function, the function will be called to render customized dot.
DEFAULT: false
FORMAT:
```
<Area dataKey="value" dot={false} />
<Area dataKey="value" dot={{ stroke: 'red', strokeWidth: 2 }} />
<Area dataKey="value" dot={<CustomizedDot />} />
<Area dataKey="value" dot={renderDot}/>
```
activeDotBoolean | Object | ReactElement | Function
The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. If object set, active dot will be drawn which have the props merged by the internal calculated props and the option. If ReactElement set, the option can be the custom active dot element.If set a function, the function will be called to render customized 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 />} />
<Area dataKey="value" activeDot={renderDot} />
```
labelBoolean | Object | ReactElement | Function
If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If object set, labels will be drawn which have the props merged by the internal calculated props and the option. If ReactElement set, the option can be the custom label element. If set a function, the function will be called to render customized label.
DEFAULT: false
FORMAT:
```
<Area dataKey="value" label />
<Area dataKey="value" label={{ fill: 'red', fontSize: 20 }} />
<Area dataKey="value" label={<CustomizedLabel />} />
<Area dataKey="value" label={renderLabel} />
```
strokeString
The stroke color. If "none", no line will be drawn.
DEFAULT: #3182bd
strokeWidthString | Numberoptional
The width of the stroke
DEFAULT: 1
layout'horizontal' | 'vertical'optional
The layout of area, usually inherited from parent.
baseLineNumber | Array
The value which can describle the line, usually calculated internally.
FORMAT:
```
<Area dataKey="value" baseLine={8} />
<Area dataKey="value" baseLine={[{ x: 12, y: 15 }]} />
```
pointsArray
The coordinates of all the points in the area, usually calculated internally.
FORMAT:
```
[{ x: 12, y: 12, value: 240 }]
```

The stack id of area, when two areas have the same value axis and same stackId, then the two areas area stacked in order.

FORMAT:


<AreaChart data={data} width={400} height={300}>
  <Area stackId="pv" dataKey="pv01" />
  <Area stackId="pv" dataKey="pv02" />
  <Area stackId="uv" dataKey="uv01" />
  <Area stackId="uv" dataKey="uv02" />
</AreaChart>

Examples:

A stacked area chart

connectNullsBoolean
Whether to connect a graph area across null points.
DEFAULT: false
Examples:
- An areaChart connect nulls and an areaChart disconnect nulls
unitString | Numberoptional
The unit of data. This option will be used in tooltip.
nameString | Numberoptional
The name of data. This option will be used in tooltip and legend to represent a area. If no value was set to this option, the value of dataKey will be used alternatively.
isAnimationActiveBoolean
If set false, animation of area will be disabled.
DEFAULT: true in CSR, and false in SSR
animationBeginNumber
Specifies when the animation should begin, the unit of this option is ms.
DEFAULT: 0
animationDurationNumber
Specifies the duration of animation, the unit of this option is ms.
DEFAULT: 1500
animationEasing'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
The type of easing function.
DEFAULT: 'ease'
idStringoptional
The unique id of this component, which will be used to generate unique clip path id internally. This props is suggested to be set in SSR.
onAnimationStartFunctionoptional
The customized event handler of animation start
onAnimationEndFunctionoptional
The customized event handler of animation end
onClickFunctionoptional
The customized event handler of click on the area in this group
Examples:
- A BarChart with customized click event handler
onMouseDownFunctionoptional
The customized event handler of mousedown on the area in this group
onMouseUpFunctionoptional
The customized event handler of mouseup on the area in this group
onMouseMoveFunctionoptional
The customized event handler of mousemove on the area in this group
onMouseOverFunctionoptional
The customized event handler of mouseover on the area in this group
onMouseOutFunctionoptional
The customized event handler of mouseout on the area in this group
onMouseEnterFunctionoptional
The customized event handler of mouseenter on the area in this group
onMouseLeaveFunctionoptional
The customized event handler of mouseleave on the area in this group