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

# Chart types

> Overview of available chart types in Recharts and when to use them

Recharts provides a comprehensive set of chart types to visualize your data. Each chart type is optimized for specific use cases and data patterns.

## Cartesian charts

Cartesian charts use X and Y axes to plot data points in a two-dimensional coordinate system. These are the most common chart types for displaying continuous and categorical data.

### LineChart

Display data as a series of points connected by lines. Ideal for showing trends over time or continuous data.

```tsx theme={null}
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const data = [
  { name: 'Jan', revenue: 4000, expenses: 2400 },
  { name: 'Feb', revenue: 3000, expenses: 1398 },
  { name: 'Mar', revenue: 2000, expenses: 9800 },
  { name: 'Apr', revenue: 2780, expenses: 3908 },
];

function RevenueChart() {
  return (
    <LineChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="revenue" stroke="#8884d8" />
      <Line type="monotone" dataKey="expenses" stroke="#82ca9d" />
    </LineChart>
  );
}
```

<Note>
  LineChart supports various curve types including `monotone`, `linear`, `step`, `basis`, and more through the `type` prop on the `Line` component.
</Note>

### BarChart

Represent data using rectangular bars. Perfect for comparing values across categories or showing distributions.

```tsx theme={null}
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { month: 'Jan', sales: 4000, target: 3500 },
  { month: 'Feb', sales: 3000, target: 3200 },
  { month: 'Mar', sales: 5000, target: 4000 },
];

function SalesChart() {
  return (
    <BarChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="sales" fill="#8884d8" />
      <Bar dataKey="target" fill="#82ca9d" />
    </BarChart>
  );
}
```

<Tabs>
  <Tab title="Stacked bars">
    Stack multiple bars by providing the same `stackId` prop:

    ```tsx theme={null}
    <Bar dataKey="sales" stackId="a" fill="#8884d8" />
    <Bar dataKey="returns" stackId="a" fill="#82ca9d" />
    ```
  </Tab>

  <Tab title="Horizontal bars">
    Switch to horizontal bars using the `layout` prop:

    ```tsx theme={null}
    <BarChart layout="horizontal" data={data}>
      <XAxis type="number" />
      <YAxis dataKey="name" type="category" />
      <Bar dataKey="value" fill="#8884d8" />
    </BarChart>
    ```
  </Tab>
</Tabs>

### AreaChart

Similar to LineChart but with the area below the line filled. Useful for showing volume or magnitude over time.

```tsx theme={null}
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const data = [
  { date: '2024-01', users: 4000 },
  { date: '2024-02', users: 3000 },
  { date: '2024-03', users: 5000 },
];

function UserGrowthChart() {
  return (
    <AreaChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="date" />
      <YAxis />
      <Tooltip />
      <Area type="monotone" dataKey="users" stroke="#8884d8" fill="#8884d8" />
    </AreaChart>
  );
}
```

### ScatterChart

Plot individual data points without connecting them. Ideal for showing correlations and distributions.

```tsx theme={null}
import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const data = [
  { x: 100, y: 200, z: 200 },
  { x: 120, y: 100, z: 260 },
  { x: 170, y: 300, z: 400 },
];

function CorrelationChart() {
  return (
    <ScatterChart width={600} height={300}>
      <CartesianGrid />
      <XAxis dataKey="x" type="number" />
      <YAxis dataKey="y" type="number" />
      <Tooltip cursor={{ strokeDasharray: '3 3' }} />
      <Scatter name="Dataset" data={data} fill="#8884d8" />
    </ScatterChart>
  );
}
```

### ComposedChart

Combine multiple chart types (Line, Bar, Area) in a single chart. Perfect for comparing different data representations.

```tsx theme={null}
import { ComposedChart, Line, Bar, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'Jan', revenue: 590, profit: 800, orders: 1400 },
  { name: 'Feb', revenue: 868, profit: 967, orders: 1506 },
  { name: 'Mar', revenue: 1397, profit: 1098, orders: 989 },
];

function BusinessMetricsChart() {
  return (
    <ComposedChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="orders" fill="#8884d8" />
      <Area type="monotone" dataKey="revenue" fill="#82ca9d" stroke="#82ca9d" />
      <Line type="monotone" dataKey="profit" stroke="#ff7300" />
    </ComposedChart>
  );
}
```

### FunnelChart

Visualize data through stages that progressively decrease in size. Common in sales and conversion analytics.

```tsx theme={null}
import { FunnelChart, Funnel, Tooltip, Cell } from 'recharts';

const data = [
  { value: 100, name: 'Visitors', fill: '#8884d8' },
  { value: 80, name: 'Product Views', fill: '#83a6ed' },
  { value: 50, name: 'Add to Cart', fill: '#8dd1e1' },
  { value: 30, name: 'Checkout', fill: '#82ca9d' },
  { value: 20, name: 'Purchase', fill: '#a4de6c' },
];

function ConversionFunnel() {
  return (
    <FunnelChart width={600} height={400}>
      <Tooltip />
      <Funnel dataKey="value" data={data} isAnimationActive>
        {data.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={entry.fill} />
        ))}
      </Funnel>
    </FunnelChart>
  );
}
```

## Polar charts

Polar charts use a circular coordinate system with angles and radii. These charts are effective for cyclical data and multi-dimensional comparisons.

### PieChart

Display data as slices of a circle, showing proportions of a whole.

