Recharts Patterns

Quick Guide: Recharts wraps D3 in composable React components for declarative charting. Each chart is composed from independent child components (XAxis, YAxis, Tooltip, Legend, CartesianGrid, data series). Use ResponsiveContainer or the responsive prop for adaptive sizing. Memoize data and callback props to avoid unnecessary recalculations. Custom tooltips use the content prop. In v3, accessibilityLayer defaults to true, and internal state is accessed via hooks, not cloned props.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST wrap charts in ResponsiveContainer or set the responsive prop for adaptive sizing -- charts without responsive handling render at fixed dimensions)

(You MUST memoize data arrays and callback functions passed as props -- unstable references cause Recharts to recalculate all data points)

(You MUST provide explicit width and height to chart components when NOT using ResponsiveContainer -- charts render nothing without dimensions)

(You MUST use the content prop on Tooltip for custom tooltips -- return HTML elements, NOT SVG elements)