Bar
Related Links
Parent Components
Bar consumes context provided by these components:
Props
activeBar(union of 5 variants)optional
The active bar is shown when a user enters a bar chart and this chart has tooltip. Options:
false: all bars are passive, nothing happens on mouse events;true: active bar is rendered separately but the default props are the same as others: so mouse events do not change its appearance. className and zIndex are different though;object: the props of active bar;function: the render function of active bar;ReactElement: the active bar element.
DEFAULT:
falseFORMAT:
<Bar activeBar={{ fill: 'red' }} /> <Bar activeBar={CustomActiveBarFn} />animationBeginnumberoptional
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:
400animationEasing(union of 9 variants)optional
The type of easing function.
DEFAULT:
"ease"background(union of 5 variants)optional
Renders a background for each bar. Options:
false: no background;true: renders default background;object: the props of background rectangle;ReactElement: a custom background element;function: a render function of custom background.
DEFAULT:
falsebarSizenumber | stringoptional
The width or height of each bar. If the barSize is not specified, the size of bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
childrenReactNodeoptional
classNamestringoptional
dangerouslySetInnerHTMLObjectoptional
dataKeyFunction | number | stringoptional
Decides how to extract the value of this Bar 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 Bar.
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
includeHiddenprops of your XAxis/YAxis.DEFAULT:
falseidstringoptional
The 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.
indexbigint | number | stringoptional
isAnimationActive"auto" | false | trueoptional
If set false, animation of bar will be disabled. If set "auto", the animation will be disabled in SSR and enabled in browser.
DEFAULT:
"auto"labelFunction | Props | ReactNode | false | trueoptional
Renders one label for each bar. 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:
falseFORMAT:
<Bar label /> <Bar label={{ position: 'top', fontSize: 20 }} /> <Bar label={CustomizedLabelFn} />Examples:
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.
DEFAULT:
"rect"maxBarSizenumberoptional
The maximum width of bar in a horizontal chart, or maximum height in a vertical chart.
Examples:
minPointSizeFunction | numberoptional
The minimal height of a bar in a horizontal chart, or the minimal width of a bar in a vertical chart.
By default, 0 values are not shown. To visualize a 0 (or close to zero) point, set the minimal point size to a pixel value like 3.
In stacked bar charts, minPointSize might not be respected for tightly packed values. So we strongly recommend not using this props in stacked BarChart.
You may provide a function to conditionally change this prop based on Bar value.
DEFAULT:
0Examples:
namenumber | stringoptional
The name of data. This option will be used in tooltip and legend to represent a bar. If no value was set to this option, the value of dataKey will be used alternatively.
Examples:
radius[number, number, number, number] | numberoptional
The radius of corners.
If you provide a single number, it applies to all four corners. If you provide an array of four numbers, they apply to top-left, top-right, bottom-right, bottom-left corners respectively.
shape(union of 5 variants)optional
If set a ReactElement, the shape of bar can be customized. If set a function, the function will be called to render customized shape. By default, renders a rectangle.
stackIdnumber | stringoptional
When two Bars have the same axisId and same stackId, then the two Bars are stacked in the chart.
tooltipType"none"optional
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.
DEFAULT:
0yAxisIdnumber | stringoptional
The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
DEFAULT:
0Examples:
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.
DEFAULT:
300Examples:
onAbortAdaptChildReactEventHandler<P, T>optional
onAbortCaptureAdaptChildReactEventHandler<P, T>optional
onAnimationEndFunctionoptional
The customized event handler of animation end
onAnimationEndCaptureAdaptChildAnimationEventHandler<P, T>optional
onAnimationIterationAdaptChildAnimationEventHandler<P, T>optional
onAnimationIterationCaptureAdaptChildAnimationEventHandler<P, T>optional
onAnimationStartFunctionoptional
The customized event handler of animation start
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
onClickBarMouseEventoptional
The customized event handler of click on the bars in this group
Examples:
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
onMouseDownBarMouseEventoptional
The customized event handler of mousedown on the bars in this group
onMouseDownCaptureAdaptChildMouseEventHandler<P, T>optional
onMouseEnterBarMouseEventoptional
The customized event handler of mouseenter on the bars in this group
onMouseLeaveBarMouseEventoptional
The customized event handler of mouseleave on the bars in this group
onMouseMoveBarMouseEventoptional
The customized event handler of mousemove on the bars in this group
onMouseMoveCaptureAdaptChildMouseEventHandler<P, T>optional
onMouseOutBarMouseEventoptional
The customized event handler of mouseout on the bars in this group
onMouseOutCaptureAdaptChildMouseEventHandler<P, T>optional
onMouseOverBarMouseEventoptional
The customized event handler of mouseover on the bars in this group
onMouseOverCaptureAdaptChildMouseEventHandler<P, T>optional
onMouseUpBarMouseEventoptional
The customized event handler of mouseup on the bars in this group
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