Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt

Use this file to discover all available pages before exploring further.

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