Recharts Patterns

Quick Guide: A Recharts chart is an assembly of independent child components — XAxis, YAxis, Tooltip, Legend, CartesianGrid and one or more data series — rather than one component taking a config object. Features are added and removed by adding and removing children. Charts render nothing without dimensions, so every chart needs ResponsiveContainer, the responsive prop, or explicit width/height. Data and callback props are compared by reference, so an inline .map() recomputes the whole chart every render. In v3 accessibilityLayer defaults to true and internal state is read through hooks rather than cloned props.

Detailed Resources:

• examples/core.md — line, bar, area and pie charts, responsive sizing, custom tooltips, multi-axis, stacking
• examples/advanced.md — ComposedChart, Brush, reference lines, synchronized charts, real-time updates, scatter shapes, radar
• reference.md — chart type table and prop cheat sheets for every component

<critical_requirements>

Before writing Recharts code

Give every chart dimensions — ResponsiveContainer, the responsive prop, or explicit width and height. A chart with none renders an empty SVG and no error.

Give ResponsiveContainer a parent with a resolved height. It measures its parent, so a parent at height: 0 or display: none measures zero and the chart never appears.