```tsx theme={null}
import { PieChart, Pie, Cell, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'Desktop', value: 400 },
  { name: 'Mobile', value: 300 },
  { name: 'Tablet', value: 100 },
];

const COLORS = ['#0088FE', '#00C49F', '#FFBB28'];

function DeviceDistribution() {
  return (
    <PieChart width={400} height={400}>
      <Pie
        data={data}
        cx={200}
        cy={200}
        labelLine={false}
        label
        outerRadius={80}
        fill="#8884d8"
        dataKey="value"
      >
        {data.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
        ))}
      </Pie>
      <Tooltip />
      <Legend />
    </PieChart>
  );
}
```

<Info>
  Create a donut chart by setting the `innerRadius` prop on the `Pie` component.
</Info>

### RadarChart

Display multivariate data on axes radiating from a center point. Excellent for comparing multiple variables.

```tsx theme={null}
import { RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from 'recharts';

const data = [
  { subject: 'Math', A: 120, B: 110 },
  { subject: 'Science', A: 98, B: 130 },
  { subject: 'English', A: 86, B: 130 },
  { subject: 'History', A: 99, B: 100 },
  { subject: 'Art', A: 85, B: 90 },
];

function SkillsComparison() {
  return (
    <RadarChart width={500} height={500} data={data}>
      <PolarGrid />
      <PolarAngleAxis dataKey="subject" />
      <PolarRadiusAxis />
      <Radar name="Student A" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
      <Radar name="Student B" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
    </RadarChart>
  );
}
```

### RadialBarChart

Circular bar chart radiating from the center. Useful for showing progress or hierarchical data.

```tsx theme={null}
import { RadialBarChart, RadialBar, Legend } from 'recharts';

const data = [
  { name: 'Q1', value: 18, fill: '#8884d8' },
  { name: 'Q2', value: 22, fill: '#83a6ed' },
  { name: 'Q3', value: 28, fill: '#8dd1e1' },
  { name: 'Q4', value: 32, fill: '#82ca9d' },
];

function QuarterlyProgress() {
  return (
    <RadialBarChart width={500} height={500} data={data} innerRadius="10%" outerRadius="80%">
      <RadialBar minAngle={15} label={{ position: 'insideStart', fill: '#fff' }} background dataKey="value" />
      <Legend />
    </RadialBarChart>
  );
}
```

## Specialized charts

### Treemap

Display hierarchical data using nested rectangles. Size represents value, making it easy to spot patterns.

```tsx theme={null}
import { Treemap } from 'recharts';

const data = [
  {
    name: 'Products',
    children: [
      { name: 'Electronics', size: 12000 },
      { name: 'Clothing', size: 8000 },
      { name: 'Books', size: 4000 },
    ],
  },
];

function CategoryTreemap() {
  return <Treemap width={600} height={400} data={data} dataKey="size" ratio={4 / 3} stroke="#fff" fill="#8884d8" />;
}
```

### Sankey

Visualize flow between different states or categories. Perfect for showing transitions and connections.

```tsx theme={null}
import { Sankey, Tooltip } from 'recharts';

const data = {
  nodes: [
    { name: 'Homepage' },
    { name: 'Products' },
    { name: 'Checkout' },
    { name: 'Exit' },
  ],
  links: [
    { source: 0, target: 1, value: 100 },
    { source: 1, target: 2, value: 50 },
    { source: 1, target: 3, value: 50 },
    { source: 2, target: 3, value: 10 },
  ],
};

function UserFlowSankey() {
  return <Sankey width={600} height={400} data={data} node={{ fill: '#8884d8' }} link={{ stroke: '#77c2d1' }} />;
}
```

### SunburstChart

Multi-level hierarchical data visualization in a radial layout. Each ring represents a level in the hierarchy.

```tsx theme={null}
import { SunburstChart } from 'recharts';

const data = {
  name: 'Root',
  children: [
    {
      name: 'Category A',
      children: [
        { name: 'A1', size: 100 },
        { name: 'A2', size: 200 },
      ],
    },
    {
      name: 'Category B',
      size: 300,
    },
  ],
};

function HierarchySunburst() {
  return <SunburstChart width={600} height={600} data={data} dataKey="size" fill="#8884d8" />;
}
```

## Choosing the right chart

<Accordion title="Time series data">
  Use **LineChart** or **AreaChart** for continuous time series. LineChart emphasizes individual data points and trends, while AreaChart emphasizes volume and cumulative values.
</Accordion>

<Accordion title="Comparing categories">
  Use **BarChart** for discrete comparisons between categories. Horizontal bars work well for long category names, while vertical bars are traditional for time-based categories.
</Accordion>

<Accordion title="Part-to-whole relationships">
  Use **PieChart** for showing how parts make up a whole. Keep the number of slices to 5-7 for readability.
</Accordion>

<Accordion title="Correlations and distributions">
  Use **ScatterChart** to explore relationships between two variables. Add a third dimension using color or size.
</Accordion>

<Accordion title="Multi-dimensional comparisons">
  Use **RadarChart** when comparing multiple variables across different entities. Ideal for skill assessments, performance metrics, or feature comparisons.
</Accordion>

<Accordion title="Hierarchical data">
  Use **Treemap** for static hierarchies or **Sunburst** for interactive exploration of hierarchical structures.
</Accordion>

<Accordion title="Flow and transitions">
  Use **Sankey** to visualize flows between states, energy transfers, or user journeys.
</Accordion>