Imported from terminalskills/skills (skills/recharts/SKILL.md). Install upstream with npx skills add terminalskills/skills --skill recharts. Copyright stays with the author (Apache-2.0).

Recharts — React Charting Library

Overview

You are an expert in Recharts, the composable React charting library built on D3. You help developers create line charts, bar charts, area charts, pie charts, scatter plots, and custom visualizations using React's declarative component model with responsive containers and smooth animations.

Instructions

Common Chart Types

// Line chart with multiple series
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";

const data = [
  { month: "Jan", revenue: 4000, costs: 2400, profit: 1600 },
  { month: "Feb", revenue: 3000, costs: 1398, profit: 1602 },
  { month: "Mar", revenue: 5000, costs: 3200, profit: 1800 },
  { month: "Apr", revenue: 4780, costs: 2908, profit: 1872 },
  { month: "May", revenue: 5890, costs: 3800, profit: 2090 },
  { month: "Jun", revenue: 6390, costs: 3900, profit: 2490 },
];

function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
        <XAxis dataKey="month" />
        <YAxis tickFormatter={(v) => `$${v / 1000}k`} />
        <Tooltip
          formatter={(value: number) => [`$${value.toLocaleString()}`, undefined]}
          contentStyle={{ borderRadius: 8, border: "1px solid #e0e0e0" }}
        />
        <Legend />
        <Line type="monotone" dataKey="revenue" stroke="#4f46e5" strokeWidth={2} dot={{ r: 4 }} />
        <Line type="monotone" dataKey="costs" stroke="#ef4444" strokeWidth={2} dot={{ r: 4 }} />
        <Line type="monotone" dataKey="profit" stroke="#22c55e" strokeWidth={2} strokeDasharray="5 5" />
      </LineChart>
    </ResponsiveContainer>
  );
}

// Bar chart
import { BarChart, Bar } from "recharts";

function MRRChart({ data }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="newMRR" stackId="a" fill="#4f46e5" name="New MRR" />
        <Bar dataKey="expansionMRR" stackId="a" fill="#22c55e" name="Expansion" />
        <Bar dataKey="churnMRR" stackId="a" fill="#ef4444" name="Churn" />
      </BarChart>
    </ResponsiveContainer>
  );
}

// Area chart
import { AreaChart, Area } from "recharts";

function TrafficChart({ data }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <AreaChart data={data}>
        <defs>
          <linearGradient id="colorVisits" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#4f46e5" stopOpacity={0.3} />
            <stop offset="95%" stopColor="#4f46e5" stopOpacity={0} />
          </linearGradient>
        </defs>
        <XAxis dataKey="date" />
        <YAxis />
        <Tooltip />
        <Area type="monotone" dataKey="visits" stroke="#4f46e5" fill="url(#colorVisits)" />
      </AreaChart>
    </ResponsiveContainer>
  );
}

// Pie / Donut chart
import { PieChart, Pie, Cell } from "recharts";

const COLORS = ["#4f46e5", "#22c55e", "#f59e0b", "#ef4444"];

function PlanDistribution({ data }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <PieChart>
        <Pie data={data} dataKey="value" nameKey="plan" cx="50%" cy="50%"
             innerRadius={60} outerRadius={100} paddingAngle={2}>
          {data.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} />)}
        </Pie>
        <Tooltip />
        <Legend />
      </PieChart>
    </ResponsiveContainer>
  );
}

Custom Tooltips and Labels

// Custom tooltip component
const CustomTooltip = ({ active, payload, label }) => {
  if (!active || !payload) return null;
  return (
    <div style={{ background: "white", padding: 12, borderRadius: 8, boxShadow: "0 2px 8px rgba(0,0,0,0.1)" }}>
      <p style={{ fontWeight: 600 }}>{label}</p>
      {payload.map((entry, i) => (
        <p key={i} style={{ color: entry.color }}>
          {entry.name}: ${entry.value.toLocaleString()}
        </p>
      ))}
    </div>
  );
};

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

Installation

npm install recharts

Examples

Example 1: User asks to set up recharts

User: "Help me set up recharts for my project"

The agent should:

1. Check system requirements and prerequisites
2. Install or configure recharts
3. Set up initial project structure
4. Verify the setup works correctly

Example 2: User asks to build a feature with recharts

User: "Create a dashboard using recharts"

The agent should:

1. Scaffold the component or configuration
2. Connect to the appropriate data source
3. Implement the requested feature
4. Test and validate the output

Guidelines

1. ResponsiveContainer always — Wrap every chart in <ResponsiveContainer width="100%" height={...}> for responsive sizing
2. Composable architecture — Mix and match components (Line + Bar + Area in one chart); Recharts is fully composable
3. Custom tooltips — Replace default tooltips with styled components for polished dashboards
4. Color consistency — Define a color palette once and reuse; match your brand colors
5. Data transformation outside — Transform data before passing to Recharts; keep chart components focused on rendering
6. Gradients for area charts — Use SVG <linearGradient> in <defs> for polished area fills
7. Animation control — Set isAnimationActive={false} for real-time data; animations on initial render only for static dashboards
8. Reference lines — Use <ReferenceLine> for targets, thresholds, and benchmarks overlaid on charts