InfoQDaniel Curtis2 min readrelease notesintermediate
TanStack Charts Introduced with a Framework Agnostic Grammar of Graphics for TypeScript
Summary
TanStack Charts α is a framework‑agnostic, TypeScript‑first charting library that implements a grammar‑of‑graphics API (marks, scales, channels, transforms, layers). It ships as a single npm package with adapters for React, Preact, Vue, Solid, Svelte, Angular, Lit, and vanilla DOM, and can run on server or client. The runtime is headless; type inference stays tied to the source row, so each mark…
- Grammar‑of‑graphics API replaces fixed chart components; you compose marks, scales, channels, transforms, and layers.
- TypeScript types flow from the original data rows, giving strong compile‑time guarantees for mark definitions.
- Single‑package install (`pnpm add @tanstack/charts`) with peer dependencies for the chosen framework; adapters exist for all major UI libraries.
- Bundle size is modest (≈30 KB min+gz for a line chart, 38‑45 KB core) compared with other popular chart libs.
A type‑safe, framework‑agnostic charting layer lets teams share a single visualization definition across React, Vue, Svelte, etc., reducing duplication and improving DX for TypeScript‑heavy codebases. The small bundle size and headless design make it a viable alternative when you need a lightweight…
6/10
