Recharts React Library: Quick Charts Tutorial
Recharts is a React library that wraps D3 scales and SVG rendering into declarative, composable components. Instead of building line charts from scratch, you declare <LineChart>, <XAxis>, <YAxis>, and <Line>, then pass your data. Recharts handles scales, responsive sizing, and interactivity. It's the go-to library for most React dashboards in 2026 because it's fast to build with, accessible, and highly customizable.
What is Recharts and When to Use It?
Recharts is a composable charting library built on React components. You import chart containers (LineChart, BarChart, PieChart), axis components (XAxis, YAxis), and data renderers (Line, Bar, Pie), then compose them into a chart. Recharts handles the hard parts: computing scales, rendering SVG, managing responsive sizing.
Use Recharts when: you need a standard chart (bar, line, pie, scatter) and want it fast. Don't use Recharts when: you need a novel visualization or have 100k+ points (use Canvas then). Recharts is the "right tool for 90% of dashboards" philosophy.
Key stats: Recharts has 25k+ GitHub stars, 5M+ weekly npm downloads, and is maintained by maintainers from Alibaba Group (2026). It's battle-tested in production.
Setting Up Recharts
Install with npm:
npm install recharts
Recharts has zero external dependencies beyond React, making it lightweight. Bundle size is ~60 KB gzipped.
Building Your First Chart: A Simple Line Chart
Here's a complete line chart showing revenue over time:
import React from "react";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer
} from "recharts";
const data = [
{ month: "Jan", revenue: 4000, expenses: 2400 },
{ month: "Feb", revenue: 3000, expenses: 1398 },
{ month: "Mar", revenue: 2000, expenses: 9800 },
{ month: "Apr", revenue: 2780, expenses: 3908 },
{ month: "May", revenue: 1890, expenses: 4800 },
{ month: "Jun", revenue: 2390, expenses: 3800 }
];
export function RevenueChart() {
return (
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data} margin={{ top: 5, right: 30, left: 0, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="month" />
<YAxis />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey="revenue"
stroke="#8884d8"
activeDot={{ r: 8 }}
/>
<Line
type="monotone"
dataKey="expenses"
stroke="#82ca9d"
activeDot={{ r: 8 }}
/>
</LineChart>
</ResponsiveContainer>
);
}
This declares a responsive line chart with two series. Recharts handles:
- Scaling data to the viewport
- Rendering axes and grid
- Tooltip on hover
- Legend
- Responsiveness via
ResponsiveContainer
The dataKey prop tells Recharts which data property to render. type="monotone" smooths the line. activeDot customizes the hover point.
Building a Bar Chart with Custom Styling
Bar charts are equally simple. Here's a monthly sales bar chart:
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts";
const salesData = [
{ category: "Electronics", sales: 12000 },
{ category: "Clothing", sales: 8000 },
{ category: "Food", sales: 15000 },
{ category: "Books", sales: 5000 }
];
export function SalesBarChart() {
return (
<ResponsiveContainer width="100%" height={300}>
<BarChart data={salesData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="category" />
<YAxis />
<Tooltip
contentStyle={{ backgroundColor: "#f5f5f5", border: "1px solid #ccc" }}
formatter={(value) => `$${value.toLocaleString()}`}
/>
<Bar
dataKey="sales"
fill="#8884d8"
radius={[8, 8, 0, 0]}
isAnimationActive={true}
/>
</BarChart>
</ResponsiveContainer>
);
}
The radius prop rounds the bar corners. formatter in Tooltip formats the displayed value. isAnimationActive (default true) animates bars on mount.
Composing Complex Dashboards with Multiple Charts
Recharts charts are composable React components. Build dashboards by arranging them:
export function SalesDashboard({ data }) {
return (
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px" }}>
<div>
<h3>Revenue Trend</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data.revenue}>
<CartesianGrid />
<XAxis dataKey="date" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="amount" stroke="#8884d8" />
</LineChart>
</ResponsiveContainer>
</div>
<div>
<h3>Sales by Region</h3>
<ResponsiveContainer width="100%" height={300}>
<BarChart data={data.regions}>
<CartesianGrid />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Bar dataKey="sales" fill="#82ca9d" />
</BarChart>
</ResponsiveContainer>
</div>
<div style={{ gridColumn: "1 / -1" }}>
<h3>Market Share</h3>
<ResponsiveContainer width="100%" height={300}>
<PieChart>
<Pie
data={data.pie}
dataKey="value"
nameKey="name"
cx="50%"
cy="50%"
outerRadius={80}
label
/>
<Tooltip />
</PieChart>
</ResponsiveContainer>
</div>
</div>
);
}
This grid layout holds three charts: two in the first row, one spanning the second row. All are responsive.
Advanced Features: Legends, Filters, and Theming
Recharts supports rich interactivity. Here's a chart with legend-based filtering:
export function FilterableChart({ data }) {
const [visibleSeries, setVisibleSeries] = useState(["revenue", "expenses"]);
const handleLegendClick = (e) => {
const { dataKey } = e;
setVisibleSeries((prev) =>
prev.includes(dataKey)
? prev.filter((s) => s !== dataKey)
: [...prev, dataKey]
);
};
return (
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data}>
<CartesianGrid />
<XAxis dataKey="month" />
<YAxis />
<Tooltip />
<Legend onClick={handleLegendClick} />
{visibleSeries.includes("revenue") && (
<Line type="monotone" dataKey="revenue" stroke="#8884d8" />
)}
{visibleSeries.includes("expenses") && (
<Line type="monotone" dataKey="expenses" stroke="#82ca9d" />
)}
</LineChart>
</ResponsiveContainer>
);
}
Clicking a legend item toggles the series visibility. React state controls which lines render.
Recharts Styling and Custom Shapes
Recharts supports CSS classes and inline styles. You can also render custom shapes:
const CustomDot = (props) => {
const { cx, cy, fill } = props;
return (
<circle
cx={cx}
cy={cy}
r={5}
fill={fill}
style={{ transition: "r 0.2s" }}
/>
);
};
export function CustomShapeChart({ data }) {
return (
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data}>
<CartesianGrid />
<XAxis dataKey="month" />
<YAxis />
<Line
type="monotone"
dataKey="revenue"
stroke="#8884d8"
shape={<CustomDot />}
/>
</LineChart>
</ResponsiveContainer>
);
}
Pass a custom React component as the shape prop. Recharts calls it with cx, cy, and other position props, letting you render anything.
Key Takeaways
- Recharts wraps D3 scales and SVG into declarative React components, eliminating boilerplate.
- Use
ResponsiveContainerfor mobile-friendly, fluid-width charts. - Compose charts (line, bar, pie, scatter) using XML-like component syntax.
- Customize colors, animations, tooltips, and legends via props.
- Recharts handles scales, axes, and rendering; focus on data flow and interactivity.
Frequently Asked Questions
How do I connect Recharts to real API data?
Use useEffect to fetch data, then pass it as the data prop. Handle loading and error states in the same component:
export function LiveChart() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("/api/sales").then((r) => r.json()).then(setData);
}, []);
return data.length > 0 ? (
<LineChart data={data}>
{/* ... */}
</LineChart>
) : (
<p>Loading...</p>
);
}
Can I export Recharts as PNG or PDF?
Use the ref-based API to access the chart and serialize it. Libraries like html2canvas can then convert SVG to PNG. For PDFs, use jsPDF with Canvas rendering.
Does Recharts support 3D charts?
No, Recharts is 2D only. For 3D visualization, use Three.js or Babylon.js. Most business dashboards don't need 3D.
How do I handle timezone-aware dates in Recharts?
Recharts treats date objects as data values. Use a date library (date-fns, dayjs) to normalize dates before passing them:
const data = rawData.map((d) => ({
...d,
date: formatISO(parseISO(d.dateString))
}));
Is Recharts performant for large datasets?
Recharts (SVG-based) slows at 10k+ points. For 100k+ points, switch to Canvas or use data aggregation (sample every Nth point). Recharts is optimized for typical dashboards (hundreds to low thousands of data points).