Recharts

Bar

Parent Components

Child Components

Properties

dataKeyString | Number | Function
The key of a group of data which should be unique in an area chart.
xAxisIdString | Number
The id of x-axis which is corresponding to the data.
DEFAULT: 0
yAxisIdString | Number
The id of y-axis which is corresponding to the data.
DEFAULT: 0
legendType'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'optional
The type of icon in legend. If set to 'none', no legend item will be rendered.
DEFAULT: 'rect'
labelBoolean | Object | ReactElement | Function
If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If object set, labels will be drawn which have the props merged by the internal calculated props and the option. If ReactElement set, the option can be the custom label element. If set a function, the function will be called to render customized label.
DEFAULT: false
FORMAT:
```
<Bar dataKey="value" label />
<Bar dataKey="value" label={{ fill: 'red', fontSize: 20 }} />
<Bar dataKey="value" label={<CustomizedLabel />} />
```
barSizeNumber | Percentageoptional
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.
maxBarSizeNumber
The maximum width of bar in a horizontal BarChart, or maximum height in a vertical BarChart.
DEFAULT:
minPointSizeNumber | Function
The minimal height of a bar in a horizontal BarChart, or the minimal width of a bar in a vertical BarChart. 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:
- A BarChart with non-zero minPointSize
backgroundBoolean | Object | ReactElement | Function
If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If object set, background of bars will be drawn which have the props merged by the internal calculated props and the option. If ReactElement set, the option can be the custom background element. If set a function, the function will be called to render customized background.
DEFAULT: false
Examples:
- BarChart has background
shapeReactElement | Functionoptional
If set a ReactElement, the shape of bar can be customized. If set a function, the function will be called to render customized shape.
FORMAT:
```
<Bar dataKey="value" shape={<CustomizedShape/>}/>
<Bar dataKey="value" shape={renderShape}/>
```
Examples:
- A bar chart with customized shape
activeBarBoolean | Object | ReactElement | Functionoptional
The active bar is shown when a user enters a bar chart and this chart has tooltip. If set to false, no active bar will be drawn. If set to true, active bar will be drawn with the props calculated internally. If passed an object, active bar will be drawn, and the internally calculated props will be merged with the key value pairs of the passed object. If passed a ReactElement, the option can be the custom active bar element. If passed a function, the function will be called to render a customized active bar.
DEFAULT: true
FORMAT:
```
<Bar dataKey="value" activeBar={false} />
<Bar dataKey="value" activeBar={{ stroke: 'red', strokeWidth: 2 }} />
<Bar dataKey="value" activeBar={<CustomizedBar />} />
<Bar dataKey="value" activeBar={renderBar} />
```
Examples:
- A bar chart with active bar
stackIdString | Numberoptional
The stack id of bar, when two bars have the same value axis and same stackId, then the two bars are stacked in order.
FORMAT:
```
<BarChart data={data} width={400} height={300}>
  <Bar stackId="pv" dataKey="pv01" />
  <Bar stackId="pv" dataKey="pv02" />
  <Bar stackId="uv" dataKey="uv01" />
  <Bar stackId="uv" dataKey="uv02" />
</BarChart>
```
Examples:
- A stacked bar chart
- A bar chart with stacked bars and unstacked bars
unitString | Numberoptional
The unit of data. This option will be used in tooltip.
nameString | Numberoptional
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.
isAnimationActiveBoolean
If set false, animation of bar will be disabled.
DEFAULT: true in CSR, and false in SSR
animationBeginNumber
Specifies when the animation should begin, the unit of this option is ms.
DEFAULT: 0
animationDurationNumber
Specifies the duration of animation, the unit of this option is ms.
DEFAULT: 1500
animationEasing'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
The type of easing function.
DEFAULT: 'ease'
idStringoptional
The unique id of this component, which will be used to generate unique clip path id internally. This props is suggested to be set in SSR.
onAnimationStartFunctionoptional
The customized event handler of animation start
onAnimationEndFunctionoptional
The customized event handler of animation end
onClickFunctionoptional
The customized event handler of click on the bars in this group
Examples:
- A BarChart with customized click event handler
onMouseDownFunctionoptional
The customized event handler of mousedown on the bars in this group
onMouseUpFunctionoptional
The customized event handler of mouseup on the bars in this group
onMouseMoveFunctionoptional
The customized event handler of mousemove on the bars in this group
onMouseOverFunctionoptional
The customized event handler of mouseover on the bars in this group
onMouseOutFunctionoptional
The customized event handler of mouseout on the bars in this group
onMouseEnterFunctionoptional
The customized event handler of mouseenter on the bars in this group
onMouseLeaveFunctionoptional
The customized event handler of mouseleave on the bars in this group