> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction to Recharts

> A redefined chart library built with React and D3

# Introduction to Recharts

Recharts is a **redefined** chart library built with [React](https://react.dev) and [D3](https://d3js.org). 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:

<CardGroup cols={3}>
  <Card title="Simply deploy with React components" icon="react">
    Build charts using familiar React component patterns. No need to learn complex D3 APIs or imperative charting libraries.
  </Card>

  <Card title="Native SVG support" icon="code">
    Lightweight with minimal dependencies. All charts are rendered using native SVG, ensuring crisp visuals at any scale.
  </Card>

  <Card title="Declarative components" icon="layer-group">
    Compose charts from independent, reusable components. Each element (axis, tooltip, grid, line) is a separate React component.
  </Card>
</CardGroup>

## Composable architecture

The power of Recharts lies in its composable architecture. Each chart is built from clearly separated, independent components:

```jsx theme={null}
<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

<CardGroup cols={2}>
  <Card title="LineChart" icon="chart-line">
    Perfect for showing trends over time or continuous data.
  </Card>

  <Card title="AreaChart" icon="chart-area">
    Visualize cumulative data or ranges with filled areas.
  </Card>

  <Card title="BarChart" icon="chart-bar">
    Compare categorical data with vertical or horizontal bars.
  </Card>

  <Card title="ScatterChart" icon="circle">
    Display relationships between two or three variables.
  </Card>

  <Card title="ComposedChart" icon="layer-group">
    Combine multiple chart types (Line, Area, Bar) in a single chart.
  </Card>

  <Card title="FunnelChart" icon="filter">
    Show progressive reduction of data across stages.
  </Card>
</CardGroup>

### Polar charts

<CardGroup cols={2}>
  <Card title="PieChart" icon="chart-pie">
    Display proportions and percentages as slices of a circle.
  </Card>

  <Card title="RadarChart" icon="radar">
    Compare multiple variables in a circular layout.
  </Card>

  <Card title="RadialBarChart" icon="circle-half-stroke">
    Show categorical data in a circular bar format.
  </Card>
</CardGroup>

### Hierarchical charts

<CardGroup cols={2}>
  <Card title="Treemap" icon="table-cells">
    Visualize hierarchical data with nested rectangles.
  </Card>

  <Card title="SunburstChart" icon="sun">
    Display hierarchical data in a circular, multi-level layout.
  </Card>

  <Card title="Sankey" icon="diagram-project">
    Show flow and relationships between different entities.
  </Card>
</CardGroup>

## 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

<Info>
  **Version**: Recharts 3.7.0 supports React 16.8+, 17, 18, and 19.
</Info>

## Next steps

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/installation">
    Install Recharts and its peer dependencies
  </Card>

  <Card title="Quick start" icon="rocket" href="/quickstart">
    Build your first chart in minutes
  </Card>
</CardGroup>