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.

Industry unemployment stacked area

composition

Letter frequency pie with labels

polar

Surface wind polar scatter

polar

Stacked bars with band and rule cursors

interaction

Empirical cumulative distribution

distribution

Bubble scatterplot

relationship

Two-dimensional vector field

spatial

Industry unemployment percentile ribbon

uncertainty

Definition-owned motion

motion

Grouped X tooltip

interaction

Nested Flare package sizes

polar

Spring line updates

motion

Scrollable resource timeline lanes

interaction

English letter frequency rose

polar

Survey agreement share gauge

polar

San Francisco temperature range band

range

World population bubble map

geography

English letter frequency waffle

part-to-whole

Orthographic globe with graticule

geography

Industry unemployment bump chart

ranking

Mean penguin mass reducer bars

bar

Sorted vertical bars

bar

United States county unemployment choropleth

geography

Comparative radar chart

polar

AAPL lag-one autocorrelation

relationship

Staggered entrance motion

motion

Grouped boxplot

distribution

World learning-poverty choropleth

geography

Standard world projection gallery

geography

Flare analytics sunburst

hierarchy

Token use calendar heatmap

time

English letter frequency pie

polar

Tidy hierarchy tree

hierarchy

Filled wind-speed contours

spatial

Faceted distributions

small multiples

Expanding pinned energy tooltip

interaction

Point density contours

distribution

Automobile specifications scatter

performance

AAPL close playback scrubber

interaction

Point estimates with error bars

uncertainty

Framed guide-free scatterplot

decoration

Stacked and adjacent Seattle weather bars

comparison

Concentric letter frequency bars

polar

Histogram

distribution

Candlestick chart

financial

Ridgeline density comparison

distribution

English letter frequency donut

polar

Linked chart and data table selection

interaction

Voronoi nearest-point interaction

interaction

Annual gasoline-price waterfall

composition

Apple stock line with seasonal gaps

trend

Open-to-close price intervals

interval

County unemployment gauge

polar

Log-scale Flare class sizes

relationship

Scatterplot with linear regression

relationship

Metro inequality change arrows

change

Parallel coordinates

multivariate

Pointer-selected tooltip

interaction

Wheel zoom and pan over AAPL closes

interaction

Basic Sankey

network

Delaunay spatial network

spatial

Horizontal ranking with long labels

bar

Les Misérables character network

network

Flare analytics treemap

hierarchy

HMS Beagle voyage

geography

Industry share of unemployment

composition

Stacked bars

bar

Beeswarm distribution

distribution

Streamgraph

composition

Anscombe quartet small multiples

small multiples

Apple close versus moving average

change

San Francisco temperature moving averages

trend

Layered Seattle weather chart

composition

Snapped axis pointer with grouped tooltip

interaction

Violin distribution comparison

distribution

Cross-chart geometry morph

motion

Hexagonally binned density

distribution

Letter frequency donut with total

polar

Synchronized cursors across views

interaction

Interactive series legend

interaction

Quantitative binned heatmap

distribution

Streaming window preservation

interaction

Industry unemployment with end labels

trend

Editable event range

interaction

Grouped bars

bar

Ranked lollipop chart

comparison

Indexed industry unemployment

trend

Labeled ordinal heatmap

matrix

Interrupted spring updates

motion

Cumulative histogram

distribution

Sankey

network

World population-density choropleth

geography

Diverging Likert responses

survey

Directed connected scatterplot

relationship

Dumbbell comparison

comparison

Focus and context time window

interaction

Simple radar chart

polar

Marimekko survey composition

part-to-whole

Annotated AAPL extrema

trend

Scatterplot with marginal histograms

distribution

Palmer penguins by species and sex

comparison

Focus and crosshair motion

motion

Westport House floor plan

geography

Precipitation calendar heatmap

time

Two-period slopegraph

change

Observed monthly AAPL brush selection

interaction

Bollinger band

trend

Seattle daily high-temperature polar line

polar

Free cursor over car measurements

interaction

Rounded letter frequency donut

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/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

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.