API

Charts

General Components

Cartesian Components

Polar Components

Shapes

Animation

Bar

Related Links

Parent Components

Bar consumes context provided by these components:

Child Components

Bar provides context for these components:

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

  • 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

    Examples:

  • animationEasing"ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear" | "spring" | EasingFunction | `cubic-bezier(${number},${number},${number},${number})`optional

    The type of easing function.

    DEFAULT: "ease"

  • animationInterpolateFnAnimationInterpolateFn<BarRectangleItem, CartesianLayout>optional

    Custom animation function for interpolating data items. When provided, this replaces the default animation interpolation.

    Available since Recharts 3.9

    Examples:

  • animationMatchBy"append" | "index" | AnimationMatchBy<BarRectangleItem>optional

    Strategy for matching previous items to next items during animation. Determines how Recharts pairs old data points with new data points to create smooth transitions.

    • matchAppend (default): match sequentially by index and treat newly appended items as new
    • matchByIndex: match by array position with proportional stretching
    • matchByDataKey('someKey'): match by a data key from the payload
    • Custom function (item, index) => key: match by the returned key

    DEFAULT: "append"

    Examples:

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

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

  • childrenReactNodeoptional

    Examples:

  • classNamestringoptional

  • dangerouslySetInnerHTMLObjectoptional

  • dataKeyTypedDataKey<DataPointType, DataValueType>optional

    The data that you provide via the data prop is an array of objects. Each object can have multiple properties, each representing a different data dimension. Use the dataKey prop to specify which property (or dimension) to use for this component.

    Typically, you will want to have one dataKey on the X axis, and different dataKey on the Y axis, where they extract different values from the same data objects.

    Decides how to extract the value 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.

    Examples:

  • formatterFormatteroptional

    Formats the value displayed in the tooltip for this Bar. When set, takes precedence over the formatter prop on the Tooltip component.

  • 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 will respect the user's prefers-reduced-motion system preference for accessibility.

    DEFAULT: "auto"

    Examples:

  • 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 SVG label element, such as <text> or <g>. HTML elements such as <div> are not valid inside the chart SVG and may trigger React DOM warnings.
    • function: a render function of custom label.

    DEFAULT: false

    FORMAT: 

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

    Examples:

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

    Examples:

  • 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. During animations, the function shape also receives animationElapsedTime, isAnimating, and isEntrance. By default, renders a rectangle.

    Examples:

  • stackIdnumber | stringoptional

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

    Examples:

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

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

    Available since Recharts 3.4

    DEFAULT: 300

    Examples: