const data = [ { name: 'Jan', sales: 4000, profit: 2400 }, { name: 'Feb', sales: 3000, profit: 1398 }, { name: 'Mar', sales: 2000, profit: 9800 }, ];

Core Concepts

Data Format

Recharts expects data as an array of objects. Each object represents a data point:

const data = [
  { month: 'Jan', revenue: 4000, expenses: 2400 },
  { month: 'Feb', revenue: 3000, expenses: 1398 },
];

Use dataKey props to map object properties to chart components:

dataKey="revenue" - maps to the revenue property
dataKey={(entry) => entry.revenue - entry.expenses} - function for computed values

Component Composition

Charts are built by nesting specialized components:

Sizing: Use the responsive prop (v3.3+), ResponsiveContainer wrapper, or set width/height directly

Chart types (choose one):

LineChart - Line and area visualizations
BarChart - Bar and column charts
AreaChart - Stacked and filled area charts
PieChart - Pie and donut charts
ScatterChart - Scatter plots and bubble charts
ComposedChart - Mixed chart types
RadarChart - Radar/spider charts
RadialBarChart - Circular bar charts

Common child components:

XAxis / YAxis - Axis configuration
CartesianGrid - Grid lines
Tooltip - Hover information
Legend - Series identification
Line / Bar / Area / Pie - Data series visualization

Chart Patterns by Type

Line Charts

<LineChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} dot={{ r: 4 }} />
</LineChart>

Key props:

type: "monotone" (smooth), "linear", "step", "natural"
stroke: line color
strokeWidth: line thickness
dot: point styling (set to false to hide)
activeDot: hovered point styling
connectNulls: true to connect gaps

Area Charts

<AreaChart data={data}>
  <defs>
    <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
  </defs>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Area type="monotone" dataKey="value" stroke="#8884d8" fillOpacity={1} fill="url(#colorValue)" />
</AreaChart>

Stacked areas:

<Area type="monotone" dataKey="sales" stackId="1" stroke="#8884d8" fill="#8884d8" />
<Area type="monotone" dataKey="profit" stackId="1" stroke="#82ca9d" fill="#82ca9d" />

Bar Charts

<BarChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Legend />
  <Bar dataKey="sales" fill="#8884d8" radius={[4, 4, 0, 0]} />
  <Bar dataKey="profit" fill="#82ca9d" radius={[4, 4, 0, 0]} />
</BarChart>

Key props:

fill: bar color
radius: rounded corners [topLeft, topRight, bottomRight, bottomLeft] or single number for all corners
barSize: fixed bar width
stackId: group bars into stacks
shape: custom bar shape (function or element)

Stacked bars:

<Bar dataKey="sales" stackId="a" fill="#8884d8" />
<Bar dataKey="profit" stackId="a" fill="#82ca9d" />

Rounded stacked bars (use BarStack to round the whole stack):

import { BarStack } from 'recharts';

<BarChart data={data}>
  <BarStack stackId="a" radius={[4, 4, 0, 0]}>
    <Bar dataKey="sales" fill="#8884d8" />
    <Bar dataKey="profit" fill="#82ca9d" />
  </BarStack>
</BarChart>

Pie Charts

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

<PieChart>
  <Pie
    data={data}
    dataKey="value"
    nameKey="name"
    cx="50%"
    cy="50%"
    innerRadius={60}
    outerRadius={80}
    paddingAngle={5}
    shape={(props) => <Sector {...props} fill={COLORS[props.index % COLORS.length]} />}
  />
  <Tooltip />
  <Legend />
</PieChart>

Key props:

innerRadius: creates donut chart when > 0
outerRadius: pie size
paddingAngle: gap between slices
startAngle / endAngle: partial pie (default: 0 to 360)
label: shows values on slices
shape: custom render for each slice (replaces deprecated Cell component)

Scatter Charts

<ScatterChart>
  <XAxis type="number" dataKey="x" name="X Axis" />
  <YAxis type="number" dataKey="y" name="Y Axis" />
  <CartesianGrid />
  <Tooltip cursor={{ strokeDasharray: '3 3' }} />
  <Scatter name="Series A" data={data} fill="#8884d8" />
