TanStack Charts

Use this skill when work touches TanStack Charts, especially mark composition, transforms, compact vs D3 scales, React Chart, SSR, tooltips/focus, Canvas, optional motion(), React Native, spatial/hierarchy/network entries, or migrations.

Treat the library as pre-alpha (0.14.0 at skill refresh). Official docs say it is not ready for production use. Verify current docs and the npm latest version before relying on edge APIs. Prefer official docs / GitHub tag v0.14.0 over stale search or archived react-charts.

Workflow

1. Confirm the stack is the new TanStack Charts on the unified package:
   • Correct: bun add @tanstack/charts plus framework peers. Import Chart from @tanstack/charts/react, scales from @tanstack/charts/scales/linear (and /band, /point, /ordinal).
   • Compatibility only: @tanstack/react-charts, @tanstack/charts-scales, and other @tanstack/*-charts adapter packages still exist for existing apps. Do not add them to new code.
   • Wrong: unscoped react-charts, or options / primaryAxis / secondaryAxes / UserSerie.
2. Refresh versions and URLs from source-map.md.
3. Installation, defineChart, scales, axes, tooltip extensions: setup-core.md.
4. Marks, decorative, polar/geo, composites: marks-composition.md.
5. Eager transforms vs mark layout: transforms-layouts.md.
6. Adapters, sizing, focus, crosshair, brush/zoom/cursor/selection, motion, SSR: frameworks-interaction.md.
7. Testing, large data, Canvas, custom marks, AI checks, migrations: production-patterns.md.