Charts

alpha

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

Seattle weather with three y axes

composition

Flare analytics sunburst

hierarchy

shadcn dashboard

application

Your next chart, already working.

Browse all 188 examples

Point estimates with error bars

uncertainty

Active bar dashboard

theme

Parallel coordinates

multivariate

Stacked and adjacent Seattle weather bars

comparison

shadcn Pie Chart - Legend

pie

Focus and crosshair motion

motion

Grouped bars

bar

shadcn Radial Chart - Grid

radial

Histogram

distribution

Apple stock line with seasonal gaps

trend

Streamgraph

composition

Beeswarm distribution

distribution

World population-density choropleth

geography

Annotated AAPL extrema

trend

Seattle daily high-temperature polar line

polar

Les Misérables character network

network

Stacked bars

bar

Drillable Flare sunburst

hierarchy

Seattle weather with three y axes

composition

Cumulative histogram

distribution

shadcn Radar Chart - Grid None

radar

Editable event range

interaction

shadcn Tooltip - No Indicator

tooltip

San Francisco temperature moving averages

trend

Wheel zoom and pan over AAPL closes

interaction

shadcn Tooltip - Icons

tooltip

Scatterplot with linear regression

relationship

Dumbbell comparison

comparison

English letter frequency waffle

part-to-whole

shadcn Radar Chart - Legend

radar

shadcn Area Chart - Linear

area

Framed guide-free scatterplot

decoration

Nested Flare package sizes

polar

Point density contours

distribution

Ridgeline density comparison

distribution

Focus and context time window

interaction

Marimekko survey composition

part-to-whole

Palmer penguins by species and sex

comparison

Grouped X tooltip

interaction

Flare analytics sunburst

hierarchy

Labeled ordinal heatmap

matrix

Sales conversion funnel

composition

Open-to-close price intervals

interval

shadcn Radar Chart - Grid Custom

radar

Theme palette matrix

theme

shadcn Bar Chart - Label

bar

Stacked bars with band and rule cursors

interaction

Delaunay spatial network

spatial

shadcn Bar Chart - Mixed

bar

World population bubble map

geography

shadcn Tooltip - Custom label

tooltip

shadcn Line Chart - Custom Label

line

shadcn Radial Chart

radial

shadcn Radial Chart - Label

radial

Scatterplot with marginal histograms

distribution

Orthographic globe with graticule

geography

shadcn Radial Chart - Text

radial

shadcn Radar Chart - Icons

radar

County unemployment gauge

polar

shadcn Pie Chart - Custom Label

pie

shadcn Area Chart - Stacked

area

shadcn Tooltip - No Label

tooltip

Apple close versus moving average

change

Industry unemployment bump chart

ranking

Interactive series legend

interaction

Westport House floor plan

geography

Flare analytics treemap

hierarchy

shadcn Line Chart - Custom Dots

line

shadcn Tooltip - Formatter

tooltip

shadcn dashboard

application

Comparative radar chart

polar

Free cursor over car measurements

interaction

shadcn Pie Chart - Label

pie

Log-scale Flare class sizes

relationship

shadcn Area Chart - Step

area

shadcn Pie Chart - Donut with Text

pie

shadcn Area Chart - Gradient

area

Premium KPI sparklines

composition

shadcn Radar Chart

radar

shadcn Bar Chart - Negative

bar

shadcn Line Chart - Multiple

line

Industry share of unemployment

composition

Mean penguin mass reducer bars

bar

shadcn Radar Chart - Grid Circle

radar

Cross-chart geometry morph

motion

Surface wind polar scatter

polar

Token use calendar heatmap

time

Automobile specifications scatter

performance

Faceted distributions

small multiples

Bollinger band

trend

shadcn Bar Chart - Multiple

bar

World learning-poverty choropleth

geography

Industry unemployment stacked area

composition

Spring line updates

motion

Voronoi nearest-point interaction

interaction

Two-period slopegraph

change

shadcn Bar Chart - Stacked + Legend

bar

Empirical cumulative distribution

distribution

shadcn Pie Chart

pie

Indexed industry unemployment

trend

Staggered entrance motion

motion

English letter frequency donut

polar

shadcn Line Chart - Dots Colors

line

shadcn Radar Chart - Lines Only

radar

Anscombe quartet small multiples

small multiples

San Francisco temperature range band

range

Interrupted spring updates

motion

Scrollable resource timeline lanes

interaction

Letter frequency donut with total

polar

Tidy hierarchy tree

hierarchy

Industry unemployment with end labels

trend

shadcn Area Chart - Interactive

area

shadcn Pie Chart - Donut

pie

shadcn Radar Chart - Grid Circle - No lines

radar

shadcn Line Chart - Label

line

shadcn Radar Chart - Multiple

radar

shadcn Line Chart - Linear

line

Bubble scatterplot

relationship

shadcn Line Chart

line

AAPL lag-one autocorrelation

relationship

English letter frequency rose

