Legend

Props

• align"center" | "left" | "right"optional

  Horizontal alignment of the whole Legend container:

  • left: shows the Legend to the left of the chart, and chart width reduces automatically to make space for it.
  • right shows the Legend to the right of the chart, and chart width reduces automatically.
  • center shows the Legend in the middle of chart, and chart width remains unchanged.

  The exact behavior changes depending on 'verticalAlign' prop.

  默认值："center"

  示例：

  • Population Pyramid
  • Radial Bar Chart with Click to Focus Legend

• childrenReactNodeoptional

• contentFunction | ReactNodeoptional

  Renders the content of the legend.

  This should return HTML elements, not SVG elements.

  • If not set, the DefaultLegendContent component is used.
  • If set to a React element, this element will be cloned and extra props will be passed in.
  • If set to a function, the function will be called and should return HTML elements.

  格式：

  <Legend content={CustomizedLegend} />
  <Legend content={renderLegend} />

  示例：

  • Banded Chart
  • Radial Bar Chart with Click to Focus Legend

• dangerouslySetInnerHTMLObjectoptional

• formatterFormatteroptional

  Function to customize how content is serialized before rendering.

  This should return HTML elements, or strings.

  格式：

  (value, entry, index) => <span style={{ color: 'red' }}>{value}</span>
  https://codesandbox.io/s/legend-formatter-rmzp9

• heightnumber | stringoptional

  Height of the legend. Accept CSS style string values like 100% or fit-content, or number values like 400.

  示例：

  • Radial Bar Chart with Click to Focus Legend

• iconSizenumberoptional

  The size of icon in each legend item.

  默认值：14

  示例：

  • Simple Radial Bar Chart
  • Radial Bar Chart with Click to Focus Legend

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

  The type of icon in each legend item.

• inactiveColorstringoptional

  The color of the icon when the item is inactive.

  默认值："#ccc"

• itemSorter"dataKey" | "value" | Function | nulloptional

  Sorts Legend items. Defaults to value which means it will sort alphabetically by the label.

  If null is provided then the payload is not sorted. Be aware that without sort, the order of items may change between renders!

  默认值："value"

  示例：

  • Population Pyramid

• labelStyleReact.CSSPropertiesoptional

  The style of each text label which is a span element.

  默认值：{}

• layout"horizontal" | "vertical"optional

  The layout of legend items inside the legend container.

  默认值："horizontal"

  示例：

  • Simple Radial Bar Chart
  • Radial Bar Chart with Click to Focus Legend

• payloadUniqByUniqueFunc<LegendPayload> | false | trueoptional

• portalHTMLElement | nulloptional

  If portal is defined, then Legend will use this element as a target for rendering using React Portal.

  If this is undefined then Legend renders inside the recharts-wrapper element.

  示例：

  • https://react.dev/reference/react-dom/createPortal

• verticalAlign"bottom" | "middle" | "top"optional

  The alignment of the whole Legend container:

  • bottom: shows the Legend below chart, and chart height reduces automatically to make space for it.
  • top: shows the Legend above chart, and chart height reduces automatically.
  • middle: shows the Legend in the middle of chart, covering other content, and chart height remains unchanged. The exact behavior changes depending on align prop.

  默认值："bottom"

  示例：

  • Population Pyramid
  • Brush Bar Chart
  • Simple Radial Bar Chart
  • Radial Bar Chart with Click to Focus Legend

• widthnumber | stringoptional

  Width of the legend. Accept CSS style string values like 100% or fit-content, or number values like 400.

  示例：

  • Radial Bar Chart with Click to Focus Legend

• wrapperStyleReact.CSSPropertiesoptional

  CSS styles to be applied to the wrapper div element.

  示例：

  • Brush Bar Chart
  • Bar Chart With Multi X Axis
  • Simple Radial Bar Chart

• onAbortAdaptChildReactEventHandler<P, T>optional

• onAbortCaptureAdaptChildReactEventHandler<P, T>optional

