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.

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

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

BarChart

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

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

Stacked bars

Stack multiple bars by providing the same stackId prop:

<Bar dataKey="sales" stackId="a" fill="#8884d8" />
<Bar dataKey="returns" stackId="a" fill="#82ca9d" />

Horizontal bars

Switch to horizontal bars using the layout prop:

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

AreaChart

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

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.

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.

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.

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.

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

Create a donut chart by setting the innerRadius prop on the Pie component.

RadarChart

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

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.

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.

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.

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.

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

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.

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.

Part-to-whole relationships

Use PieChart for showing how parts make up a whole. Keep the number of slices to 5-7 for readability.

Correlations and distributions

Use ScatterChart to explore relationships between two variables. Add a third dimension using color or size.

Multi-dimensional comparisons

Use RadarChart when comparing multiple variables across different entities. Ideal for skill assessments, performance metrics, or feature comparisons.

Hierarchical data

Use Treemap for static hierarchies or Sunburst for interactive exploration of hierarchical structures.

Flow and transitions

Use Sankey to visualize flows between states, energy transfers, or user journeys.