polar

Pointer-selected tooltip

interaction

Precipitation calendar heatmap

time

HMS Beagle voyage

geography

shadcn Tooltip - Label Formatter

tooltip

AAPL close playback scrubber

interaction

Simple radar chart

polar

Annual gasoline-price waterfall

composition

Horizontal ranking with long labels

bar

shadcn Bar Chart - Active

bar

Rounded letter frequency donut

polar

Directed connected scatterplot

relationship

shadcn Radial Chart - Stacked

radial

Snapped axis pointer with grouped tooltip

interaction

Definition-owned motion

motion

shadcn Line Chart - Step

line

English letter frequency pie

polar

Survey agreement share gauge

polar

Hexagonally binned density

distribution

shadcn Pie Chart - Stacked

pie

Concentric letter frequency bars

polar

Sankey

network

shadcn Radar Chart - Dots

radar

shadcn Pie Chart - Label List

pie

Linked chart and data table selection

interaction

shadcn Radar Chart - Custom Label

radar

shadcn Bar Chart - Horizontal

bar

shadcn Radar Chart - Grid Circle Filled

radar

Standard world projection gallery

geography

shadcn Radar Chart - Radius Axis

radar

Ranked lollipop chart

comparison

shadcn Area Chart

area

Basic Sankey

network

shadcn Radar Chart - Grid Filled

radar

Filled wind-speed contours

spatial

shadcn Area Chart - Icons

area

Streaming window preservation

interaction

shadcn Tooltip - Advanced

tooltip

shadcn Pie Chart - Interactive

pie

shadcn Area Chart - Axes

area

shadcn Line Chart - Dots

line

Active donut metric

theme

shadcn Pie Chart - Donut Active

pie

Observed monthly AAPL brush selection

interaction

Sorted vertical bars

bar

shadcn Pie Chart - Separator None

pie

Quantitative binned heatmap

distribution

shadcn Bar Chart - Custom Label

bar

Industry unemployment percentile ribbon

uncertainty

shadcn Area Chart - Stacked Expanded

area

Metro inequality change arrows

change

Letter frequency pie with labels

polar

shadcn Line Chart - Interactive

line

United States county unemployment choropleth

geography

shadcn Bar Chart

bar

Grouped boxplot

distribution

shadcn Tooltip - Line Indicator

tooltip

Themed interactive area card

theme

shadcn Tooltip - Default

tooltip

shadcn Area Chart - Legend

area

shadcn Radial Chart - Shape

radial

Expanding pinned energy tooltip

interaction

Two-dimensional vector field

spatial

shadcn Bar Chart - Interactive

bar

Candlestick chart

financial

Synchronized cursors across views

interaction

Violin distribution comparison

distribution

Diverging Likert responses

survey

A lot of chart. Not a lot of bundle.

TanStack Charts starts at 40 kB minified and gzip compressed in the current matched suite, with its SVG renderer, scales, axes, and styles included.

Bundle size snapshotAugust 2026 · rendered with TanStack Charts

See the full bundle comparison

Types stay connected to the source row.

Fields, datum types, inferred domains and keys, tooltips, and focus callbacks all trace back to the data you passed in. Every example compiles under strict TypeScript, and invalid definitions fail before they reach the browser.

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',
    }),
  ],
  scales: {
    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

SVG by default. Canvas where it earns its weight.

Move one paint-heavy mark to Canvas while axes, labels, focus, tooltips, responsive layout, hydration, and export keep working through one definition. Canvas and motion stay out of the default bundle until you import them.

Rendering and export reference

One definition, three surface choices

mixed-surface.ts

import { canvasChartRenderer } from '@tanstack/charts/canvas'
import { defineChart, dot, lineY } from '@tanstack/charts'

const activity = defineChart({
  marks: [
    lineY(summary, {
      x: 'time',
      y: 'average',
    }),
    dot(events, {
      x: 'time',
      y: 'latency',
      renderer: canvasChartRenderer,
    }),
  ],
  scales,
  tooltip,
})

Default SVG

Nothing

Axes, labels, marks, and focus render as accessible SVG. Tooltips use an accessible HTML live region.

Mixed SVG + Canvas

One mark option

Only the dense mark paints to Canvas. SVG guides and shared interaction stay in place.

Full Canvas

One adapter import

The whole chart paints to Canvas while the definition and host callbacks stay the same.

The same definition also feeds the web adapters, vanilla DOM, static output, and the experimental React Native adapter.

Make it look like your product.

Same data, scales, and interactions. CSS variables, themes, mark props, and custom tooltip content make the chart belong to your product.

Editorial

Product

Terminal

Monokai

Add ranges, goals, and events without switching APIs.

The area, goal rule, activation line, release points, and labels each use the rows and channels they need, then share one coordinate system. The same definition mixes a compact linear scale with D3's UTC scale and monotone curve.

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,
    }),
  ],
  scales: {
    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.

Build your first chart Browse examples