Charts

A chart grammar you don't have to outgrow.

TanStack Charts 0.7.2 adds declarative view composition, controlled interactions, motion, spatial layouts, and expanded React Native parity. What changed since 0.6.5.

Docs

San Francisco temperature range band

range

Grouped bars

bar

Sorted vertical bars

bar

Stacked bars

bar

All mark, no chart.

Mean penguin mass reducer bars

bar

Rounded letter frequency donut

polar

Letter frequency pie with labels

polar

Definition-owned motion

motion

Industry unemployment stacked area

composition

Diverging Likert responses

survey

Industry unemployment with end labels

trend

Interactive series legend

interaction

Automobile specifications scatter

performance

Les Misérables character network

network

Empirical cumulative distribution

distribution

Metro inequality change arrows

change

Directed connected scatterplot

relationship

Concentric letter frequency bars

polar

County unemployment gauge

polar

Free cursor over car measurements

interaction

Scatterplot with marginal histograms

distribution

Grouped X tooltip

interaction

Ridgeline density comparison

distribution

Delaunay spatial network

spatial

Histogram

distribution

Industry unemployment percentile ribbon

uncertainty

Observed monthly AAPL brush selection

interaction

Standard world projection gallery

geography

Pointer-selected tooltip

interaction

HMS Beagle voyage

geography

Faceted distributions

small multiples

Seattle daily high-temperature polar line

polar

Streamgraph

composition

Quantitative binned heatmap

distribution

Apple stock line with seasonal gaps

trend

Token use calendar heatmap

time

Stacked bars with band and rule cursors

interaction

World population bubble map

geography

Layered Seattle weather chart

composition

Cross-chart geometry morph

motion

Editable event range

interaction

Filled wind-speed contours

spatial

Horizontal ranking with long labels

bar

Letter frequency donut with total

polar

Snapped axis pointer with grouped tooltip

interaction

Log-scale Flare class sizes

relationship

Hexagonally binned density

distribution

Bubble scatterplot

relationship

Point estimates with error bars

uncertainty

Indexed industry unemployment

trend

Point density contours

distribution

Scrollable resource timeline lanes

interaction

AAPL lag-one autocorrelation

relationship

Anscombe quartet small multiples

small multiples

English letter frequency pie

polar

Spring line updates

motion

Open-to-close price intervals

interval

Comparative radar chart

polar

Grouped bars

bar

Palmer penguins by species and sex

comparison

Industry unemployment bump chart

ranking

Focus and crosshair motion

motion

Precipitation calendar heatmap

time

Linked chart and data table selection

interaction

Apple close versus moving average

change

Sankey

network

World population-density choropleth

geography

Marimekko survey composition

part-to-whole

English letter frequency waffle

part-to-whole

Flare analytics treemap

hierarchy

Framed guide-free scatterplot

decoration

Wheel zoom and pan over AAPL closes

interaction

San Francisco temperature range band

range

Grouped boxplot

distribution

Synchronized cursors across views

interaction

Candlestick chart

financial

Cumulative histogram

distribution

Expanding pinned energy tooltip

interaction

Basic Sankey

network

World learning-poverty choropleth

geography

Surface wind polar scatter

polar

Sorted vertical bars

bar

Bollinger band

trend

Simple radar chart

polar

Scatterplot with linear regression

relationship

Stacked bars

bar

Streaming window preservation

interaction

Staggered entrance motion

motion

AAPL close playback scrubber

interaction

Two-dimensional vector field

spatial

Parallel coordinates

multivariate

San Francisco temperature moving averages

trend

United States county unemployment choropleth

geography

Annual gasoline-price waterfall

composition

English letter frequency rose

polar

Annotated AAPL extrema

trend

Violin distribution comparison

distribution

Labeled ordinal heatmap

matrix

Interrupted spring updates

motion

Flare analytics sunburst

hierarchy

Survey agreement share gauge

polar

Two-period slopegraph

change

Nested Flare package sizes

polar

Westport House floor plan

geography

Stacked and adjacent Seattle weather bars

comparison

Tidy hierarchy tree

hierarchy

Industry share of unemployment

composition

Dumbbell comparison

comparison

Ranked lollipop chart

comparison

English letter frequency donut

polar

Focus and context time window

interaction

Voronoi nearest-point interaction

interaction

Orthographic globe with graticule

geography

Beeswarm distribution

distribution

Type Safe & Declarative for both Humans & Agents

Every example compiles under strict TypeScript. Fields, datum types, inferred domains and keys, tooltips, and focus callbacks stay connected to the source datum; the type suite rejects invalid definitions.

account-health.tsx

import { scaleLinear } from '@tanstack/charts-scales/linear'
import { defineChart, dot } from '@tanstack/charts'
import { tooltip } from '@tanstack/charts/tooltip'
import { Chart } from '@tanstack/react-charts'
import { scaleSqrt } from 'd3-scale'

