Charts

A chart grammar you don't have to outgrow.

A typed, tree-shakable chart grammar for SVG and Canvas. Compose marks, views, scales, transforms, interactions, and motion with compact primitives or D3-compatible inputs.

Docs

San Francisco temperature range band

range

Grouped bars

bar

Bubble scatterplot

relationship

All mark, no chart.

County unemployment gauge

polar

Scatterplot with linear regression

relationship

Sorted vertical bars

bar

Industry unemployment bump chart

ranking

Grouped bars

bar

Marimekko survey composition

part-to-whole

Definition-owned motion

motion

Delaunay spatial network

spatial

Voronoi nearest-point interaction

interaction

San Francisco temperature range band

range

Westport House floor plan

geography

AAPL lag-one autocorrelation

relationship

Ranked lollipop chart

comparison

Free cursor over car measurements

interaction

World population bubble map

geography

English letter frequency pie

polar

Spring line updates

motion

Snapped axis pointer with grouped tooltip

interaction

Industry share of unemployment

composition

Cross-chart geometry morph

motion

Industry unemployment percentile ribbon

uncertainty

Histogram

distribution

English letter frequency donut

polar

Industry unemployment with end labels

trend

Stacked bars

bar

Surface wind polar scatter

polar

Violin distribution comparison

distribution

Token use calendar heatmap

time

San Francisco temperature moving averages

trend

Bollinger band

trend

Grouped boxplot

distribution

Two-period slopegraph

change

Precipitation calendar heatmap

time

World learning-poverty choropleth

geography

Flare analytics sunburst

hierarchy

Wheel zoom and pan over AAPL closes

interaction

Les Misérables character network

network

English letter frequency waffle

part-to-whole

Grouped X tooltip

interaction

Open-to-close price intervals

interval

Filled wind-speed contours

spatial

Layered Seattle weather chart

composition

Metro inequality change arrows

change

Mean penguin mass reducer bars

bar

HMS Beagle voyage

geography

Focus and context time window

interaction

Directed connected scatterplot

relationship

Expanding pinned energy tooltip

interaction

Indexed industry unemployment

trend

Streaming window preservation

interaction

Industry unemployment stacked area

composition

Empirical cumulative distribution

distribution

Scatterplot with marginal histograms

distribution

Basic Sankey

network

Simple radar chart

polar

Palmer penguins by species and sex

comparison

Interrupted spring updates

motion

English letter frequency rose

polar

Standard world projection gallery

geography

Point density contours

distribution

Candlestick chart

financial

Log-scale Flare class sizes

relationship

Stacked and adjacent Seattle weather bars

comparison

World population-density choropleth

geography

Apple close versus moving average

change

Annual gasoline-price waterfall

composition

Letter frequency donut with total

polar

Hexagonally binned density

distribution

Sankey

network

Diverging Likert responses

survey

United States county unemployment choropleth

geography

Concentric letter frequency bars

polar

Faceted distributions

small multiples

Orthographic globe with graticule

geography

Tidy hierarchy tree

hierarchy

Nested Flare package sizes

polar

Synchronized cursors across views

interaction

Anscombe quartet small multiples

small multiples

Automobile specifications scatter

performance

Annotated AAPL extrema

trend

Apple stock line with seasonal gaps

trend

Seattle daily high-temperature polar line

polar

Pointer-selected tooltip

interaction

Labeled ordinal heatmap

matrix

Rounded letter frequency donut

polar

Horizontal ranking with long labels

bar

Framed guide-free scatterplot

decoration

Bubble scatterplot

relationship

Point estimates with error bars

uncertainty

Editable event range

interaction

AAPL close playback scrubber

interaction

Beeswarm distribution

distribution

Focus and crosshair motion

motion

Scrollable resource timeline lanes

interaction

Quantitative binned heatmap

distribution

Streamgraph

composition

Survey agreement share gauge

polar

Observed monthly AAPL brush selection

interaction

Flare analytics treemap

hierarchy

Cumulative histogram

distribution

Interactive series legend

interaction

Comparative radar chart

polar

Linked chart and data table selection

interaction

Dumbbell comparison

comparison

Stacked bars with band and rule cursors

interaction

Parallel coordinates

multivariate

Staggered entrance motion

motion

Two-dimensional vector field

spatial

Ridgeline density comparison

distribution

Letter frequency pie with labels

polar

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/charts/react'
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

Illustrative account dataset

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

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

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.