Getting started

Build your first chart with Recharts in minutes

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

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 structure

If your data has a field called sales, use dataKey="sales", not dataKey="revenue".

Always wrap charts in ResponsiveContainer

This ensures your chart adapts to different screen sizes. Set width to "100%" to fill the parent container.

Next steps

• Learn about tooltips and legends for better interactivity
• Configure axes and grids for precise control
• Add animations to make your charts engaging
• Explore responsive containers for adaptive layouts