TanStack Chart

Overview

TanStack Chart brings the battle-tested headless philosophy of TanStack (TanStack Table, Query) into the visualization space, providing unstyled, framework-agnostic charting logic.

Key Features

• 100% Headless Visualization: Handles mathematical scales, projections, and data series without enforcing DOM/SVG styles.
• Multi-Framework Parity: Works across React, Vue, Solid, Svelte, and vanilla TypeScript.
• Completely Unstyled: Pair seamlessly with Tailwind CSS, Canvas, SVG, or WebGL rendering.
• Type-Safe Scales: Built from the ground up in modern TypeScript.

Installation & Quick Start

npm install @tanstack/react-charts

import { Chart } from '@tanstack/react-charts';

export default function App() {
  const data = [{ label: 'Series 1', data: [{ primary: 1, secondary: 10 }] }];
  return <Chart options={{ data, primaryAxis: { getValue: d => d.primary } }} />;
}

Why Choose TanStack Chart?

• Best for: Teams using the TanStack ecosystem wanting 100% control over chart DOM and rendering.
• Not suitable for: Developers seeking turn-key chart templates with zero custom CSS configuration.