Area

Props

• dataKeyFunction | number | string

  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.

  示例：

  • Simple Area Chart
  • Stacked Area Chart
  • Area Chart Connect Nulls
  • Cardinal Area Chart
  • Percent Area Chart
  • Synchronized Area Chart
  • Tiny Area Chart
  • Area Chart Fill By Value
  • Line Bar Area Composed Chart
  • Vertical Composed Chart

• 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

  默认值：true

  格式：

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

  示例：

  • A line chart with customized active dot
  • Banded Chart

• animationBeginnumberoptional

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

  默认值：0

  示例：

  • Synchronized Area Chart

• animationDurationnumberoptional

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

  默认值：1500

  示例：

  • Synchronized Area Chart

• animationEasing"ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear"optional

  The type of easing function.

  默认值："ease"

• baseLineArray<readonly NullableCoordinate> | numberoptional

  Baseline of the area:

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

• baseValue"dataMax" | "dataMin" | numberoptional

• childrenReactNodeoptional

  示例：

  • Target Price Chart with active Label

• classNamestringoptional

• connectNullsbooleanoptional

  Whether to connect the curve across null points.

  默认值：false

  示例：

  • LineChart with connectNull true and false
  • AreaChart with connectNull true and false
  • Banded Chart
  • Target Price Chart with active Label

• dataReadonlyArray<unknown>optional

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

  默认值：false

  示例：

  • Banded Chart

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

  默认值：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", the animation will be disabled in SSR and enabled in browser.

  默认值："auto"

  示例：

  • Target Price Chart with active Label

• isRangebooleanoptional

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

  默认值：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.

  默认值："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.

• stackIdnumber | stringoptional

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

  示例：

  • Stacked Area Chart
  • Percent Area Chart

• strokestringoptional

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

  默认值："#3182bd"

  示例：

  • Simple Area Chart
  • Stacked Area Chart
  • Area Chart Connect Nulls
  • Cardinal Area Chart
  • Percent Area Chart
  • Synchronized Area Chart
  • Tiny Area Chart
  • Area Chart Fill By Value
  • Line Bar Area Composed Chart
  • Vertical Composed Chart

• strokeDasharraynumber | stringoptional

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

  格式：

  strokeDasharray="5 5"
  strokeDasharray={10}

  示例：

  • https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
  • Synchronized Area Chart

• strokeWidthnumber | stringoptional

  The width of the stroke

  默认值：1

  示例：

  • Synchronized Area Chart

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

  默认值："linear"

  示例：

  • An AreaChart which has two area with different interpolation.
  • https://d3js.org/d3-shape/curve
  • Simple Area Chart
  • Stacked Area Chart
  • Area Chart Connect Nulls
  • Percent Area Chart
  • Synchronized Area Chart
  • Tiny Area Chart
  • Area Chart Fill By Value
  • Line Bar Area Composed Chart
  • Composed Chart With Axis Labels

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

  默认值：0

• yAxisIdnumber | stringoptional

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

  默认值：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.

  默认值：100

  示例：

  • Z-Index and layers guide

• 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