• onAnimationEndAdaptChildAnimationEventHandler<P, T>optional

• onAnimationEndCaptureAdaptChildAnimationEventHandler<P, T>optional

• onAnimationIterationAdaptChildAnimationEventHandler<P, T>optional

• onAnimationIterationCaptureAdaptChildAnimationEventHandler<P, T>optional

• onAnimationStartAdaptChildAnimationEventHandler<P, T>optional

• onAnimationStartCaptureAdaptChildAnimationEventHandler<P, T>optional

• onAuxClickAdaptChildMouseEventHandler<P, T>optional

• onAuxClickCaptureAdaptChildMouseEventHandler<P, T>optional

• onBBoxUpdateFunctionoptional

• onBeforeInputAdaptChildFormEventHandler<P, T>optional

• onBeforeInputCaptureAdaptChildFormEventHandler<P, T>optional

• onBlurAdaptChildFocusEventHandler<P, T>optional

• onBlurCaptureAdaptChildFocusEventHandler<P, T>optional

• onCanPlayAdaptChildReactEventHandler<P, T>optional

• onCanPlayCaptureAdaptChildReactEventHandler<P, T>optional

• onCanPlayThroughAdaptChildReactEventHandler<P, T>optional

• onCanPlayThroughCaptureAdaptChildReactEventHandler<P, T>optional

• onChangeAdaptChildFormEventHandler<P, T>optional

• onChangeCaptureAdaptChildFormEventHandler<P, T>optional

• onClickFunctionoptional

  The customized event handler of click on the items in this group

  示例：

  • Mix Bar Chart

• onClickCaptureAdaptChildMouseEventHandler<P, T>optional

• onCompositionEndAdaptChildCompositionEventHandler<P, T>optional

• onCompositionEndCaptureAdaptChildCompositionEventHandler<P, T>optional

• onCompositionStartAdaptChildCompositionEventHandler<P, T>optional

• onCompositionStartCaptureAdaptChildCompositionEventHandler<P, T>optional

• onCompositionUpdateAdaptChildCompositionEventHandler<P, T>optional

• onCompositionUpdateCaptureAdaptChildCompositionEventHandler<P, T>optional

• onContextMenuAdaptChildMouseEventHandler<P, T>optional

• onContextMenuCaptureAdaptChildMouseEventHandler<P, T>optional

• onCopyAdaptChildClipboardEventHandler<P, T>optional

• onCopyCaptureAdaptChildClipboardEventHandler<P, T>optional

• onCutAdaptChildClipboardEventHandler<P, T>optional

• onCutCaptureAdaptChildClipboardEventHandler<P, T>optional

• onDoubleClickAdaptChildMouseEventHandler<P, T>optional

• onDoubleClickCaptureAdaptChildMouseEventHandler<P, T>optional

• onDragAdaptChildDragEventHandler<P, T>optional

• onDragCaptureAdaptChildDragEventHandler<P, T>optional

• onDragEndAdaptChildDragEventHandler<P, T>optional

• onDragEndCaptureAdaptChildDragEventHandler<P, T>optional

• onDragEnterAdaptChildDragEventHandler<P, T>optional

• onDragEnterCaptureAdaptChildDragEventHandler<P, T>optional

• onDragExitAdaptChildDragEventHandler<P, T>optional

• onDragExitCaptureAdaptChildDragEventHandler<P, T>optional

• onDragLeaveAdaptChildDragEventHandler<P, T>optional

• onDragLeaveCaptureAdaptChildDragEventHandler<P, T>optional

• onDragOverAdaptChildDragEventHandler<P, T>optional

• onDragOverCaptureAdaptChildDragEventHandler<P, T>optional

• onDragStartAdaptChildDragEventHandler<P, T>optional

• onDragStartCaptureAdaptChildDragEventHandler<P, T>optional

• onDropAdaptChildDragEventHandler<P, T>optional

• onDropCaptureAdaptChildDragEventHandler<P, T>optional

