Charts

A chart grammar you don't have to outgrow.

TanStack Charts 0.6.5 is on npm. A compact React line consumer is 16.48 KiB gzip; its framework-neutral scene is 8.12 KiB.

Docs

San Francisco temperature range band

range

Grouped bars

bar

Sorted vertical bars

bar

Stacked bars

bar

All mark, no chart.

Just a few examples. The possibilities are endless.

Standard world projection gallery

geography

Surface wind polar scatter

polar

Orthographic globe with graticule

geography

Observed monthly AAPL brush selection

interaction

Framed guide-free scatterplot

decoration

Westport House floor plan

geography

Industry share of unemployment

composition

Bubble scatterplot

relationship

Histogram

distribution

English letter frequency rose

polar

Violin distribution comparison

distribution

Cumulative histogram

distribution

Pointer-selected tooltip

interaction

English letter frequency waffle

part-to-whole

Empirical cumulative distribution

distribution

Quantitative binned heatmap

distribution

Letter frequency donut with total

polar

Grouped X tooltip

interaction

Ranked lollipop chart

comparison

Parallel coordinates

multivariate

Concentric letter frequency bars

polar

Automobile specifications scatter

performance

Simple radar chart

polar

Sorted vertical bars

bar

Industry unemployment stacked area

composition

Cross-chart geometry morph

motion

Nested Flare package sizes

polar

Stacked bars

bar

Wheel zoom and pan over AAPL closes

interaction

Hexagonally binned density

distribution

Grouped boxplot

distribution

Annotated AAPL extrema

trend

Two-period slopegraph

change

Definition-owned motion

motion

AAPL close playback scrubber

interaction

Snapped axis pointer with grouped tooltip

interaction

Spring line updates

motion

Pinned penguin tooltip with a nested chart

interaction

Two-dimensional vector field

spatial

World population-density choropleth

geography

San Francisco temperature moving averages

trend

World learning-poverty choropleth

geography

Linked chart and data table selection

interaction

Sankey

network

Focus and context time window

interaction

English letter frequency donut

polar

Ridgeline density comparison

distribution

Metro inequality change arrows

change

Interactive series legend

interaction

San Francisco temperature range band

range

Log-scale Flare class sizes

relationship

Streamgraph

composition

Les Misérables character network

network

Scatterplot with marginal histograms

distribution

Seattle daily high-temperature polar line

polar

World population bubble map

geography

United States county unemployment choropleth

geography

Stacked and adjacent Seattle weather bars

comparison

Indexed industry unemployment

trend

Scatterplot with linear regression

relationship

Annual gasoline-price waterfall

composition

Dumbbell comparison

comparison

Labeled ordinal heatmap

matrix

Filled wind-speed contours

spatial

Basic Sankey

network

Bollinger band

trend

Industry unemployment with end labels

trend

County unemployment gauge

polar

Survey agreement share gauge

polar

Anscombe quartet small multiples

small multiples

Candlestick chart

financial

Industry unemployment bump chart

ranking

Diverging Likert responses

survey

Tidy hierarchy tree

hierarchy

Comparative radar chart

polar

Letter frequency pie with labels

polar

HMS Beagle voyage

geography

Apple close versus moving average

change

Directed connected scatterplot

relationship

Faceted distributions

small multiples

Marimekko survey composition

part-to-whole

Focus and crosshair motion

motion

Flare analytics sunburst

hierarchy

Synchronized cursors across views

interaction

Palmer penguins by species and sex

comparison

Layered Seattle weather chart

composition

Point density contours

distribution

Point estimates with error bars

uncertainty

Streaming window preservation

interaction

Free cursor over car measurements

interaction

Horizontal ranking with long labels

bar

Rounded letter frequency donut

polar

English letter frequency pie

polar

Mean penguin mass reducer bars

bar

Editable event range

interaction

Scrollable resource timeline lanes

interaction

Industry unemployment percentile ribbon

uncertainty

Interrupted spring updates

motion

Token use calendar heatmap

time

Open-to-close price intervals

interval

Voronoi nearest-point interaction

interaction

Precipitation calendar heatmap

time

Beeswarm distribution

distribution

Grouped bars

bar

AAPL lag-one autocorrelation

relationship

Flare analytics treemap

hierarchy

Delaunay spatial network

spatial

Staggered entrance motion

motion

Apple stock line with seasonal gaps

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.ts

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

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

16.48 KiB for a compact React line.

The framework-neutral scene is 8.12 KiB and retains neither D3 nor InternMap. For an apples-to-apples comparison, the pinned 12-case suite measures full cold-page browser bundles; Bklit's interactive line is included alongside the published library ranges.

Cold-page bundle comparison

Published 12-chart ranges; Bklit is an interactive line · minified + gzip

TanStack Charts26.6–32.1 KiB

Chart.js44.7–58.2 KiB

Observable Plot83.3–91.9 KiB

Bklit152.1 KiB

Recharts153.1–168.3 KiB

Apache ECharts153.1–173.2 KiB

Layer marks over shared scales.

Area, rules, lines, points, and labels share one coordinate system. The definition beside the chart is the whole composition.

Weekly activation rate

Jan–May 2026 · illustrative product telemetry

78%

above 70% goal

ActivationExpected rangeGoalReleases

activation-chart.ts

import { curveMonotoneX, scaleLinear, scaleUtc } from 'd3'
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.