Data Viz

Recharts

Composable chart library built on D3 + React.

Live demorecharts

Recharts is the most-used React chart library — composable, SVG-based, and easy to theme. For dashboards with density, pair with Tremor; for more bespoke charts, drop to D3 or Visx.

Install

npm i recharts

Snippet

import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

<ResponsiveContainer width="100%" height={300}>
  <AreaChart data={data}>
    <defs>
      <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
        <stop offset="5%" stopColor="#22d3ee" stopOpacity={0.6} />
        <stop offset="95%" stopColor="#22d3ee" stopOpacity={0} />
      </linearGradient>
    </defs>
    <XAxis dataKey="month" />
    <YAxis />
    <Tooltip />
    <Area type="monotone" dataKey="visitors" stroke="#22d3ee" fill="url(#g)" />
  </AreaChart>
</ResponsiveContainer>