Bar

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: false

  FORMAT:

  <Bar activeBar={{ fill: 'red' }} />
  <Bar activeBar={CustomActiveBarFn} />

  Examples:

  • activeBar example
  • Ranged Stacked Bar Chart
  • Timeline

• animationBeginnumberoptional

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

  DEFAULT: 0

• animationDurationnumberoptional

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

  DEFAULT: 400

• animationEasing(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: false

  Examples:

  • BarChart with background example
  • Stacked Bar Chart

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

  Examples:

  • Line Bar Area Composed Chart
  • Same Data Composed Chart
  • Vertical Composed Chart
  • Composed Chart With Axis Labels
  • Custom Content Of Tooltip
  • Composed Responsive Container

• childrenReactNodeoptional

  Examples:

  • Custom Shape Bar Chart
  • Bar Chart With Min Height
  • Candlestick

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

  Examples:

  • Tiny Bar Chart
  • Simple Bar Chart
  • Stacked Bar Chart
  • Mix Bar Chart
  • Custom Shape Bar Chart
  • Positive and Negative Bar Chart
  • Brush Bar Chart
  • Bar Chart With Customized Event
  • Bar Chart With Min Height
  • Bar Chart Stacked By Sign

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

  DEFAULT: false

• idstringoptional

  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"

  Examples:

  • Ranged Stacked Bar Chart
  • Custom Content Of Tooltip

• 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: false

  FORMAT:

  <Bar label />
  <Bar label={{ position: 'top', fontSize: 20 }} />
  <Bar label={CustomizedLabelFn} />

  Examples:

  • Population Pyramid

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

  • Ranged Stacked Bar Chart

• 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: 0

  Examples:

  • Chart with min bar height

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

  • Population Pyramid

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

  Examples:

  • Guide: Rounded bar corners
  • Simple Bar Chart
  • Population Pyramid
  • Timeline

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

  Examples:

  • Custom shape bar chart example
  • Bar Chart With Customized Event
  • Timeline
  • Candlestick

• stackIdnumber | stringoptional

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

  Examples:

  • Stacked bar chart example
  • Chart with both stacked and non-stacked bars
  • BarStack
  • Bar Chart Stacked By Sign
  • Population Pyramid
  • Timeline

• 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: 0

• yAxisIdnumber | stringoptional

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

  DEFAULT: 0

  Examples:

  • Biaxial Bar Chart

• 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: 300

  Examples:

  • Z-Index and layers guide

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

  • Chart with customized event example

• 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