TanStack Charts Alpha Released with Framework-Agnostic Grammar of Graphics for TypeScript

Introduction of TanStack Charts

TanStack Charts, developed by Tanner Linsley and the TanStack team, has launched its Alpha version. This new library provides a framework-agnostic visualization grammar specifically designed for TypeScript. It has already garnered approximately 160,000 weekly downloads during its Alpha phase.

Grammar of Graphics Approach

Unlike traditional charting libraries that offer a fixed catalog of chart components, TanStack Charts adopts the grammar of graphics paradigm. This allows developers to construct visualizations by composing fundamental elements such as marks, scales, channels, transforms, and layers. The API for marks and channels is similar to Observable Plot, and inferred types maintain connections to the source data shape, enabling direct data reading for each mark.

Framework Compatibility and Installation

The library renders through adapters for various frameworks, including React, Preact, Vue, Solid, Svelte, Angular, Lit, and a vanilla DOM host, functioning in both server and browser environments. Installation involves adding a single package, `@tanstack/charts`, with peer dependencies like `react` and `react-dom` for the React adapter. An experimental React Native adapter is also available.

Development Process and Features

Tanner Linsley stated that a significant portion of the library's implementation was generated by AI coding agents under his supervision, then reviewed and integrated. The Alpha release includes 11 releases, 188 examples, a shadcn chart catalog, multiple axes, polar scales, and drillable sunbursts.

Performance Considerations

While suitable for many charting needs, TanStack Charts may not be optimal for extremely large, complex datasets requiring real-time processing. Competitors suggest hardware-accelerated renderers for such workloads. The project's own documentation acknowledges that while Canvas rendering removes SVG DOM costs, it does not eliminate the work involved in scale, guide, or scene compilation for large datasets.