BarChart

API reference for the BarChart component

BarChart renders a chart with data represented as rectangular bars.

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  { name: 'Mar', value: 600 },
  { name: 'Apr', value: 800 },
];

<BarChart width={600} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="value" fill="#8884d8" />
</BarChart>

Props

data · array

The source data. Each element should be an object.

width · number | string

The width of chart container. Can be a number or a percent string like “100%”.

height · number | string

The height of chart container. Can be a number or a percent string like “100%”.

layout · 'horizontal' | 'vertical' · default: "horizontal"

The layout of chart defines the orientation of axes, graphical items, and tooltip.

margin · object · default: "{top: 5, right: 5, bottom: 5, left: 5}"

Empty space around the container.

Show properties

top · number

right · number

bottom · number

left · number

barCategoryGap · number | string · default: "10%"

The gap between two bar categories, which can be a percent value or a fixed value.

barGap · number | string · default: "4"

The gap between two bars in the same category.

barSize · number | string

The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.

maxBarSize · number

The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.

stackOffset · 'sign' | 'expand' | 'none' | 'wiggle' | 'silhouette' | 'positive' · default: "none"

The type of offset function used to generate the lower and upper values in the series array. Only applicable for stacked Area or Bar charts.

reverseStackOrder · boolean · default: "false"

If false, stacked items will be rendered left to right. If true, stacked items will be rendered right to left.

syncId · number | string

Charts with the same syncId will synchronize Tooltip and Brush events.

syncMethod · 'index' | 'value' | function · default: "index"

Customize how the charts will synchronize tooltips and brushes.

accessibilityLayer · boolean · default: "true"

Turn on accessibility support for keyboard-only and screen reader users.

responsive · boolean · default: "false"

If true, then it will listen to container size changes and adapt the SVG chart accordingly.

className · string

CSS class name for the chart container.

style · CSSProperties

Inline CSS styles for the chart container.

id · string

The unique id of chart.

throttleDelay · number | 'raf' · default: "'raf'"

Decides the time interval to throttle events. Number in milliseconds or ‘raf’ for requestAnimationFrame.

onClick · function

The customized event handler of click in this chart.

onMouseEnter · function

The customized event handler of mouseenter in this chart.

onMouseMove · function

The customized event handler of mousemove in this chart.

onMouseLeave · function

The customized event handler of mouseleave in this chart.