</ScatterChart>

Composed Charts

Mix multiple chart types:

<ComposedChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid stroke="#f5f5f5" />
  <Tooltip />
  <Legend />
  <Area type="monotone" dataKey="total" fill="#8884d8" stroke="#8884d8" />
  <Bar dataKey="sales" barSize={20} fill="#413ea0" />
  <Line type="monotone" dataKey="profit" stroke="#ff7300" />
</ComposedChart>

Responsive Sizing

Option 1: `responsive` prop (Recharts 3.3+, recommended)

Set responsive on the chart itself. Uses standard CSS sizing rules:

<LineChart data={data} width="100%" height={300} responsive>
  {/* chart components */}
</LineChart>

Works with flexbox and CSS grid layouts. Also supports CSS style props:

<LineChart data={data} responsive style={{ maxWidth: 800, width: '100%', aspectRatio: '16/9' }}>
  {/* chart components */}
</LineChart>

Option 2: `ResponsiveContainer` (older versions)

For Recharts < 3.3, wrap chart in ResponsiveContainer:

<ResponsiveContainer width="100%" height={300}>
  <LineChart data={data}>
    {/* chart components */}
  </LineChart>
</ResponsiveContainer>

Critical: ResponsiveContainer must have a parent with defined dimensions. Height must be a number, not a percentage.

Static sizing

Set width and height directly as pixels or percentages:

<LineChart data={data} width={600} height={300}>
  {/* chart components */}
</LineChart>

Axes Configuration

XAxis / YAxis Props

<XAxis 
  dataKey="name"           // property to display
  type="category"          // "category" or "number"
  domain={[0, 'dataMax']}    // axis range
  tick={{ fill: '#666' }}    // tick styling
  tickFormatter={(value) => `$${value}`}  // format labels
  angle={-45}               // rotate labels
  textAnchor="end"         // text alignment
  height={60}              // extra space for labels
/>

Axis Types

Category axis (default for X): Treats values as discrete labels
Number axis (default for Y): Treats values as continuous scale

Custom Domains

Control axis range:

// Fixed range
<YAxis domain={[0, 100]} />

// Auto with padding
<YAxis domain={[0, 'auto']} />

// Data-based with overflow allowed
<YAxis domain={[0, 'dataMax + 100']} allowDataOverflow />

// Logarithmic scale
<YAxis type="number" scale="log" domain={['auto', 'auto']} />

Customization

