npmBeginner-friendly

recharts

Composable charting components for React — build line, bar, pie, and area charts from SVG with a declarative JSX API.

chartsvisualizationreactsvgdata

The Problem

You need standard charts (line, bar, pie) in a React app. d3 is too complex. Chart.js requires imperative setup and doesn't integrate with React state naturally. You want JSX components that accept your data arrays directly.

Mental Model

Recharts uses React's composability. A chart is a container (LineChart, BarChart) that accepts component children: <Line>, <Bar>, <XAxis>, <YAxis>, <Tooltip>, <Legend>. Pass your data array to the container, and specify which data key each series maps to. React handles re-renders.

60-second start

Responsive line chart with tooltip

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { month: 'Jan', revenue: 4200 },
  { month: 'Feb', revenue: 5800 },
  { month: 'Mar', revenue: 4900 },
  { month: 'Apr', revenue: 7200 },
];

export function RevenueChart() {
  return (
    <ResponsiveContainer width='100%' height={300}>
      <LineChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
        <CartesianGrid strokeDasharray='3 3' stroke='#f0f0f0' />
        <XAxis dataKey='month' />
        <YAxis tickFormatter={(v) => `$${v.toLocaleString()}`} />
        <Tooltip formatter={(v: number) => [`$${v.toLocaleString()}`, 'Revenue']} />
        <Line type='monotone' dataKey='revenue' stroke='#6366f1' strokeWidth={2} dot={false} />
      </LineChart>
    </ResponsiveContainer>
  );
}

Use it when

Dashboards, analytics pages, standard business charts in React apps, any time you want good-looking charts without a steep learning curve.

Skip it when

Custom/unusual visualizations (use d3), non-React projects (use Chart.js), performance-critical charts with 100k+ data points (Canvas-based charts are faster).

Alternatives

chart.jsCanvas-based, framework-agnostic, fast with large datasets

victoryAlso React-first, more customizable but more complex

d3Full control over every pixel, steeper learning curve

Ready to explore the full API?

See every class, function, and relationship in an interactive graph.