/web-dataviz-recharts

name: web-dataviz-recharts
description: Recharts composable chart components - LineChart, BarChart, AreaChart, PieChart, ComposedChart, responsive sizing, custom tooltips, animations

Recharts Patterns

> **Quick Guide:** Recharts wraps D3 in composable React components for declarative charting. Each chart is composed from independent child components (`XAxis`, `YAxis`, `Tooltip`, `Legend`, `CartesianGrid`, data series). Use `ResponsiveContainer` or the `responsive` prop for adaptive sizing. Memoize `data` and callback props to avoid unnecessary recalculations. Custom tooltips use the `content` prop. In v3, `accessibilityLayer` defaults to `true`, and internal state is accessed via hooks, not cloned props.

---

<critical_requirements>

CRITICAL: Before Using This Skill

> **All code must follow project conventions in CLAUDE.md** (kebab-case, named exports, import ordering, `import type`, named constants)

**(You MUST wrap charts in `ResponsiveContainer` or set the `responsive` prop for adaptive sizing -- charts without responsive handling render at fixed dimensions)**

**(You MUST memoize data arrays and callback functions passed as props -- unstable references cause Recharts to recalculate all data points)**

**(You MUST provide explicit `width` and `height` to chart components when NOT using `ResponsiveContainer` -- charts render nothing without dimensions)**

**(You MUST use the `content` prop on `Tooltip` for custom tooltips -- return HTML elements, NOT SVG elements)**

</critical_requirements>

---

**Auto-detection:** Recharts, recharts, LineChart, BarChart, AreaChart, PieChart, ComposedChart, ScatterChart, RadarChart, ResponsiveContainer, XAxis, YAxis, Tooltip, Legend, CartesianGrid, Line, Bar, Area, Pie, Cell, LabelList, Brush, ReferenceLine, ReferenceArea, customized tooltip, chart data visualization

**When to use:**

• Building line, bar, area, pie, scatter, radar, or composed charts
• Creating responsive dashboards with multiple chart types
• Implementing custom tooltips, legends, or axis formatting
• Composing multiple data series in a single chart
• Adding reference lines, areas, or brushes for data exploration

**When NOT to use:**

• Highly custom, non-standard visualizations (use D3 directly)
• Canvas-based rendering for very large datasets (50K+ points) -- Recharts uses SVG
• 3D visualizations or globe/map projections

**Key patterns covered:**

• Chart composition with child components
• Responsive sizing (`ResponsiveContainer` vs `responsive` prop)
• Custom tooltips with typed props
• Multi-axis and multi-series charts
• ComposedChart for mixing chart types
• PieChart with custom labels and donut variants
• Animations and real-time data updates
• Performance optimization for large datasets

**Detailed Resources:**

• [examples/core.md](examples/core.md) - Basic charts, responsive container, axes, tooltips, legends
• [examples/advanced.md](examples/advanced.md) - Composed charts, custom shapes, animations, real-time data, Brush
• [reference.md](reference.md) - Component quick reference, decision frameworks, prop cheat sheets

---

<philosophy>

Philosophy

Recharts treats charts as **compositions of independent React components**. A `LineChart` is not a monolith -- it's an assembly of `XAxis`, `YAxis`, `Tooltip`, `Legend`, `CartesianGrid`, and one or more `Line` components. This composable architecture means you add features by adding child components, not by passing configuration objects.

**Core principles:**

1. **Composition over configuration** -- Add a `Tooltip` component to get tooltips, add `CartesianGrid` for grid lines. Remove them to remove the feature. 2. **Declarative data binding** -- Pass a `data` array to the chart, use `dataKey` on child components to bind to fields. 3. **SVG-based rendering** -- All output is SVG, enabling CSS styling and DOM inspection. 4. **Headless by default** -- Charts have minimal default styling. You control appearance through props and CSS.

**When to use Recharts:**

• Standard chart types (line, bar, area, pie, scatter, radar, funnel)
• Dashboards with multiple chart types sharing consistent patterns
• Projects that value a declarative, component-based API over imperative drawing

**When NOT to use:**

• Datasets exceeding ~50K data points (SVG performance degrades -- consider Canvas-based alternatives)
• Highly custom visualizations that don't map to standard chart types
• Animations requiring physics-based or gesture-driven interactions

</philosophy>

---

<patterns>

Core Patterns

Pattern 1: Chart Composition

Every Recharts chart follows the same composition pattern: a chart container wrapping axis, grid, data series, and overlay components.

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

const CHART_HEIGHT = 400;
const STROKE_WIDTH = 2;

<ResponsiveContainer width="100%" height={CHART_HEIGHT}>
  <LineChart data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="month" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Line type="monotone" dataKey="revenue" stroke="#8884d8" strokeWidth={STROKE_WIDTH} />
    <Line type="monotone" dataKey="expenses" stroke="#82ca9d" strokeWidth={STROKE_WIDTH} />
  </LineChart>
</ResponsiveContainer>

**Why good:** Each child component is an independent feature -- remove `Tooltip` to remove tooltips, remove `CartesianGrid` to remove grid lines. Data binding is declarative via `dataKey`.

See [examples/core.md](examples/core.md) for full chart setup with TypeScript typing.

---

Pattern 2: Responsive Sizing

Charts require explicit dimensions. Two approaches for responsive behavior:

ResponsiveContainer (recommended for most cases)

const CHART_HEIGHT = 300;

<ResponsiveContainer width="100%" height={CHART_HEIGHT}>
  <BarChart data={data}>
    {/* ... */}
  </BarChart>
</ResponsiveContainer>

`responsive` prop (v3+ -- simpler,