Rechart

# Recharts — Skill

**Name:** `recharts`
**Purpose:** Build responsive, readable charts with Recharts using correct data mapping and composition.
Use this skill whenever creating charts with Recharts.

**Applies when:** Using `LineChart`, `BarChart`, `AreaChart`, `PieChart`, `ResponsiveContainer`.
**Do not use when:** Charts are not built with Recharts.

## Rules

- **Always responsive:** Wrap charts in `ResponsiveContainer` and ensure a fixed height parent.
- **Explicit data model:** Normalize data and use stable `dataKey` values.
- **Pick the simplest chart:** Use `LineChart` for trends, `BarChart` for comparisons, `AreaChart` for cumulative/volume, `PieChart` for part-to-whole.
- **Interactivity:** Add `Tooltip`; add `Legend` when multiple series exist.
- **Performance:** Disable animation for large/static dashboards and reduce point count.

## Workflow

1. Define the data shape and stable keys.
2. Choose the simplest chart that answers the question.
3. Wrap in `ResponsiveContainer` with a height.
4. Add axes, tooltip, and legend as needed.
5. Disable animation or aggregate data for large sets.

## Checklists

### Implementation checklist

- [ ] Chart is wrapped in `ResponsiveContainer`
- [ ] X/Y axes are present when needed
- [ ] Tooltip shows correct units
- [ ] `dataKey` matches field names

### Review checklist

- [ ] Animations disabled for large datasets
- [ ] Colors are accessible

## Minimal examples

### Line chart (trend)

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

export function SalesChart({
  data,
}: {
  data: Array<{ month: string; sales: number }>;
}) {
  return (
    <div style={{ height: 320 }}>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          data={data}
          margin={{ top: 8, right: 16, bottom: 8, left: 8 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="month" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="sales" dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}
```

### Custom tooltip

```tsx
type TooltipProps = {
  active?: boolean;
  label?: string;
  payload?: Array<{ name?: string; value?: number | string }>;
};

export function CustomTooltip({ active, label, payload }: TooltipProps) {
  if (!active || !payload?.length) return null;
  return (
    <div className="rounded-md border bg-white p-2 text-sm shadow">
      <div className="font-medium">{label}</div>
      <ul className="mt-1 space-y-0.5">
        {payload.map((p, i) => (
          <li key={i}>
            {p.name}: {p.value}
          </li>
        ))}
      </ul>
    </div>
  );
}
```

## Common mistakes / pitfalls

- Missing `ResponsiveContainer` or fixed-height parent
- Mismatched `dataKey` values
- Over-animating large dashboards
- Rendering too many points without aggregation