recharts

Composable charting library for React built on D3 — declarative chart components that are easy to customize and animate.

recharts

React

Composable charting library for React built on D3 — declarative chart components that are easy to customize and animate.

npm GitHub Docs

Fit

Bundle (gzip)

145.1 kB

554.2 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

D3 is powerful but requires deep knowledge of SVG and imperative DOM manipulation. Other chart libraries generate unmodifiable SVGs and don't integrate naturally with React's data flow.

What It Does

Recharts wraps D3's math in React components. You compose a chart from <LineChart>, <Bar>, <XAxis>, <Tooltip>, etc. — all accepting plain data arrays and standard React props. Responsive containers, custom tooltips, and click handlers work like any other React component.

Installation

bash

npm install recharts

Usage Example

tsx

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

const data = [
  { month: 'Jan', revenue: 4000 },
  { month: 'Feb', revenue: 3000 },
  { month: 'Mar', revenue: 6000 },
];

export function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="revenue" stroke="#8884d8" strokeWidth={2} />
      </LineChart>
    </ResponsiveContainer>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.