DefaultLegendContent
This component is by default rendered inside the Legend component. You would not use it directly. You can use this component to customize the content of the legend, or you can provide your own completely independent content.
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.rightshows the Legend to the right of the chart, and chart width reduces automatically.centershows the Legend in the middle of chart, and chart width remains unchanged.
The exact behavior changes depending on 'verticalAlign' prop.
DEFAULT:
"center"childrenReactNodeoptional
dangerouslySetInnerHTMLObjectoptional
formatterFormatteroptional
Function to customize how content is serialized before rendering.
This should return HTML elements, or strings.
FORMAT:
(value, entry, index) => <span style={{ color: 'red' }}>{value}</span> https://codesandbox.io/s/legend-formatter-rmzp9iconSizenumberoptional
The size of icon in each legend item.
DEFAULT:
"14"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.
DEFAULT:
"#ccc"layout"horizontal" | "vertical"optional
The layout of legend items inside the legend container.
DEFAULT:
"horizontal"payloadArray<readonly LegendPayload>optional
DefaultLegendContent.payload is omitted from Legend props. A custom payload can be passed here if desired, or it can be passed from the Legend "content" callback.
verticalAlign"bottom" | "middle" | "top"optional
Vertical 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 onalignprop.
DEFAULT:
"middle"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
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
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
FORMAT:
https://recharts.github.io/examples/LegendEffectOpacityonMouseLeaveFunctionoptional
The customized event handler of mouseleave on the items in this group
FORMAT:
https://recharts.github.io/examples/LegendEffectOpacityonMouseMoveAdaptChildMouseEventHandler<P, T>optional
onMouseMoveCaptureAdaptChildMouseEventHandler<P, T>optional
onMouseOutAdaptChildMouseEventHandler<P, T>optional
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