charts
A tiny TypeScript visualization grammar for responsive, accessible, server-rendered charts—powered by granular D3 primitives.
What is it?
What it is
A TypeScript visualization grammar for responsive, accessible, server-rendered application charts.
Why it exists
To provide a single typed grammar that can evolve from standard charts to product-specific visualizations without changing the data model or requiring a separate API, while leveraging D3 and offering a full application runtime.
Who should use it
Developers seeking a framework-agnostic visualization grammarTypeScript enthusiasts wanting highly typed charting APIsReact, Vue, Svelte, Solid, or Angular developersEngineers needing responsive and accessible SVG/Canvas chartsDevelopers wanting to leverage D3 math with a higher-level abstraction
Who should avoid it
Users requiring a stable, production-ready library (currently in pre-alpha)Developers looking for a high-level, zero-configuration charting toolProjects that cannot tolerate breaking API changes
How it works
A quick walkthrough in plain English
How charts works
Step 1 of 3
You interact with it
Open charts, send a request, or connect it to your stack.
Features
Advantages
- Strong type safety and compile‑time validation
- No need to transform data model for different chart types
- Leverages existing D3 ecosystem for familiar math APIs
- Small, modular bundle with tree‑shaking
- Responsive and accessible out of the box
- Multiple framework adapters reduce integration friction
- Optional Canvas renderer for high‑volume charts
- Server‑side rendering and hydration support
- AI‑driven authoring and validation reduce boilerplate
- Extensible architecture allows custom marks and interactions
- Granular imports keep bundle size minimal
- Built for performance with spatial indexing options
- Open source MIT license
Disadvantages
- Pre‑alpha status; API may change before production release
- Limited documentation and examples compared to mature libraries
- Learning curve for new grammar and mark definitions
- Performance not yet benchmarked against all competitors
- Optional Canvas renderer requires separate import
- Community and ecosystem still small
- Potential gaps in chart type coverage or advanced features
Installation
cloud
not found
docker
not found
native
pnpm install
compose
not found
FAQ
What makes TanStack Charts different from other chart libraries?
TanStack Charts provides a type-safe visualization grammar that integrates with D3 primitives, allowing applications to build from common to custom marks while keeping data models intact and enabling responsive, accessible rendering.
How does TanStack Charts handle data?
Marks consume arrays, objects, tuples, or iterables directly, and different layers can use different datum types without requiring data transformation.
Is TanStack Charts production-ready?
No, TanStack Charts `0.0.2` is in pre-alpha. Its API may change between releases, and it is not yet suitable for production use.
Which frameworks does TanStack Charts support?
TanStack Charts offers adapters for React, Preact, Vue, Solid, Svelte, Angular, Lit, Alpine, and Octane, along with framework-agnostic and Canvas rendering options.
How does TanStack Charts integrate with D3?
D3 handles scales, shapes, transforms, and spatial math, while TanStack Charts manages marks, channels, responsive ranges, and rendering through a framework-agnostic runtime.
What key features does TanStack Charts offer?
Key features include responsive layout, automatic guide margins, accessibility support, server-side rendering (SSR), tree-shakable packages, and integration with D3 primitives for custom visualizations.
Featured in Videos
YouTube tutorials and walkthroughs for charts
Alternatives
Similar projects ranked by category, topics, and text overlap.
