/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:** A Recharts chart is an assembly of independent child components — `XAxis`, `YAxis`, `Tooltip`, `Legend`, `CartesianGrid` and one or more data series — rather than one component taking a config object. Features are added and removed by adding and removing children. Charts render nothing without dimensions, so every chart needs `ResponsiveContainer`, the `responsive` prop, or explicit `width`/`height`. Data and callback props are compared by reference, so an inline `.map()` recomputes the whole chart every render. In v3 `accessibilityLayer` defaults to `true` and internal state is read through hooks rather than cloned props.

**Detailed Resources:**

• [examples/core.md](examples/core.md) — line, bar, area and pie charts, responsive sizing, custom tooltips, multi-axis, stacking
• [examples/advanced.md](examples/advanced.md) — ComposedChart, Brush, reference lines, synchronized charts, real-time updates, scatter shapes, radar
• [reference.md](reference.md) — chart type table and prop cheat sheets for every component

---

<critical_requirements>

Before writing Recharts code

**Give every chart dimensions** — `ResponsiveContainer`, the `responsive` prop, or explicit `width` and `height`. A chart with none renders an empty SVG and no error.

**Give `ResponsiveContainer` a parent with a resolved height.** It measures its parent, so a parent at `height: 0` or `display: none` measures zero and the chart never appears.

**Hold data arrays and callback props stable across renders** with `useMemo` and `useCallback`. Recharts compares them by reference, so a fresh array or arrow function each render re-derives every point.

**Return HTML from a custom `Tooltip` `content` component.** The tooltip renders into an HTML overlay positioned above the SVG, so SVG elements inside it do not display.

</critical_requirements>

---

**Auto-detection:** recharts, LineChart, BarChart, AreaChart, PieChart, ComposedChart, ScatterChart, RadarChart, RadialBarChart, FunnelChart, Treemap, ResponsiveContainer, XAxis, YAxis, CartesianGrid, dataKey, yAxisId, stackId, syncId, LabelList, ReferenceLine, ReferenceArea, Brush, PolarAngleAxis, isAnimationActive, throttleDelay, accessibilityLayer

**Applies to:**

• Line, bar, area, pie, scatter, radar, radial, funnel and treemap charts
• Composing several series, or several chart types, into one plot
• Multi-axis charts where series carry different units or scales
• Custom tooltips, legends, axis tick formatting and data labels
• Reference lines and areas, brush range selection, cross-chart tooltip sync
• Animation control and real-time update strategies

**Handled elsewhere:**

• Visualizations with no standard chart shape — building marks from scales and path generators is a different job from composing chart components
• Canvas or WebGL rendering for very large point counts — Recharts emits SVG, so every mark is a DOM node
• Physics-based or gesture-driven motion — a series animates between two data states on a duration and an easing, and there is no spring model and no drag-to-animate
• Geographic projections and 3D scenes
• Which colours the series use — `stroke` and `fill` take whatever values a product's visual language supplies
• Accessibility conformance targets — `accessibilityLayer` supplies keyboard navigation and ARIA on the chart, and which level a product must meet is settled elsewhere

---

<philosophy>

Recharts is composition rather than configuration. Adding a `<Tooltip />` adds tooltips; deleting it removes them. There is no options object, and no feature flag — the child list is the configuration.

Two consequences follow. **JSX order is z-order**, because SVG has no `z-index`: an `Area` written before a `Bar` renders behind it. And **`dataKey` is the whole binding contract** — the chart takes one `data` array and each child names the field it reads, so a series without a `dataKey` has nothing to draw.

</philosophy>

---

<decision_framework>

Which chart type

Change over time?
  Continuous trend        -> LineChart or AreaChart
  Discrete periods        -> BarChart
  Trend over totals       -> ComposedChart (Bar + Line)
Part of a whole?
  Few categories (< 8)    -> PieChart; innerRadius > 0 for a donut
Correlation?
  Two variables           -> ScatterChart; encode a third in the shape's radius
Multi-dimensional?
  3+ measures per item    -> RadarChart
Stages of a process?
  Successive drop-off     -> FunnelChart
Hierarchy?
  Nested proportions      -> Treemap

Which responsive approach

`ResponsiveContainer` where `debounce`, `aspect`, `onResize`, `minWidth` or `maxHeight` is needed — it measures with a ResizeObserver. The `responsive` prop otherwise, which takes the size from the parent's CSS box and saves a wrapper element.

When to turn animation off

Data updating more than once a second, point counts in the thousands, print and export, and dashboards rendering many charts at once. Animation redraws the series on every data change.

</decision_framework>

---

<patterns>

Core patterns

Pattern 1: Chart composition

A container holding grid, axes, overlays and one child per series. Each child is an independent feature.

<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" />
    <Line type="monotone" dataKey="expenses" stroke="#82ca9d" />
  </LineChart>
</ResponsiveContainer>

Full code: [examples/core.md](examples/core.md)

---

Pattern 2: Responsive sizing

`ResponsiveContainer` measures its parent and passes concrete pixel dimensions down. The `responsive` prop uses the