recharts

React charts

weekly downloads13.6M

versionv3.7.0

licenseMIT

categorydata-viz

reactreactjschartreact-component

Overview

Recharts is a composable charting library built specifically for React applications, leveraging SVG rendering and D3 submodules to create interactive data visualizations. Unlike imperative charting libraries that require manual DOM manipulation, Recharts uses a declarative, component-based API that aligns naturally with React's programming model. You compose charts by nesting components like <BarChart>, <XAxis>, <Bar>, and <Tooltip> rather than configuring JSON objects or calling imperative methods.

The library exists to solve the friction of integrating traditional charting libraries into React applications. Early React developers struggled with libraries like Chart.js or D3 that manipulated the DOM directly, causing state synchronization issues. Recharts embraces React's component lifecycle and props-driven rendering, making charts behave like any other React component. It depends only on lightweight D3 submodules for mathematical calculations (scales, shapes, interpolations), not the full D3 library, keeping bundle sizes manageable.

With over 13 million weekly downloads and 26,600+ GitHub stars, Recharts is widely adopted in enterprise dashboards, analytics platforms, and admin panels. Companies building React-based data visualization tools favor it for its balance of simplicity and customization. It supports 11+ chart types including bar, line, area, pie, scatter, radar, and composed charts. The library handles responsive sizing through ResponsiveContainer, provides built-in animations, and allows deep customization through props, custom components, and event handlers.

Recharts trades framework flexibility for React-specific optimization. It won't work in Vue or Angular projects, and its chart type variety is narrower than canvas-based libraries like ECharts. However, for React developers who prioritize composability, type safety (with TypeScript support), and maintainable code over raw chart quantity, Recharts delivers a production-ready solution with active maintenance and extensive documentation.

Quick Start

typescript

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 }
];

const CustomTooltip = ({ active, payload }) => {
  if (active && payload?.length) {
    return (
      <div style={{ background: 'white', padding: '10px', border: '1px solid #ccc' }}>
        <p><strong>{payload[0].payload.month}</strong></p>
        <p style={{ color: '#8884d8' }}>Revenue: ${payload[0].value}</p>
        <p style={{ color: '#82ca9d' }}>Expenses: ${payload[1].value}</p>
      </div>
    );
  }
  return null;
};

export default function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip content={<CustomTooltip />} />
        <Legend />
        <Line
          type="monotone"
          dataKey="revenue"
          stroke="#8884d8"
          strokeWidth={2}
          activeDot={{ r: 8 }}
        />
        <Line
          type="monotone"
          dataKey="expenses"
          stroke="#82ca9d"
          strokeWidth={2}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

Use Cases

Analytics dashboards: Building admin panels or SaaS dashboards that display metrics like user growth, revenue trends, or system performance. Recharts components integrate seamlessly with state management libraries (Redux, Zustand) and can update in real-time by passing new data props.

Financial data visualization: Rendering stock price charts, portfolio performance, or cryptocurrency trends. The library's ComposedChart allows overlaying multiple series types (line + bar + area) on shared axes, and customizable tooltips can display formatted currency values and percentage changes.

E-commerce reporting: Displaying sales data, conversion funnels, or inventory trends for online stores. Responsive containers ensure charts adapt to mobile screens, and click handlers on bars or pie slices enable drill-down interactions to detailed product views.

Scientific and research applications: Visualizing experiment results, survey data, or statistical distributions. Recharts supports scatter plots with custom shapes, radar charts for multi-dimensional comparisons, and synchronized charts for comparing datasets side-by-side.

Real-time monitoring systems: Creating live dashboards for IoT devices, server metrics, or social media feeds. By updating the data prop from WebSocket streams or polling APIs, charts re-render automatically while maintaining smooth animations and performance through React's reconciliation.

Pros & Cons

Pros

+Declarative component API aligns perfectly with React patterns, making charts feel like native React components with props-driven configuration and predictable re-rendering
+Lightweight SVG rendering with selective D3 submodule dependencies keeps bundle sizes smaller than full-featured libraries while maintaining crisp visuals at any resolution
+Built-in responsiveness through ResponsiveContainer and extensive customization options via render props, custom shapes, and event handlers without fighting the framework
+Strong TypeScript support with comprehensive type definitions, active maintenance with 347 contributors, and compatibility with modern React features like hooks and concurrent mode
+No canvas context headaches—SVG elements integrate with browser DevTools, support CSS styling, and allow direct DOM inspection for debugging

Cons

−React-only dependency limits use to React ecosystems, requiring different libraries for Vue, Angular, or vanilla JavaScript projects
−Fewer chart types (11 primary) compared to ECharts (100+) or commercial libraries—no native support for heatmaps, treemaps, or advanced statistical charts without custom implementations
−Performance can degrade with extremely large datasets (10,000+ points) since SVG DOM nodes are heavier than canvas pixels—requires data sampling or pagination strategies for big data
−Documentation examples sometimes lack TypeScript specifics and advanced customization patterns require reading source code or community examples
−Animation customization is less granular than libraries with dedicated animation engines—complex choreography needs manual timing coordination

Alternatives

nivov0.31.0

data-viz

2K / week

react-chartjs-2v5.3.1

React components for Chart.js

data-vizchartchart-js

2.8M / week

victoryv37.3.6

Data viz for React

data-vizdata visualizationReact

367K / week

Comparisons

Install

bash

npm install recharts

bash

pnpm add recharts

bash

bun add recharts

Overview

Quick Start

typescript

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 }
];

const CustomTooltip = ({ active, payload }) => {
  if (active && payload?.length) {
    return (
      <div style={{ background: 'white', padding: '10px', border: '1px solid #ccc' }}>
        <p><strong>{payload[0].payload.month}</strong></p>
        <p style={{ color: '#8884d8' }}>Revenue: ${payload[0].value}</p>
        <p style={{ color: '#82ca9d' }}>Expenses: ${payload[1].value}</p>
      </div>
    );
  }
  return null;
};

export default function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip content={<CustomTooltip />} />
        <Legend />
        <Line
          type="monotone"
          dataKey="revenue"
          stroke="#8884d8"
          strokeWidth={2}
          activeDot={{ r: 8 }}
        />
        <Line
          type="monotone"
          dataKey="expenses"
          stroke="#82ca9d"
          strokeWidth={2}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

Use Cases

Pros & Cons

Pros

+Declarative component API aligns perfectly with React patterns, making charts feel like native React components with props-driven configuration and predictable re-rendering
+Lightweight SVG rendering with selective D3 submodule dependencies keeps bundle sizes smaller than full-featured libraries while maintaining crisp visuals at any resolution
+Built-in responsiveness through ResponsiveContainer and extensive customization options via render props, custom shapes, and event handlers without fighting the framework
+Strong TypeScript support with comprehensive type definitions, active maintenance with 347 contributors, and compatibility with modern React features like hooks and concurrent mode
+No canvas context headaches—SVG elements integrate with browser DevTools, support CSS styling, and allow direct DOM inspection for debugging

Cons

−React-only dependency limits use to React ecosystems, requiring different libraries for Vue, Angular, or vanilla JavaScript projects
−Fewer chart types (11 primary) compared to ECharts (100+) or commercial libraries—no native support for heatmaps, treemaps, or advanced statistical charts without custom implementations
−Performance can degrade with extremely large datasets (10,000+ points) since SVG DOM nodes are heavier than canvas pixels—requires data sampling or pagination strategies for big data
−Documentation examples sometimes lack TypeScript specifics and advanced customization patterns require reading source code or community examples
−Animation customization is less granular than libraries with dedicated animation engines—complex choreography needs manual timing coordination