Recharts

Recharts is a declarative charting library built with React and D3, boasting over 26,000 GitHub stars. It enables simple data visualization through React component composition with native SVG support. The library provides various chart types including LineChart, BarChart, and PieChart with minimal dependencies.

chart

chartdata-visualizationsvgd3dashboard

🎮 Playground

import React, { useState } from 'react';
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Area,
  AreaChart,
} from 'recharts';

const salesData = [
  { month: 'Jan', sales: 4000, revenue: 2400, profit: 1200 },
  { month: 'Feb', sales: 3000, revenue: 1398, profit: 900 },
  { month: 'Mar', sales: 2000, revenue: 9800, profit: 1800 },
  { month: 'Apr', sales: 2780, revenue: 3908, profit: 1500 },
  { month: 'May', sales: 1890, revenue: 4800, profit: 2100 },
  { month: 'Jun', sales: 2390, revenue: 3800, profit: 1700 },
  { month: 'Jul', sales: 3490, revenue: 4300, profit: 2000 },
];

const pieData = [
  { name: 'Desktop', value: 400, color: '#8884d8' },
  { name: 'Mobile', value: 300, color: '#82ca9d' },
  { name: 'Tablet', value: 200, color: '#ffc658' },
  { name: 'Other', value: 100, color: '#ff7c7c' },
];

type ChartType = 'line' | 'bar' | 'area' | 'pie';

