charts

Wrap a BarChart component in ResponsiveContainer, pass a data array, and add XAxis, YAxis, CartesianGrid, Tooltip, and Bar elements. Set the Bar dataKey to your numeric field and use fill with a CSS variable for theming.

Recharts charts fail to render without a ResponsiveContainer wrapper or when the parent has no explicit height. Always wrap charts in ResponsiveContainer with width="100%" and a fixed height like 300, or give the parent div an explicit height.

Use a PieChart with a Pie element that has both innerRadius and outerRadius set, such as innerRadius={60} and outerRadius={100}. Map Cell components over your data to assign colors to each slice.

Pass HSL CSS variable strings directly to fill and stroke props, like fill="hsl(var(--primary))" or stroke="hsl(var(--border))". For tooltips, set contentStyle with backgroundColor using hsl(var(--card)) to match the theme.

Use the tickFormatter prop on XAxis or YAxis with a function that transforms each value. For currency use value => `$${value.toLocaleString()}`, and for dates use moment(value).format('MMM D').

Yes, recharts supports both. Grouped bars use multiple Bar elements with different dataKeys, while stacked bars add a shared stackId prop like stackId="a" to each Bar so values accumulate vertically.