Recharts online editor

Write, Run & Share Recharts code online using OneCompiler's Recharts online editor for free. Choose 'Recharts' as the language and you'll get a line chart to start from. The preview redraws as you type, so you can experiment without setting up a React project.

About Recharts

Recharts is a charting library for React. Charts are built from React components: you pick a chart type, pass it your data, and add the pieces you want (axes, grid, tooltip, legend) as children. It renders to SVG and handles animation and responsive sizing for you.

Syntax help

Imports

Import only the components you use.

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

Data

Data is an array of objects. Each chart element reads a field through dataKey.

const data = [
  { month: 'Jan', sales: 65, profit: 20 },
  { month: 'Feb', sales: 59, profit: 18 },
  { month: 'Mar', sales: 80, profit: 31 },
];

Line chart

<LineChart width={500} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="month" />
  <YAxis />
  <Tooltip />
  <Line type="monotone" dataKey="sales" stroke="#5c6ac4" />
  <Line type="monotone" dataKey="profit" stroke="#22b5bf" />
</LineChart>

Bar chart

Swap the chart and series components to change the chart type.

import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend } from 'recharts';

<BarChart width={500} height={300} data={data}>
  <XAxis dataKey="month" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="sales" fill="#5c6ac4" />
  <Bar dataKey="profit" fill="#22b5bf" />
</BarChart>

Pie chart

import { PieChart, Pie, Tooltip } from 'recharts';

<PieChart width={400} height={300}>
  <Pie data={data} dataKey="sales" nameKey="month" outerRadius={100} fill="#5c6ac4" label />
  <Tooltip />
</PieChart>

Responsive size

ResponsiveContainer makes a chart fill its parent. The parent needs a height.

<div style={{ height: 400 }}>
  <ResponsiveContainer>
    <LineChart data={data}>{/* ... */}</LineChart>
  </ResponsiveContainer>
</div>