charts

TanStack Charts

D3's power. A chart library's ergonomics.

A tiny TypeScript visualization grammar for responsive, accessible, server-rendered application charts.

Quick look · Documentation · React example · Conformance catalog · Roadmap

[!IMPORTANT] TanStack Charts is currently a private 0.0.0 product proof. The packages are not published or ready for production use yet.

Most chart libraries are easy until the chart stops being standard. TanStack Charts gives you one typed grammar that can grow from a familiar line or bar chart into a product-specific visualization without replacing your data model or dropping down to a separate API.

• Keep your data as it is. Marks consume arrays, objects, tuples, and iterables directly. Different layers can use different datum types.
• Bring native D3 primitives. Use D3 scales, curves, transforms, and layout output instead of relearning a parallel math API.
• Build from common to custom. Layer built-in marks or implement a custom mark against the same public scene protocol.
• Get the application runtime too. Responsive layout, automatic guide margins, themes, interaction, animation, accessibility, SVG SSR, hydration, and export are part of the system.
• Pay for what you import. Marks, renderers, interactions, and specialized D3 capabilities have independent, tree-shakeable entry points.

Quick look

import { max } from 'd3-array'
import { scaleBand, scaleLinear } from 'd3-scale'
import { barY, defineChart } from '@tanstack/charts'
import { Chart } from '@tanstack/react-charts'

const revenue = [
  { month: 'Jan', value: 42 },
  { month: 'Feb', value: 58 },
  { month: 'Mar', value: 76 },
  { month: 'Apr', value: 64 },
]

const revenueChart = defineChart({
  marks: [
    barY(revenue, {
      x: 'month',
      y: 'value',
    }),
  ],
  x: {
    scale: scaleBand()
      .domain(revenue.map((row) => row.month))
      .padding(0.2),
  },
  y: {
    scale: scaleLinear()
      .domain([0, max(revenue, (row) => row.value) ?? 0])
      .nice(),
    label: 'Revenue',
    grid: true,
  },
})

export function RevenueChart() {
  return (
    
  )
}

Marks consume the original rows, channels describe their visual encodings, and configured D3 scales own the domain and mapping. TanStack copies those scales, assigns their responsive pixel ranges, compiles a