Recharts

Composable charting library built on React components

chart

React-first API with D3 under the hood. Highly customizable.

ReactChartsD3SVG

🎮 Playground

import { LineChart, Line, XAxis, YAxis } from "recharts"

const data = [
  { name: "Jan", value: 400 },
  { name: "Feb", value: 300 },
  { name: "Mar", value: 600 }
]

export default function Demo() {
  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="value" />
    </LineChart>
  )
}

Open Sandbox

Use cases

•Dashboards
•Analytics
•Reports

Good for

✓React applications
✓Customizable charts
✓Responsive designs

Not good for

✗Very complex 3D visualizations
✗Non-React projects

Installation

$ npm install recharts

Example

import { LineChart, Line, XAxis, YAxis } from "recharts"

const data = [
  { name: "Jan", value: 400 },
  { name: "Feb", value: 300 },
  { name: "Mar", value: 600 }
]

export default function Demo() {
  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="value" />
    </LineChart>
  )
}

Comparison

"Easier React integration than Chart.js, simpler API than D3 direct use."

Trust Metrics

24K

GitHub Stars

3.1M

Weekly Downloads

Last Commit:last year

Used by

AirbnbLyftCoursera

View on GitHub View on npm