const accountHealth = defineChart({
  marks: [
    dot(accounts, {
      x: 'monthlyRevenue',
      y: 'retention',
      r: 'seats',
      rScale: {
        scale: () => scaleSqrt().range([4, 22]),
      },
      z: 'segment',
      key: 'id',
    }),
  ],
  x: {
    scale: scaleLinear,
    axis: { label: 'Monthly revenue ($k)' },
  },
  y: {
    scale: scaleLinear,
    axis: {
      label: '90-day retention',
      ticks: { format: (value) => percent.format(value) },
    },
  },
  tooltip,
})

export function AccountHealthChart({
  onFocus,
}: {
  onFocus: (account: Account | null) => void
}) {
  return (
    <Chart
      definition={accountHealth}
      ariaLabel="Account health by revenue, retention, segment, and seats"
      onFocusChange={(point) => onFocus(point?.datum ?? null)}
    />
  )
}

Account health

Example account dataset · Q2 2026

Which high-revenue accounts need retention attention?

EnterpriseGrowthSMBBubble size = seats

Make it look like your product.

Same data and scales. CSS variables, themes, mark props, custom tooltips, or your own renderer control the rest.

Editorial

Product

Terminal

Monokai

36.73–42.64 KiB across the controlled suite.

The compact React line is 26.48 KiB gzip; its framework-neutral scene is 10.28 KiB. The comparison methodology and fixtures measure complete cold-page browser bundles, including rendering, axes, styles, and library code.

Cold-page bundle comparison

Controlled 12-case cold-page bundles · minified + gzip

TanStack Charts36.7–42.6 KiB

Chart.js44.7–58.2 KiB

Observable Plot83.3–91.9 KiB

Recharts153.1–168.3 KiB

Apache ECharts153.1–173.2 KiB

Compose from marks to complete views.

Layer marks when they share a coordinate system. For compound charts, composeViews places complete definitions with fill, grid, layer, and inset utilities. Each view keeps its own scales unless you share or align them. View composition reference.

Weekly activation rate

Jan–May 2026 · illustrative product telemetry

78%

above 70% goal

ActivationExpected rangeGoalReleases

activation-chart.ts

import { scaleLinear } from '@tanstack/charts-scales/linear'
import { scaleUtc } from 'd3-scale'
import { curveMonotoneX } from 'd3-shape'
import {
  areaY,
  d3Curve,
  defineChart,
  dot,
  lineY,
  ruleY,
  text,
} from '@tanstack/charts'

import { releases, weeks } from './activation-data'
import { activationTheme } from './activation-theme'

const monthDay = new Intl.DateTimeFormat('en-US', {
  day: 'numeric',
  month: 'short',
  timeZone: 'UTC',
})

export const activationChart = defineChart({
  marks: [
    areaY(weeks, {
      id: 'activation-range',
      x: 'date',
      y1: 'expectedLow',
      y2: 'expectedHigh',
      key: 'id',
      fill: 'var(--activation-range)',
      fillOpacity: 0.22,
      curve: d3Curve(curveMonotoneX),
    }),
    ruleY([70], {
      id: 'activation-goal',
      stroke: 'var(--activation-goal)',
      strokeOpacity: 0.95,
      strokeWidth: 2,
      strokeDasharray: '7 7',
    }),
    lineY(weeks, {
      id: 'activation-line',
      x: 'date',
      y: 'activation',
      key: 'id',
      stroke: 'var(--activation-line)',
      strokeWidth: 4.25,
      points: true,
      curve: d3Curve(curveMonotoneX),
    }),
    dot(releases, {
      id: 'activation-events',
      x: 'date',
      y: 'activation',
      key: 'id',
      r: 6,
      fill: 'var(--activation-bg)',
      stroke: 'var(--activation-release)',
      strokeWidth: 3,
    }),
    text(releases, {
      id: 'activation-event-labels',
      x: 'date',
      y: 'activation',
      text: 'label',
      key: 'id',
      fill: 'var(--activation-foreground)',
      fontSize: 12,
      fontWeight: 650,
      dy: -21,
    }),
  ],
  x: {
    scale: scaleUtc().domain([weeks[0]!.date, weeks.at(-1)!.date]),
    axis: {
      label: 'Week ending',
      ticks: { format: (value) => monthDay.format(value) },
    },
    grid: false,
  },
  y: {
    scale: scaleLinear().domain([40, 82]),
    axis: {
      label: 'Activation rate (%)',
      ticks: { count: 5, format: (value) => `${Math.round(value)}%` },
    },
    grid: true,
  },
  theme: activationTheme,
})

TanStack Charts builds on Leland Wilkinson's grammar of graphics and the work of ggplot2, Vega-Lite, and Observable Plot. Its marks-and-channels API is most directly inspired by Observable Plot, but the runtime is an independent implementation.