Skip to main content

​
Introduction to Recharts

Recharts is a redefined chart library built with React and D3. The main purpose of this library is to help you write charts in React applications without any pain.

​
Why Recharts?

Recharts follows three core principles that make it stand out:

Simply deploy with React components

Build charts using familiar React component patterns. No need to learn complex D3 APIs or imperative charting libraries.

Native SVG support

Lightweight with minimal dependencies. All charts are rendered using native SVG, ensuring crisp visuals at any scale.

Declarative components

Compose charts from independent, reusable components. Each element (axis, tooltip, grid, line) is a separate React component.

​
Composable architecture

The power of Recharts lies in its composable architecture. Each chart is built from clearly separated, independent components: 
<LineChart width={400} height={400} data={data}>
  <XAxis dataKey="name" />
  <Tooltip />
  <CartesianGrid stroke="#f5f5f5" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" />
  <Line type="monotone" dataKey="pv" stroke="#387908" />
</LineChart>
The LineChart above is composed of X axis, tooltip, grid, and line items. Each of them is an independent React component that can be customized, replaced, or removed.

​
Available chart types

Recharts provides a comprehensive set of chart types for all your data visualization needs:

​
Cartesian charts

LineChart

Perfect for showing trends over time or continuous data.

AreaChart

Visualize cumulative data or ranges with filled areas.

BarChart

Compare categorical data with vertical or horizontal bars.

ScatterChart

Display relationships between two or three variables.

ComposedChart

Combine multiple chart types (Line, Area, Bar) in a single chart.

FunnelChart

Show progressive reduction of data across stages.

​
Polar charts

PieChart

Display proportions and percentages as slices of a circle.

RadarChart

Compare multiple variables in a circular layout.

RadialBarChart

Show categorical data in a circular bar format.

​
Hierarchical charts

Treemap

Visualize hierarchical data with nested rectangles.

SunburstChart

Display hierarchical data in a circular, multi-level layout.

Sankey

Show flow and relationships between different entities.

​
Key features

  • Responsive: Built-in ResponsiveContainer automatically adapts to parent dimensions
  • Interactive: Rich tooltip and legend support with customizable interactions
  • Flexible: Customize every aspect through props and custom components
  • Accessible: SVG-based rendering ensures compatibility and accessibility
  • TypeScript: Full TypeScript support with comprehensive type definitions
  • Chart synchronization: Sync tooltips and interactions across multiple charts
  • Animation: Smooth animations with configurable duration and easing
Version: Recharts 3.7.0 supports React 16.8+, 17, 18, and 19.

​
Next steps

Installation

Install Recharts and its peer dependencies

Quick start

Build your first chart in minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us