Skip to main content

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.

Recharts is a composable charting library built with React and D3. This guide walks you through creating your first chart.

​
Installation

Install Recharts via npm or yarn: 
npm install recharts

​
Your first chart

Let’s create a simple line chart that visualizes monthly revenue data.
1

Prepare your data

Recharts works with plain JavaScript arrays of objects:
const data = [
  { month: 'Jan', revenue: 4000 },
  { month: 'Feb', revenue: 3000 },
  { month: 'Mar', revenue: 5000 },
  { month: 'Apr', revenue: 4500 },
  { month: 'May', revenue: 6000 },
  { month: 'Jun', revenue: 5500 },
];
2

Import components

Import the chart container and components you need:
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
3

Build your chart

Compose your chart using declarative components:
function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="revenue" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

​
Understanding the structure

Every Recharts chart follows a consistent pattern:

​
Chart container

The outer container defines the chart type: 
<LineChart data={data}>
  {/* Chart components go here */}
</LineChart>
Available chart types: LineChart, BarChart, AreaChart, ComposedChart, PieChart, RadarChart, ScatterChart.

​
Axes

Axes define how data maps to visual coordinates: 
<XAxis dataKey="month" />  {/* Horizontal axis */}
<YAxis />                   {/* Vertical axis */}
The dataKey prop tells the axis which field from your data to use.

​
Data series

Data series components visualize your data: 
<Line dataKey="revenue" stroke="#8884d8" />
Each series needs a dataKey that matches a field in your data.

​
Interactive components

Add interactivity with Tooltip and Legend: 
<Tooltip />  {/* Shows data on hover */}
<Legend />   {/* Shows series labels */}

​
Multiple data series

Add multiple series to compare data: 
const data = [
  { month: 'Jan', revenue: 4000, profit: 2400 },
  { month: 'Feb', revenue: 3000, profit: 1398 },
  { month: 'Mar', revenue: 5000, profit: 3800 },
];

function MultiSeriesChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="revenue" stroke="#8884d8" />
        <Line type="monotone" dataKey="profit" stroke="#82ca9d" />
      </LineChart>
    </ResponsiveContainer>
  );
}

​
Bar chart example

Switch to a bar chart by changing the container and series component: 
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

function BarChartExample() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="revenue" fill="#8884d8" />
        <Bar dataKey="profit" fill="#82ca9d" />
      </BarChart>
    </ResponsiveContainer>
  );
}

​
Common pitfalls

Data keys must match your data structureIf your data has a field called sales, use dataKey="sales", not dataKey="revenue".
Always wrap charts in ResponsiveContainerThis ensures your chart adapts to different screen sizes. Set width to "100%" to fill the parent container.

​
Next steps