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.

Industry unemployment bump chart

ranking

Violin distribution comparison

distribution

Streamgraph

composition

Industry unemployment stacked area

composition

Two-dimensional vector field

spatial

Nested Flare package sizes

polar

Point density contours

distribution

Editable event range

interaction

Industry share of unemployment

composition

English letter frequency donut

polar

Westport House floor plan

geography

Linked chart and data table selection

interaction

Cumulative histogram

distribution

Mean penguin mass reducer bars

bar

Stacked bars

bar

Labeled ordinal heatmap

matrix

Spring line updates

motion

World population bubble map

geography

Grouped boxplot

distribution

Focus and crosshair motion

motion

Sankey

network

Interactive series legend

interaction

Cross-chart geometry morph

motion

County unemployment gauge

polar

Interrupted spring updates

motion

Log-scale Flare class sizes

relationship

Layered Seattle weather chart

composition

Expanding pinned energy tooltip

interaction

Bollinger band

trend

World population-density choropleth

geography

Voronoi nearest-point interaction

interaction

Diverging Likert responses

survey

Ridgeline density comparison

distribution

Ranked lollipop chart

comparison

Comparative radar chart

polar

Framed guide-free scatterplot

decoration

Sorted vertical bars

bar

Token use calendar heatmap

time

Definition-owned motion

motion

Apple stock line with seasonal gaps

trend

Scrollable resource timeline lanes

interaction

Marimekko survey composition

part-to-whole

Scatterplot with linear regression

relationship

Parallel coordinates

multivariate

Concentric letter frequency bars

polar

Tidy hierarchy tree

hierarchy

Industry unemployment percentile ribbon

uncertainty

Hexagonally binned density

distribution

Delaunay spatial network

spatial

Metro inequality change arrows

change

Letter frequency donut with total

polar

Flare analytics sunburst

hierarchy

San Francisco temperature range band

range

Standard world projection gallery

geography

Filled wind-speed contours

spatial

Annotated AAPL extrema

trend

Grouped bars

bar

Beeswarm distribution

distribution

Automobile specifications scatter

performance

Faceted distributions

small multiples

Stacked and adjacent Seattle weather bars

comparison

Survey agreement share gauge

polar

Pointer-selected tooltip

interaction

Streaming window preservation

interaction

Empirical cumulative distribution

distribution

Rounded letter frequency donut

polar

Point estimates with error bars

uncertainty

Free cursor over car measurements

interaction

San Francisco temperature moving averages

trend

Focus and context time window

interaction

World learning-poverty choropleth

geography

Seattle daily high-temperature polar line

polar

Synchronized cursors across views

interaction

HMS Beagle voyage

geography

Candlestick chart

financial

Precipitation calendar heatmap

time

Stacked bars with band and rule cursors

interaction

Orthographic globe with graticule

geography

Anscombe quartet small multiples

small multiples

Flare analytics treemap

hierarchy

Open-to-close price intervals

interval

Simple radar chart

polar

Bubble scatterplot

relationship

Dumbbell comparison

comparison

AAPL lag-one autocorrelation

relationship

Scatterplot with marginal histograms

distribution

Palmer penguins by species and sex

comparison

Apple close versus moving average

change

Snapped axis pointer with grouped tooltip

interaction

Horizontal ranking with long labels

bar

Annual gasoline-price waterfall

composition

Observed monthly AAPL brush selection

interaction

English letter frequency pie

polar

Industry unemployment with end labels

trend

Two-period slopegraph

change

Basic Sankey

network

Directed connected scatterplot

relationship

AAPL close playback scrubber

interaction

Surface wind polar scatter

polar

Histogram

distribution

United States county unemployment choropleth

geography

Staggered entrance motion

motion

Letter frequency pie with labels

polar

English letter frequency waffle

part-to-whole

Quantitative binned heatmap

distribution

English letter frequency rose

polar

Wheel zoom and pan over AAPL closes

interaction

Les Misérables character network

network

Grouped X tooltip

interaction

Indexed industry unemployment

trend

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.