• onDurationChangeAdaptChildReactEventHandler<P, T>optional

• onDurationChangeCaptureAdaptChildReactEventHandler<P, T>optional

• onEmptiedAdaptChildReactEventHandler<P, T>optional

• onEmptiedCaptureAdaptChildReactEventHandler<P, T>optional

• onEncryptedAdaptChildReactEventHandler<P, T>optional

• onEncryptedCaptureAdaptChildReactEventHandler<P, T>optional

• onEndedAdaptChildReactEventHandler<P, T>optional

• onEndedCaptureAdaptChildReactEventHandler<P, T>optional

• onErrorAdaptChildReactEventHandler<P, T>optional

• onErrorCaptureAdaptChildReactEventHandler<P, T>optional

• onFocusAdaptChildFocusEventHandler<P, T>optional

• onFocusCaptureAdaptChildFocusEventHandler<P, T>optional

• onGotPointerCaptureAdaptChildPointerEventHandler<P, T>optional

• onGotPointerCaptureCaptureAdaptChildPointerEventHandler<P, T>optional

• onInputAdaptChildFormEventHandler<P, T>optional

• onInputCaptureAdaptChildFormEventHandler<P, T>optional

• onInvalidAdaptChildFormEventHandler<P, T>optional

• onInvalidCaptureAdaptChildFormEventHandler<P, T>optional

• onKeyDownAdaptChildKeyboardEventHandler<P, T>optional

• onKeyDownCaptureAdaptChildKeyboardEventHandler<P, T>optional

• onKeyPressAdaptChildKeyboardEventHandler<P, T>optional

• onKeyPressCaptureAdaptChildKeyboardEventHandler<P, T>optional

• onKeyUpAdaptChildKeyboardEventHandler<P, T>optional

• onKeyUpCaptureAdaptChildKeyboardEventHandler<P, T>optional

• onLoadAdaptChildReactEventHandler<P, T>optional

• onLoadCaptureAdaptChildReactEventHandler<P, T>optional

• onLoadedDataAdaptChildReactEventHandler<P, T>optional

• onLoadedDataCaptureAdaptChildReactEventHandler<P, T>optional

• onLoadedMetadataAdaptChildReactEventHandler<P, T>optional

• onLoadedMetadataCaptureAdaptChildReactEventHandler<P, T>optional

• onLoadStartAdaptChildReactEventHandler<P, T>optional

• onLoadStartCaptureAdaptChildReactEventHandler<P, T>optional

• onLostPointerCaptureAdaptChildPointerEventHandler<P, T>optional

• onLostPointerCaptureCaptureAdaptChildPointerEventHandler<P, T>optional

• onMouseDownAdaptChildMouseEventHandler<P, T>optional

• onMouseDownCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseEnterFunctionoptional

  The customized event handler of mouseenter on the items in this group

  格式：

  https://recharts.github.io/examples/LegendEffectOpacity

  示例：

  • Dynamic Z-Index Line Chart
  • Mix Bar Chart
  • Legend with Opacity

• onMouseLeaveFunctionoptional

  The customized event handler of mouseleave on the items in this group

  格式：

  https://recharts.github.io/examples/LegendEffectOpacity

  示例：

  • Dynamic Z-Index Line Chart
  • Legend with Opacity

• onMouseMoveAdaptChildMouseEventHandler<P, T>optional

• onMouseMoveCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseOutAdaptChildMouseEventHandler<P, T>optional

  示例：

  • Mix Bar Chart

• onMouseOutCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseOverAdaptChildMouseEventHandler<P, T>optional

• onMouseOverCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseUpAdaptChildMouseEventHandler<P, T>optional

• onMouseUpCaptureAdaptChildMouseEventHandler<P, T>optional

• onPasteAdaptChildClipboardEventHandler<P, T>optional

• onPasteCaptureAdaptChildClipboardEventHandler<P, T>optional

• onPauseAdaptChildReactEventHandler<P, T>optional

