Area
Parent Components
Area consumes context provided by these components:
Properties
dataKeystring | number | Function
Decides how to extract the value of this Area 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 of this Area.
If undefined, it will reuse the dataKey of YAxis.
activeDotfalse | true | Function | Partial<ActiveDotProps> | ReactNodeoptional
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:
trueanimationBeginnumberoptional
Specifies when the animation should begin, the unit of this option is ms.
DEFAULT:
0animationDurationnumberoptional
Specifies the duration of animation, the unit of this option is ms.
DEFAULT:
1500animationEasing"linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"optional
The type of easing function.
DEFAULT:
"ease"baseLinenumber | Array<readonly NullableCoordinate>optional
Baseline of the area:
- number: uses the corresponding axis value as a flat baseline;
- an array of coordinates: describes a custom baseline path.
baseValuenumber | "dataMin" | "dataMax"optional
childrenReactNodeoptional
classNamestringoptional
connectNullsbooleanoptional
Whether to connect the curve across null points.
DEFAULT:
falsedataArray<unknown>optional
dotfalse | true | Function | Partial<Props> | ReactNodeoptional
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:
falsehidebooleanoptional
DEFAULT:
falseidstringoptional
Unique identifier of this component. Used as a HTML attribute
id, and also to identify this element internally.If undefined, Recharts will generate a unique ID automatically.
isAnimationActivefalse | true | "auto"optional
If set false, animation of area will be disabled. If set "auto", the animation will be disabled in SSR and enabled in browser.
DEFAULT:
"auto"isRangebooleanoptional
labelfalse | true | ReactNode | Function | Propsoptional
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.
DEFAULT:
falselegendType"none" | "circle" | "cross" | "diamond" | "line" | "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.
stackIdstring | numberoptional
When two Areas have the same axisId and same stackId, then the two Areas are stacked in the chart.
strokestringoptional
The stroke color. If "none", no line will be drawn.
DEFAULT:
"#3182bd"strokeWidthstring | numberoptional
The width of the stroke
DEFAULT:
1tooltipType"none"optional
type"step" | "basis" | "basisClosed" | "basisOpen" | "bumpX" | "bumpY" | "bump" | "linear" | "linearClosed" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "stepBefore" | "stepAfter" | CurveFactoryoptional
The interpolation type of curve. Allows custom interpolation function.
DEFAULT:
"linear"unitstring | numberoptional
The unit of data. This option will be used in tooltip.
xAxisIdstring | numberoptional
The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.
DEFAULT:
0yAxisIdstring | numberoptional
The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
DEFAULT:
0zIndexnumberoptional
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.
DEFAULT:
100Examples:
onAbortReactEventHandler<P, T>optional
onAbortCaptureReactEventHandler<P, T>optional
onAnimationEndAnimationEventHandler<P, T>optional
The customized event handler of animation end
onAnimationEndCaptureAnimationEventHandler<P, T>optional
onAnimationIterationAnimationEventHandler<P, T>optional
onAnimationIterationCaptureAnimationEventHandler<P, T>optional
onAnimationStartAnimationEventHandler<P, T>optional
The customized event handler of animation start
onAnimationStartCaptureAnimationEventHandler<P, T>optional
onAuxClickRechartsMouseEventHandler<P, T>optional
onAuxClickCaptureRechartsMouseEventHandler<P, T>optional
onBeforeInputFormEventHandler<P, T>optional
onBeforeInputCaptureFormEventHandler<P, T>optional
onBlurFocusEventHandler<P, T>optional
onBlurCaptureFocusEventHandler<P, T>optional
onCanPlayReactEventHandler<P, T>optional
onCanPlayCaptureReactEventHandler<P, T>optional
onCanPlayThroughReactEventHandler<P, T>optional
onCanPlayThroughCaptureReactEventHandler<P, T>optional
onChangeFormEventHandler<P, T>optional
onChangeCaptureFormEventHandler<P, T>optional
onClickCurveMouseEventHandleroptional
The customized event handler of click on the curve
onClickCaptureRechartsMouseEventHandler<P, T>optional
onCompositionEndCompositionEventHandler<P, T>optional
onCompositionEndCaptureCompositionEventHandler<P, T>optional
onCompositionStartCompositionEventHandler<P, T>optional
onCompositionStartCaptureCompositionEventHandler<P, T>optional
onCompositionUpdateCompositionEventHandler<P, T>optional
onCompositionUpdateCaptureCompositionEventHandler<P, T>optional
onContextMenuRechartsMouseEventHandler<P, T>optional
onContextMenuCaptureRechartsMouseEventHandler<P, T>optional
onCopyClipboardEventHandler<P, T>optional
onCopyCaptureClipboardEventHandler<P, T>optional
onCutClipboardEventHandler<P, T>optional
onCutCaptureClipboardEventHandler<P, T>optional
onDoubleClickRechartsMouseEventHandler<P, T>optional
onDoubleClickCaptureRechartsMouseEventHandler<P, T>optional
onDragDragEventHandler<P, T>optional
onDragCaptureDragEventHandler<P, T>optional
onDragEndDragEventHandler<P, T>optional
onDragEndCaptureDragEventHandler<P, T>optional
onDragEnterDragEventHandler<P, T>optional
onDragEnterCaptureDragEventHandler<P, T>optional
onDragExitDragEventHandler<P, T>optional
onDragExitCaptureDragEventHandler<P, T>optional
onDragLeaveDragEventHandler<P, T>optional
onDragLeaveCaptureDragEventHandler<P, T>optional
onDragOverDragEventHandler<P, T>optional
onDragOverCaptureDragEventHandler<P, T>optional
onDragStartDragEventHandler<P, T>optional
onDragStartCaptureDragEventHandler<P, T>optional
onDropDragEventHandler<P, T>optional
onDropCaptureDragEventHandler<P, T>optional
onDurationChangeReactEventHandler<P, T>optional
onDurationChangeCaptureReactEventHandler<P, T>optional
onEmptiedReactEventHandler<P, T>optional
onEmptiedCaptureReactEventHandler<P, T>optional
onEncryptedReactEventHandler<P, T>optional
onEncryptedCaptureReactEventHandler<P, T>optional
onEndedReactEventHandler<P, T>optional
onEndedCaptureReactEventHandler<P, T>optional
onErrorReactEventHandler<P, T>optional
onErrorCaptureReactEventHandler<P, T>optional
onFocusFocusEventHandler<P, T>optional
onFocusCaptureFocusEventHandler<P, T>optional
onGotPointerCapturePointerEventHandler<P, T>optional
onGotPointerCaptureCapturePointerEventHandler<P, T>optional
onInputFormEventHandler<P, T>optional
onInputCaptureFormEventHandler<P, T>optional
onInvalidFormEventHandler<P, T>optional
onInvalidCaptureFormEventHandler<P, T>optional
onKeyDownKeyboardEventHandler<P, T>optional
onKeyDownCaptureKeyboardEventHandler<P, T>optional
onKeyPressKeyboardEventHandler<P, T>optional
onKeyPressCaptureKeyboardEventHandler<P, T>optional
onKeyUpKeyboardEventHandler<P, T>optional
onKeyUpCaptureKeyboardEventHandler<P, T>optional
onLoadReactEventHandler<P, T>optional
onLoadCaptureReactEventHandler<P, T>optional
onLoadedDataReactEventHandler<P, T>optional
onLoadedDataCaptureReactEventHandler<P, T>optional
onLoadedMetadataReactEventHandler<P, T>optional
onLoadedMetadataCaptureReactEventHandler<P, T>optional
onLoadStartReactEventHandler<P, T>optional
onLoadStartCaptureReactEventHandler<P, T>optional
onLostPointerCapturePointerEventHandler<P, T>optional
onLostPointerCaptureCapturePointerEventHandler<P, T>optional
onMouseDownCurveMouseEventHandleroptional
The customized event handler of mousedown on the curve
onMouseDownCaptureRechartsMouseEventHandler<P, T>optional
onMouseEnterCurveMouseEventHandleroptional
The customized event handler of mouseenter on the curve
onMouseLeaveCurveMouseEventHandleroptional
The customized event handler of mouseleave on the curve
onMouseMoveCurveMouseEventHandleroptional
The customized event handler of mousemove on the curve
onMouseMoveCaptureRechartsMouseEventHandler<P, T>optional
onMouseOutCurveMouseEventHandleroptional
The customized event handler of mouseout on the curve
onMouseOutCaptureRechartsMouseEventHandler<P, T>optional
onMouseOverCurveMouseEventHandleroptional
The customized event handler of mouseover on the curve
onMouseOverCaptureRechartsMouseEventHandler<P, T>optional
onMouseUpCurveMouseEventHandleroptional
The customized event handler of mouseup on the curve
onMouseUpCaptureRechartsMouseEventHandler<P, T>optional
onPasteClipboardEventHandler<P, T>optional
onPasteCaptureClipboardEventHandler<P, T>optional
onPauseReactEventHandler<P, T>optional
onPauseCaptureReactEventHandler<P, T>optional
onPlayReactEventHandler<P, T>optional
onPlayCaptureReactEventHandler<P, T>optional
onPlayingReactEventHandler<P, T>optional
onPlayingCaptureReactEventHandler<P, T>optional
onPointerCancelPointerEventHandler<P, T>optional
onPointerCancelCapturePointerEventHandler<P, T>optional
onPointerDownPointerEventHandler<P, T>optional
onPointerDownCapturePointerEventHandler<P, T>optional
onPointerEnterPointerEventHandler<P, T>optional
onPointerEnterCapturePointerEventHandler<P, T>optional
onPointerLeavePointerEventHandler<P, T>optional
onPointerLeaveCapturePointerEventHandler<P, T>optional
onPointerMovePointerEventHandler<P, T>optional
onPointerMoveCapturePointerEventHandler<P, T>optional
onPointerOutPointerEventHandler<P, T>optional
onPointerOutCapturePointerEventHandler<P, T>optional
onPointerOverPointerEventHandler<P, T>optional
onPointerOverCapturePointerEventHandler<P, T>optional
onPointerUpPointerEventHandler<P, T>optional
onPointerUpCapturePointerEventHandler<P, T>optional
onProgressReactEventHandler<P, T>optional
onProgressCaptureReactEventHandler<P, T>optional
onRateChangeReactEventHandler<P, T>optional
onRateChangeCaptureReactEventHandler<P, T>optional
onResetFormEventHandler<P, T>optional
onResetCaptureFormEventHandler<P, T>optional
onScrollUIEventHandler<P, T>optional
onScrollCaptureUIEventHandler<P, T>optional
onSeekedReactEventHandler<P, T>optional
onSeekedCaptureReactEventHandler<P, T>optional
onSeekingReactEventHandler<P, T>optional
onSeekingCaptureReactEventHandler<P, T>optional
onSelectReactEventHandler<P, T>optional
onSelectCaptureReactEventHandler<P, T>optional
onStalledReactEventHandler<P, T>optional
onStalledCaptureReactEventHandler<P, T>optional
onSubmitFormEventHandler<P, T>optional
onSubmitCaptureFormEventHandler<P, T>optional
onSuspendReactEventHandler<P, T>optional
onSuspendCaptureReactEventHandler<P, T>optional
onTimeUpdateReactEventHandler<P, T>optional
onTimeUpdateCaptureReactEventHandler<P, T>optional
onTouchCancelTouchEventHandler<P, T>optional
onTouchCancelCaptureTouchEventHandler<P, T>optional
onTouchEndTouchEventHandler<P, T>optional
onTouchEndCaptureTouchEventHandler<P, T>optional
onTouchMoveTouchEventHandler<P, T>optional
onTouchMoveCaptureTouchEventHandler<P, T>optional
onTouchStartTouchEventHandler<P, T>optional
onTouchStartCaptureTouchEventHandler<P, T>optional
onTransitionEndTransitionEventHandler<P, T>optional
onTransitionEndCaptureTransitionEventHandler<P, T>optional
onVolumeChangeReactEventHandler<P, T>optional
onVolumeChangeCaptureReactEventHandler<P, T>optional
onWaitingReactEventHandler<P, T>optional
onWaitingCaptureReactEventHandler<P, T>optional
onWheelWheelEventHandler<P, T>optional
onWheelCaptureWheelEventHandler<P, T>optional