export default function App() {
  const [chartType, setChartType] = useState<ChartType>('line');
  const [showGrid, setShowGrid] = useState(true);
  const [animationActive, setAnimationActive] = useState(true);

  const renderChart = () => {
    switch (chartType) {
      case 'line':
        return (
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={salesData}>
              {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />}
              <XAxis dataKey="month" stroke="#666" />
              <YAxis stroke="#666" />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#fff',
                  border: '1px solid #ccc',
                  borderRadius: '8px',
                }}
              />
              <Legend />
              <Line
                type="monotone"
                dataKey="sales"
                stroke="#8884d8"
                strokeWidth={2}
                dot={{ fill: '#8884d8', strokeWidth: 2 }}
                activeDot={{ r: 8 }}
                isAnimationActive={animationActive}
              />
              <Line
                type="monotone"
                dataKey="revenue"
                stroke="#82ca9d"
                strokeWidth={2}
                dot={{ fill: '#82ca9d', strokeWidth: 2 }}
                isAnimationActive={animationActive}
              />
            </LineChart>
          </ResponsiveContainer>
        );

      case 'bar':
        return (
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={salesData}>
              {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />}
              <XAxis dataKey="month" stroke="#666" />
              <YAxis stroke="#666" />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#fff',
                  border: '1px solid #ccc',
                  borderRadius: '8px',
                }}
              />
              <Legend />
              <Bar
                dataKey="sales"
                fill="#8884d8"
                radius={[4, 4, 0, 0]}
                isAnimationActive={animationActive}
              />
              <Bar
                dataKey="profit"
                fill="#82ca9d"
                radius={[4, 4, 0, 0]}
                isAnimationActive={animationActive}
              />
            </BarChart>
          </ResponsiveContainer>
        );

      case 'area':
        return (
          <ResponsiveContainer width="100%" height={300}>
            <AreaChart data={salesData}>
              {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />}
              <XAxis dataKey="month" stroke="#666" />
              <YAxis stroke="#666" />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#fff',
                  border: '1px solid #ccc',
                  borderRadius: '8px',
                }}
              />
              <Legend />
              <Area
                type="monotone"
                dataKey="revenue"
                stackId="1"
                stroke="#8884d8"
                fill="#8884d8"
                fillOpacity={0.6}
                isAnimationActive={animationActive}
              />
              <Area
                type="monotone"
                dataKey="profit"
                stackId="1"
                stroke="#82ca9d"
                fill="#82ca9d"
                fillOpacity={0.6}
                isAnimationActive={animationActive}
              />
            </AreaChart>
          </ResponsiveContainer>
        );

      case 'pie':
        return (
          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie
                data={pieData}
                cx="50%"
                cy="50%"
                innerRadius={60}
                outerRadius={100}
                paddingAngle={5}
                dataKey="value"
                label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                isAnimationActive={animationActive}
              >
                {pieData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        );
    }
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>
        <span style={styles.icon}>📊</span> Recharts Demo
      </h1>
      <p style={styles.subtitle}>Interactive charting library for React</p>

      <div style={styles.controls}>
        <div style={styles.buttonGroup}>
          {(['line', 'bar', 'area', 'pie'] as ChartType[]).map((type) => (
            <button
              key={type}
              onClick={() => setChartType(type)}
              style={{
                ...styles.button,
                ...(chartType === type ? styles.buttonActive : {}),
              }}
            >
              {type.charAt(0).toUpperCase() + type.slice(1)}
            </button>
          ))}
        </div>

        <div style={styles.toggleGroup}>
          <label style={styles.toggle}>
            <input
              type="checkbox"
              checked={showGrid}
              onChange={(e) => setShowGrid(e.target.checked)}
            />
            <span>Show Grid</span>
          </label>
          <label style={styles.toggle}>
            <input
              type="checkbox"
              checked={animationActive}
              onChange={(e) => setAnimationActive(e.target.checked)}
            />
            <span>Animation</span>
          </label>
        </div>
      </div>

      <div style={styles.chartContainer}>
        {renderChart()}
      </div>

      <div style={styles.dataTable}>
        <h3 style={styles.tableTitle}>Sample Data</h3>
        <div style={styles.tableWrapper}>
          <table style={styles.table}>
            <thead>
              <tr>
                <th style={styles.th}>Month</th>
                <th style={styles.th}>Sales</th>
                <th style={styles.th}>Revenue</th>
                <th style={styles.th}>Profit</th>
              </tr>
            </thead>
            <tbody>
              {salesData.map((row) => (
                <tr key={row.month}>
                  <td style={styles.td}>{row.month}</td>
                  <td style={styles.td}>${row.sales.toLocaleString()}</td>
                  <td style={styles.td}>${row.revenue.toLocaleString()}</td>
                  <td style={styles.td}>${row.profit.toLocaleString()}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

const styles: { [key: string]: React.CSSProperties } = {
  container: {
    minHeight: '100vh',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    padding: '20px',
    fontFamily: 'system-ui, -apple-system, sans-serif',
  },
  title: {
    textAlign: 'center',
    color: '#fff',
    fontSize: '2rem',
    margin: '0 0 8px 0',
    textShadow: '2px 2px 4px rgba(0,0,0,0.2)',
  },
  icon: {
    fontSize: '1.8rem',
  },
  subtitle: {
    textAlign: 'center',
    color: 'rgba(255,255,255,0.8)',
    margin: '0 0 24px 0',
  },
  controls: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '16px',
    marginBottom: '24px',
  },
  buttonGroup: {
    display: 'flex',
    gap: '8px',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  button: {
    padding: '10px 20px',
    border: 'none',
    borderRadius: '8px',
    background: 'rgba(255,255,255,0.2)',
    color: '#fff',
    cursor: 'pointer',
    fontSize: '14px',
    fontWeight: '500',
    transition: 'all 0.2s',
  },
  buttonActive: {
    background: '#fff',
    color: '#667eea',
  },
  toggleGroup: {
    display: 'flex',
    gap: '20px',
  },
  toggle: {
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    color: '#fff',
    cursor: 'pointer',
    fontSize: '14px',
  },
  chartContainer: {
    background: '#fff',
    borderRadius: '16px',
    padding: '24px',
    boxShadow: '0 10px 40px rgba(0,0,0,0.2)',
    marginBottom: '24px',
  },
  dataTable: {
    background: '#fff',
    borderRadius: '16px',
    padding: '20px',
    boxShadow: '0 10px 40px rgba(0,0,0,0.2)',
  },
  tableTitle: {
    margin: '0 0 16px 0',
    color: '#333',
    fontSize: '1.1rem',
  },
  tableWrapper: {
    overflowX: 'auto',
  },
  table: {
    width: '100%',
    borderCollapse: 'collapse',
    fontSize: '14px',
  },
  th: {
    textAlign: 'left',
    padding: '12px 16px',
    borderBottom: '2px solid #eee',
    color: '#666',
    fontWeight: '600',
  },
  td: {
    padding: '12px 16px',
    borderBottom: '1px solid #eee',
    color: '#333',
  },
};

Loading playground...

Use cases

•Implementing charts to visualize business data in dashboards and admin panels
•Displaying line charts and area charts for real-time data monitoring systems
•Creating various charts like bar charts, pie charts, and scatter plots for statistical reports
•Data visualization supporting both mobile and desktop in responsive web applications
•Insight charts for SaaS applications including product analytics, revenue trends, and user statistics

Good for

✓Intuitive and declarative API based on React components with a gentle learning curve
✓Lightweight with native SVG support, enabling easy responsive chart implementation and flexible customization
✓Rich variety of chart types and components satisfying most data visualization requirements
✓Active community with 26,000+ stars ensuring stability and continuous updates
✓TypeScript support and broad compatibility from React 16.8 to 19.0

Not good for

✗Includes Redux Toolkit and React Redux as dependencies, which may increase bundle size
✗May be more limited than using D3.js directly for complex custom charts or advanced interactions
✗Additional optimization work may be required when handling large datasets for performance

Installation

$ npm install recharts

Example

import { LineChart, Line, XAxis, YAxis } from "recharts"

const data = [
  { name: "Jan", value: 400 },
  { name: "Feb", value: 300 },
  { name: "Mar", value: 600 }
]

export default function Demo() {
  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="value" />
    </LineChart>
  )
}

Comparison

"Easier React integration than Chart.js, simpler API than D3 direct use."

Trust Metrics

26.6K

GitHub Stars

13.5M

Weekly Downloads

Last Commit:Feb 13, 2026

Used by

AirbnbLyftCoursera

View on GitHub View on npm