TanStack Charts

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

Treat the library as Alpha (0.18.0 at skill refresh; official Alpha since 0.16.0). Alpha is for evaluation and early integration: minor releases may break APIs, so pin an exact version. Verify current docs and the npm latest version before relying on edge APIs. Prefer GitHub tag v0.18.0 docs over stale search, pre-Alpha snippets with root x / y, 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, the scales registry, named scales/multiple axes, axes and guide styles, legends, tooltip extensions: setup-core.md.
4. Marks, bar radii, decorative, per-mark Canvas, 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. Alpha stability, breaking migrations (root scales to scales), testing, large data, Canvas, custom marks, AI checks: production-patterns.md.