TanStack Charts: A Grammar of Graphics Library
Better Stackgo watch the original →
the gist
TanStack Charts is a framework-agnostic, type-safe charting library that uses a grammar of graphics approach, allowing developers to compose charts from marks, scales, and mappings rather than predefined chart types.
The Grammar of Graphics Approach
TanStack Charts moves away from fixed chart components in favor of a compositional model similar to ggplot2. Instead of selecting a specific chart type, developers define a chart by mapping data to visual marks (such as bars, lines, or dots) and configuring scales for axes. This approach allows for the creation of complex, custom visualizations by layering multiple marks within a single definition.
Implementation and Flexibility
Charts are defined using a defineChart function, which accepts data and an array of marks. Because the library is framework-agnostic and type-safe, it provides IDE autocompletion for data keys, reducing errors when binding datasets. Styling is handled at three levels: CSS variables for global categorical colors, a theme block for chart furniture like grid lines and text, and direct mark-level styling for specific visual attributes like opacity, stroke, or data-driven fills.
Performance and AI Integration
TanStack Charts is designed to be lightweight, with a total bundle size between 36 and 43 kilobytes, which is significantly smaller than alternatives like Recharts (153 to 168 kilobytes). The API is intentionally structured to be predictable for AI agents, enabling LLMs to generate, inspect, and modify chart code without requiring extensive documentation lookups. The library supports advanced features including interactive brushing, zooming, crosshairs, streaming data animations, and SVG or PNG exports.