• onPauseCaptureAdaptChildReactEventHandler<P, T>optional

• onPlayAdaptChildReactEventHandler<P, T>optional

• onPlayCaptureAdaptChildReactEventHandler<P, T>optional

• onPlayingAdaptChildReactEventHandler<P, T>optional

• onPlayingCaptureAdaptChildReactEventHandler<P, T>optional

• onPointerCancelAdaptChildPointerEventHandler<P, T>optional

• onPointerCancelCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerDownAdaptChildPointerEventHandler<P, T>optional

• onPointerDownCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerEnterAdaptChildPointerEventHandler<P, T>optional

• onPointerEnterCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerLeaveAdaptChildPointerEventHandler<P, T>optional

• onPointerLeaveCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerMoveAdaptChildPointerEventHandler<P, T>optional

• onPointerMoveCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerOutAdaptChildPointerEventHandler<P, T>optional

• onPointerOutCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerOverAdaptChildPointerEventHandler<P, T>optional

• onPointerOverCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerUpAdaptChildPointerEventHandler<P, T>optional

• onPointerUpCaptureAdaptChildPointerEventHandler<P, T>optional

• onProgressAdaptChildReactEventHandler<P, T>optional

• onProgressCaptureAdaptChildReactEventHandler<P, T>optional

• onRateChangeAdaptChildReactEventHandler<P, T>optional

• onRateChangeCaptureAdaptChildReactEventHandler<P, T>optional

• onResetAdaptChildFormEventHandler<P, T>optional

• onResetCaptureAdaptChildFormEventHandler<P, T>optional

• onScrollAdaptChildUIEventHandler<P, T>optional

• onScrollCaptureAdaptChildUIEventHandler<P, T>optional

• onSeekedAdaptChildReactEventHandler<P, T>optional

• onSeekedCaptureAdaptChildReactEventHandler<P, T>optional

• onSeekingAdaptChildReactEventHandler<P, T>optional

• onSeekingCaptureAdaptChildReactEventHandler<P, T>optional

• onSelectAdaptChildReactEventHandler<P, T>optional

• onSelectCaptureAdaptChildReactEventHandler<P, T>optional

• onStalledAdaptChildReactEventHandler<P, T>optional

• onStalledCaptureAdaptChildReactEventHandler<P, T>optional

• onSubmitAdaptChildFormEventHandler<P, T>optional

• onSubmitCaptureAdaptChildFormEventHandler<P, T>optional

• onSuspendAdaptChildReactEventHandler<P, T>optional

• onSuspendCaptureAdaptChildReactEventHandler<P, T>optional

• onTimeUpdateAdaptChildReactEventHandler<P, T>optional

• onTimeUpdateCaptureAdaptChildReactEventHandler<P, T>optional

• onTouchCancelAdaptChildTouchEventHandler<P, T>optional

• onTouchCancelCaptureAdaptChildTouchEventHandler<P, T>optional

• onTouchEndAdaptChildTouchEventHandler<P, T>optional

• onTouchEndCaptureAdaptChildTouchEventHandler<P, T>optional

• onTouchMoveAdaptChildTouchEventHandler<P, T>optional

• onTouchMoveCaptureAdaptChildTouchEventHandler<P, T>optional

• onTouchStartAdaptChildTouchEventHandler<P, T>optional

• onTouchStartCaptureAdaptChildTouchEventHandler<P, T>optional

• onTransitionEndAdaptChildTransitionEventHandler<P, T>optional

• onTransitionEndCaptureAdaptChildTransitionEventHandler<P, T>optional

• onVolumeChangeAdaptChildReactEventHandler<P, T>optional

• onVolumeChangeCaptureAdaptChildReactEventHandler<P, T>optional

• onWaitingAdaptChildReactEventHandler<P, T>optional

• onWaitingCaptureAdaptChildReactEventHandler<P, T>optional

• onWheelAdaptChildWheelEventHandler<P, T>optional

• onWheelCaptureAdaptChildWheelEventHandler<P, T>optional