Recharts Tutorial for Beginners — Everything You Need to Know

What is Recharts?

Recharts is a composable charting library built on React and D3.js. It has over 23,000 GitHub stars and is used by companies like Vercel, Linear, and Stripe in their dashboards.

The key idea: charts are composed by nesting React components. A BarChart contains Bar, XAxis, YAxis, Tooltip components — each handling one aspect of the chart.

Installation

npm install recharts
# or
yarn add recharts
# or
pnpm add recharts

Recharts requires React 16.8+ (hooks support). If you're using Next.js, always add 'use client' to chart components.

The Four Core Concepts

1. ResponsiveContainer

Every Recharts chart should be wrapped in ResponsiveContainer. It makes charts responsive by taking the size of the parent element.

<ResponsiveContainer width="100%" height={300}>
  {/* chart goes here */}
</ResponsiveContainer>

2. Data Format

All Recharts charts expect an array of objects:

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

3. dataKey

The dataKey prop tells the chart which property from your data objects to use. For XAxis it's usually the label field; for Bar/Line it's the numeric field.

4. Composability

Add or remove components to customize the chart. Want to add a legend? Add <Legend />. Want grid lines? Add <CartesianGrid />.

BarChart Example

'use client';
import {
  BarChart, Bar, XAxis, YAxis,
  CartesianGrid, Tooltip, Legend, ResponsiveContainer
} from 'recharts';

const data = [
  { name: 'Mon', sales: 40 }, { name: 'Tue', sales: 65 },
  { name: 'Wed', sales: 50 }, { name: 'Thu', sales: 90 },
  { name: 'Fri', sales: 75 },
];

export default function SalesChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="sales" fill="#00e5a0" radius={[4,4,0,0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}

LineChart Example

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

export default function TrendChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="sales" stroke="#4a9eff" strokeWidth={2} dot={{ r: 4 }} />
      </LineChart>
    </ResponsiveContainer>
  );
}

PieChart Example

'use client';
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';

const pieData = [
  { name: 'Direct', value: 40 },
  { name: 'Organic', value: 30 },
  { name: 'Social', value: 20 },
  { name: 'Other', value: 10 },
];
const COLORS = ['#00e5a0', '#4a9eff', '#ff6b6b', '#ffd166'];

export default function TrafficChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <PieChart>
        <Pie data={pieData} dataKey="value" cx="50%" cy="50%" outerRadius={100}>
          {pieData.map((_, i) => <Cell key={i} fill={COLORS[i]} />)}
        </Pie>
        <Tooltip />
      </PieChart>
    </ResponsiveContainer>
  );
}

Common Props Reference