Recharts Has a Free API That Most Developers Dont Know About

#react #charts #webdev #javascript

Recharts is the most popular React charting library built on D3. It provides composable, declarative chart components that just work.

Line Chart

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

const data = [
  { month: "Jan", revenue: 4000, users: 2400 },
  { month: "Feb", revenue: 3000, users: 1398 },
  { month: "Mar", revenue: 5000, users: 9800 },
  { month: "Apr", revenue: 2780, users: 3908 },
];

function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="revenue" stroke="#8884d8" strokeWidth={2} />
        <Line type="monotone" dataKey="users" stroke="#82ca9d" strokeWidth={2} />
      </LineChart>
    </ResponsiveContainer>
  );
}

Bar Chart

import { BarChart, Bar, Cell } from "recharts";

const colors = ["#8884d8", "#83a6ed", "#8dd1e1", "#82ca9d"];

<BarChart data={data}>
  <XAxis dataKey="month" />
  <YAxis />
  <Bar dataKey="revenue" radius={[4, 4, 0, 0]}>
    {data.map((entry, i) => <Cell key={i} fill={colors[i % colors.length]} />)}
  </Bar>
</BarChart>

Custom Tooltip

const CustomTooltip = ({ active, payload, label }) => {
  if (!active || !payload) return null;
  return (
    <div style={{ background: "white", padding: 10, border: "1px solid #ccc" }}>
      <p>{label}</p>
      {payload.map(p => <p key={p.name} style={{ color: p.color }}>{p.name}: ${p.value}</p>)}
    </div>
  );
};

<Tooltip content={<CustomTooltip />} />