Custom Tooltip

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label}`}</p>
        <p className="intro">{`Sales: ${payload[0].value}`}</p>
        <p className="desc">Additional info...</p>
      </div>
    );
  }
  return null;
};

<Tooltip content={<CustomTooltip />} />

Custom Legend

const CustomLegend = ({ payload }) => (
  <ul>
    {payload.map((entry, index) => (
      <li key={`item-${index}`} style={{ color: entry.color }}>
        {entry.value}
      </li>
    ))}
  </ul>
);

<Legend content={<CustomLegend />} />

Custom Shapes

Custom bar shape:

const CustomBar = (props) => {
  const { x, y, width, height, fill } = props;
  return <path d={`M${x},${y} ...`} fill={fill} />;
};

<Bar shape={<CustomBar />} dataKey="sales" />
// OR
<Bar shape={(props) => <CustomBar {...props} />} dataKey="sales" />

Custom Labels

<Line 
  dataKey="sales" 
  label={{ position: 'top', fill: '#666', fontSize: 12 }}
/>

// Custom label component
<Line 
  dataKey="sales" 
  label={<CustomLabel />}
/>

Styling

Chart styles:

<LineChart style={{ backgroundColor: '#f5f5f5' }}>

Axis styling:

<XAxis 
  axisLine={{ stroke: '#666' }}
  tickLine={{ stroke: '#666' }}
  tick={{ fill: '#666', fontSize: 12 }}
/>

Grid styling:

<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />

Interactions

Active Elements and Interaction Control

The Tooltip component controls active element highlighting. Do not use activeIndex prop (removed in v3).

Tooltip interaction props:

defaultIndex: Sets initial highlighted item on render
active: If true, tooltip remains active after interaction ends
trigger: "hover" (default) or "click" for click-based interaction
content: Custom content or () => null to hide tooltip text while keeping highlight
cursor: Visual cursor in plot area, set to false to hide

{/* Click-based interaction with hidden tooltip text */}
<Tooltip trigger="click" content={() => null} cursor={false} />

{/* Default highlighted item on render */}
<Tooltip defaultIndex={2} />

Click Events

<LineChart onClick={(e) => console.log(e)}>
  <Bar 
    dataKey="sales" 
    onClick={(data, index) => console.log('Bar clicked:', data)}
  />
</LineChart>

Synchronized Charts

Link multiple charts with syncId:

<LineChart data={data1} syncId="anyId">
  {/* components */}
</LineChart>

<LineChart data={data2} syncId="anyId">
  {/* components - tooltips synchronize */}
</LineChart>

Brush for Zooming

<LineChart data={data}>
  {/* other components */}
  <Brush dataKey="name" height={30} stroke="#8884d8" />
</LineChart>

Performance Optimization

1. Stable References

Use useMemo and useCallback for props:

// BAD - new function on every render
<Line dataKey={(entry) => entry.sales * 2} />

// GOOD - stable reference
const dataKey = useCallback((entry) => entry.sales * 2, []);
<Line dataKey={dataKey} />

2. Memoize Components

const MemoizedChart = React.memo(({ data }) => (
  <LineChart data={data}>
    {/* components */}
  </LineChart>
));

3. Isolate Changing Components

Separate frequently updating components:

const Chart = () => {
  const [hoveredData, setHoveredData] = useState(null);
  
  return (
    <LineChart>
      {/* Static components */}
      <Line dataKey="sales" />
      
      {/* Dynamic overlay */}
      <ReferenceLine x={hoveredData?.x} stroke="red" />
    </LineChart>
  );
};

4. Debounce Events

import { useDebouncedCallback } from 'use-debounce';

const handleMouseMove = useDebouncedCallback((e) => {
  setPosition(e.activeLabel);
}, 10);

<LineChart onMouseMove={handleMouseMove}>

5. Reduce Data Points

For large datasets, consider aggregation:

// Bin data before rendering
const binnedData = useMemo(() => {
  return d3.bin().value(d => d.x)(rawData);
}, [rawData]);

Accessibility

Recharts includes built-in accessibility support:

<LineChart accessibilityLayer={true}>
  <Line dataKey="sales" name="Monthly Sales" />
</LineChart>

Accessibility is enabled by default. The chart is keyboard navigable and screen reader compatible.

ARIA props:

<LineChart role="img" aria-label="Sales chart showing monthly revenue">

Common Patterns

Multiple Data Series

<LineChart data={data}>
  <XAxis dataKey="month" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="productA" name="Product A" stroke="#8884d8" />
  <Line type="monotone" dataKey="productB" name="Product B" stroke="#82ca9d" />
  <Line type="monotone" dataKey="productC" name="Product C" stroke="#ffc658" />
</LineChart>

Horizontal Bar Chart

<BarChart layout="vertical" data={data}>
  <XAxis type="number" />
  <YAxis type="category" dataKey="name" />
  <Bar dataKey="value" />
</BarChart>

Donut Chart

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

<PieChart>
  <Pie
    data={data}
    innerRadius={60}
    outerRadius={80}
    paddingAngle={5}
    dataKey="value"
    shape={(props) => <Sector {...props} fill={COLORS[props.index % COLORS.length]} />}
  />
</PieChart>

Note: Cell component is deprecated and will be removed in Recharts 4.0. Use the shape prop on Bar, Pie, Scatter, etc. instead.

Reference Lines/Areas

<LineChart data={data}>
  {/* ... */}
  <ReferenceLine y={5000} label="Target" stroke="red" strokeDasharray="3 3" />
  <ReferenceArea x1="Jan" x2="Mar" fill="#8884d8" fillOpacity={0.1} />
</LineChart>

Error Bars

<ScatterChart>
  <Scatter data={data}>
    <ErrorBar dataKey="errorX" width={4} strokeWidth={2} />
    <ErrorBar dataKey="errorY" width={4} strokeWidth={2} direction="y" />
  </Scatter>
</ScatterChart>

Integration Patterns

With State Management

const SalesChart = () => {
  const [timeRange, setTimeRange] = useState('month');
  const data = useSelector(state => selectSalesData(state, timeRange));
  
  return (
    <ResponsiveContainer>
      <LineChart data={data}>
        {/* components */}
      </LineChart>
    </ResponsiveContainer>
  );
};

With Real-time Data

const RealtimeChart = () => {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setData(prev => [...prev.slice(-20), newDataPoint]);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  
  return (
    <LineChart data={data}>
      <XAxis dataKey="time" />
      <YAxis domain={['auto', 'auto']} />
      <Line type="monotone" dataKey="value" isAnimationActive={false} />
    </LineChart>
  );
};

Z-Index and Layering (v3.4+)

Components render in a default order (grid < axes < chart elements < tooltip/legend). Override with zIndex prop:

<Line dataKey="sales" zIndex={10} />  // Render on top

For components without direct zIndex support, wrap in ZIndexLayer:

import { ZIndexLayer } from 'recharts';

<ZIndexLayer zIndex={5}>
  <CustomAnnotation />
</ZIndexLayer>

Coordinate Systems

Recharts has three coordinate systems:

Domain coordinates - Data values (e.g., x="March", y=5000). Used by ReferenceLine, ReferenceDot, ReferenceArea. Automatically converted to pixels.
Pixel coordinates - Positions relative to chart viewBox. Used for custom SVG shapes. Access via usePlotArea(), useOffset(), useChartWidth() hooks.
Mouse event coordinates - Browser viewport coordinates. Convert with getRelativeCoordinate(event, element).

Converting between systems:

Data to pixels: useXAxisScale(), useYAxisScale()
Pixels to data: useXAxisInverseScale(), useYAxisInverseScale()

Troubleshooting

Chart Not Rendering

Ensure ResponsiveContainer has a parent with defined dimensions
Check that height is a number (not percentage in ResponsiveContainer)
Verify data is an array of objects

Tooltip Not Showing

Ensure Tooltip component is included
Check that dataKey values exist in data objects

Axis Labels Overlapping

Rotate labels: <XAxis angle={-45} textAnchor="end" height={80} />
Use interval: <XAxis interval={0} /> (0 = show all, 'preserveStartEnd' = auto)

Core Concepts

Data Format

Component Composition

Chart Patterns by Type

Line Charts

Area Charts

Bar Charts

Pie Charts

Scatter Charts

Composed Charts

Responsive Sizing

Option 1: responsive prop (Recharts 3.3+, recommended)

Option 2: ResponsiveContainer (older versions)

Static sizing

Axes Configuration

XAxis / YAxis Props

Axis Types

Custom Domains

Customization

Custom Tooltip

Custom Legend

Custom Shapes

Custom Labels

Styling

Interactions

Active Elements and Interaction Control

Click Events

Synchronized Charts

Brush for Zooming

Performance Optimization

1. Stable References

2. Memoize Components

3. Isolate Changing Components

4. Debounce Events

5. Reduce Data Points

Accessibility

Common Patterns

Multiple Data Series

Horizontal Bar Chart

Donut Chart

Reference Lines/Areas

Error Bars

Integration Patterns

With State Management

With Real-time Data

Z-Index and Layering (v3.4+)

Coordinate Systems

Troubleshooting

Chart Not Rendering

Tooltip Not Showing

Axis Labels Overlapping

Animation Issues

Resources

References

External Resources

Option 1: `responsive` prop (Recharts 3.3+, recommended)

Option 2: `ResponsiveContainer` (older versions)

recharts

Recharts

Quick Start

1. Install Recharts

2. Basic Chart Structure

More from ansanabria/skills

mercadopago