Quickstart

Get started with Recharts in minutes by creating your first interactive chart

Get up and running with Recharts by building your first chart in just a few steps.

Prerequisites

Before you begin, make sure you have:

• Node.js 18 or higher installed
• A React application set up (React 16.8+)
• Basic understanding of React components

Create your first chart

1. Install Recharts

   Install Recharts and its peer dependency react-is:

   npm

   npm install recharts react-is
   

   The react-is version should match your installed React version.

2. Prepare your data

   Create a data array with objects. Each object represents a data point:

   const data = [
     { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
     { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
     { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
     { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
     { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
     { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
     { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
   ];
   
3. Import chart components

   Import the chart components you need:

   import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
   
4. Render your chart

   Compose your chart using declarative components:

   function MyChart() {
     return (
       <LineChart
         width={600}
         height={300}
         data={data}
         margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
       >
         <CartesianGrid strokeDasharray="3 3" />
         <XAxis dataKey="name" />
         <YAxis />
         <Tooltip />
         <Legend />
         <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
         <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
       </LineChart>
     );
   }
   

Understanding the components

Your first chart uses several key Recharts components:

• LineChart - The container component that sets up the coordinate system
• Line - Renders the line series using the dataKey prop to specify which data field to visualize
• XAxis and YAxis - Display the horizontal and vertical axes
• CartesianGrid - Adds the background grid lines
• Tooltip - Shows data details on hover
• Legend - Displays the legend for your data series

Customization examples

Multiple data series

The example above already shows two lines (pv and uv). Each Line component creates a separate series:

<Line type="monotone" dataKey="pv" stroke="#8884d8" />
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />

Change line style

Customize the line appearance with different interpolation types:

<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
<Line type="linear" dataKey="pv" stroke="#8884d8" />
<Line type="step" dataKey="amt" stroke="#ffc658" />

Available types: basis, basisClosed, basisOpen, linear, linearClosed, natural, monotoneX, monotoneY, monotone, step, stepBefore, stepAfter.

Add dots to data points

Show dots at each data point:

<Line 
  type="monotone" 
  dataKey="uv" 
  stroke="#82ca9d" 
  strokeWidth={2}
  dot={{ fill: '#82ca9d', r: 4 }}
  activeDot={{ r: 6 }}
/>

Connect null values

Handle missing data by connecting around null values:

const dataWithNulls = [
  { name: 'Page A', uv: 4000 },
  { name: 'Page B', uv: 3000 },
  { name: 'Page C', uv: null },  // Missing data
  { name: 'Page D', uv: 2780 },
];

<Line type="monotone" dataKey="uv" stroke="#82ca9d" connectNulls />

Understanding dataKey

The dataKey prop tells components which field in your data objects to visualize. It can be:

• A string: Direct property access (dataKey="uv")
• A nested path: Dot notation for nested objects (dataKey="user.name")
• A function: Custom data accessor (dataKey={(data) => data.value * 2})

// String - most common
<Line dataKey="uv" stroke="#82ca9d" />

// Nested property
const nestedData = [
  { name: 'Page A', sales: { total: 4000 } }
];
<Line dataKey="sales.total" stroke="#82ca9d" />

// Function - for computed values
<Line dataKey={(entry) => entry.uv + entry.pv} stroke="#82ca9d" />

Make it responsive

Wrap your chart in ResponsiveContainer to make it adapt to its parent size:

import { ResponsiveContainer, LineChart, Line, XAxis, YAxis } from 'recharts';

function ResponsiveChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    </ResponsiveContainer>
  );
}

Always use ResponsiveContainer in production to ensure your charts work on all screen sizes.

Next steps

Explore examples

See more chart examples and variations

Core concepts

Learn about chart types and architecture

API reference

Explore all props and options

Customization

Learn how to style and customize charts