feat(charts): migrate registry charts to @tanstack/charts

[mehdibha]

What

The full migration of dotUI's charts from Recharts to @tanstack/charts 0.0.2 (pinned) — every registry chart item rebuilt, three new chart components, per-component docs, a Charts category on the components page, and the /charts showcase re-run on the new engine. Plus the /internal/charts-lab bench that drove the API decision.

Architecture: one core, nine independent items

• chart (core) — the Chart host (owns the resource-aware renderer, useId-scoped gradients, overlay slot), chartDefaults (every house decision in one auditable object), the 8-slot --chart-N palette theme, the shared frame (axes/color/legend/focus/tooltip assembly with width-aware tick density), the structural-memoization hook that internalizes TanStack's definition-identity update contract, format resolution, and a stackY transform.
• Per-family items, each independently installable (shadcn add chart-bar pulls core + that family only; granular @tanstack/charts/* entries keep bundles per-need):
  • Rewritten: chart-area (9 variants), chart-line (9), chart-bar (9), chart-pie (10), chart-radar (14), chart-radial (6)
  • New: chart-sparkline (5), chart-heatmap (4), chart-scatter (5)
• Two-layer API everywhere: components primary (<AreaChart data={...} y={['desktop','mobile']} />, wide-format-first, memoization internalized), spec-fragment builders underneath (areaChartSpec(options, ctx), phantom-typed so point.datum is the user's row type), marks/marksBefore/polarMarks raw-grammar escape hatches.

Variant parity: 71 total, zero lost. One variant reinterpreted (area icons → labels, since per-series icons were a Recharts-config concept), several polar variants use documented workarounds proven by a dedicated spike (grid-fill as a focus-silent guide painting under rings — better than Recharts' overpaint; icon legends as HTML; center labels via the overlay so decoration never becomes a keyboard stop).

What users gain over the Recharts era

• Keyboard-navigable charts with native pinnable tooltips and required ariaLabel (Recharts had no keyboard story).
• CSS-native theming: var(--chart-N) flows into fills, gradient stops, and the heatmap's color-mix sequential ramps — no injected <style>, no selector surgery on library internals.
• ~24 KiB gzip core vs ~100+ KiB Recharts, tree-shaken per family (polar adds +3–5.4 KiB only where installed).
• Three chart types Recharts couldn't do: heatmaps, proper scatter/bubble, stat-card sparklines.
• Docs: one page per chart with live examples and generated API references; chart.mdx now documents the core primitive.

Known constraints (deliberate)

• react ^19 peer dep (accepted); recharts remains a www-only dependency powering the internal lab's comparison seat — no registry item references it.
• Polar families default animate={false}: upstream 0.0.2 tweens the SVG large-arc-flag, breaking arcs crossing 180° (worth reporting to TanStack, along with the reconciler never emptying groups that lose all children).
• Builder axes/codeOptions binding deferred per product decision — chartDefaults is the ready splice target when that lands.

Process

Orchestrated as multi-agent workflows: a 10-agent Opus API-decision panel → a polar-parity spike (all 30 polar variants proven reachable before committing to migrate them) → wave 1 (core + 6 cartesian/new families in parallel) → wave 2 (3 polar families + glue) → independent adversarial verification at each stage. Every builder ran typecheck/lint gates; regeneration (build:registry, build:references) and browser verification done by the orchestrator.

Final adversarial verification

A last independent Opus verifier FAILED the first cut with three real blockers, all fixed in the final commit:

1. Broken fresh installs — @types/d3-scale/@types/d3-shape were missing from every item's hand-declared deps (proven with an isolated consumer built from the live /r/* payloads: 25 tsc errors → 0 with types present). Every meta now declares exact-import dependencies (pinned @tanstack/*@0.0.2) plus devDependencies for the types; the publisher and registry.json now pass devDependencies through.
2. Silent stale renders on RadialBarChart — polarMarks/polarMarksBefore weren't forwarded into the identity-compared memo slots (mark objects serialize identically). Now forwarded, matching pie/radar.
3. API reference tables leaking unbound generics — the docs generator merged the same-named generic *Props from base.tsx over types.ts. It now skips generic declarations without defaulted type params outside types.ts (byte-stable for every non-chart reference), and the chart types.ts files were corrected (required ariaLabel on bar/scatter, y1 on line, accessor-union claims removed).

The verifier also confirmed at runtime: 71 showcase cards + 82 docs chart hosts render with zero empty SVGs, zero NaN geometry, zero chart console errors; every demo↔docs reference resolves both ways; /create and the lab still work; git contains only migration files.

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dotui	Ready	Preview	Aug 1, 2026 8:34pm