Recharts

Overview

Recharts is the most widely adopted declarative chart library in the React ecosystem. With over 27,000 GitHub stars, it marries React's declarative component model with D3's battle-tested visualization algorithms.

Key Features

• Declarative React Components: Build line, bar, area, and pie charts with clean JSX tags (<LineChart>, <XAxis>).
• SVG Native: Lightweight vector graphics rendering with smooth responsive scaling and high resolution.
• Animated & Interactive: Built-in hover tooltips, animated transitions, and custom render props.
• Extensive Ecosystem: The standard charting foundation used by shadcn/ui and Tremor.

Installation & Quick Start

npm install recharts

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

export default function ChartDemo() {
  const data = [{ name: 'Jan', uv: 400 }, { name: 'Feb', uv: 700 }];
  return (
    <LineChart width={400} height={200} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="uv" stroke="#3b82f6" />
    </LineChart>
  );
}

Why Choose Recharts?

• Best for: Standard React dashboards, SaaS metrics, and business reports needing clean, responsive charts.
• Not suitable for: Complex 3D visualizations or millions of real-time streaming Canvas data points.