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

shadcn Bar Chart - Horizontal

bar

shadcn Pie Chart - Stacked

pie

shadcn Radar Chart - Grid Custom

radar

Grouped X tooltip

interaction

shadcn Radar Chart - Grid Filled

radar

shadcn Bar Chart - Active

bar

Log-scale Flare class sizes

relationship

Diverging Likert responses

survey

Stacked bars with band and rule cursors

interaction

Observed monthly AAPL brush selection

interaction

shadcn Radar Chart - Custom Label

radar

Definition-owned motion

motion

Pointer-selected tooltip

interaction

shadcn Radar Chart

radar

shadcn Area Chart - Icons

area

shadcn Radial Chart - Label

radial

shadcn Tooltip - Advanced

tooltip

Survey agreement share gauge

polar

Theme palette matrix

theme

Industry unemployment percentile ribbon

uncertainty

Anscombe quartet small multiples

small multiples

shadcn Pie Chart - Separator None

pie

shadcn Radar Chart - Radius Axis

radar

English letter frequency rose

polar

Interactive series legend

interaction

shadcn Pie Chart - Label List

pie

Token use calendar heatmap

time

Letter frequency donut with total

polar

Grouped boxplot

distribution

Concentric letter frequency bars

polar

shadcn Area Chart - Step

area

Interrupted spring updates

motion

shadcn Bar Chart - Mixed

bar

Seattle weather with three y axes

composition

San Francisco temperature moving averages

trend

shadcn Bar Chart - Negative

bar

United States county unemployment choropleth

geography

Parallel coordinates

multivariate

shadcn Area Chart - Stacked

area

Scatterplot with marginal histograms

distribution

Beeswarm distribution

distribution

shadcn Tooltip - Default

tooltip

shadcn Line Chart - Custom Dots

line

Two-dimensional vector field

spatial

Wheel zoom and pan over AAPL closes

interaction

Industry unemployment with end labels

trend

shadcn Radar Chart - Lines Only

radar

shadcn Radial Chart - Grid

radial

shadcn Radar Chart - Grid None

radar

Focus and crosshair motion

motion

Quantitative binned heatmap

distribution

AAPL close playback scrubber

interaction

shadcn Pie Chart - Donut with Text

pie

shadcn Tooltip - Formatter

tooltip

shadcn Pie Chart - Interactive

pie

shadcn Pie Chart - Label

pie

shadcn Line Chart - Interactive

line

Scatterplot with linear regression

relationship

Streaming window preservation

interaction

shadcn Radar Chart - Grid Circle - No lines

radar

shadcn Radial Chart

radial

Expanding pinned energy tooltip

interaction

shadcn Tooltip - Label Formatter

tooltip

Mean penguin mass reducer bars

bar

Apple close versus moving average

change

shadcn Radar Chart - Legend

radar

shadcn Radial Chart - Stacked

radial

Filled wind-speed contours

spatial

Dumbbell comparison

comparison

Industry unemployment bump chart

ranking

World learning-poverty choropleth

geography

shadcn Line Chart - Dots Colors

line

Les Misérables character network

network

shadcn Tooltip - Custom label

tooltip

English letter frequency donut

polar

Surface wind polar scatter

polar

Annual gasoline-price waterfall

composition

Bubble scatterplot

relationship

shadcn Area Chart - Interactive

area

Tidy hierarchy tree

hierarchy

shadcn Line Chart

line

shadcn Line Chart - Label

line

World population-density choropleth

geography

San Francisco temperature range band

range

shadcn Tooltip - No Indicator

tooltip

Automobile specifications scatter

performance

shadcn Bar Chart

bar

Staggered entrance motion

motion

shadcn Pie Chart

pie

shadcn Area Chart - Stacked Expanded

area

Sankey

network

World population bubble map

geography

AAPL lag-one autocorrelation

relationship

shadcn Line Chart - Dots

line

Nested Flare package sizes

polar

shadcn Radar Chart - Grid Circle Filled

radar

Precipitation calendar heatmap

time

shadcn Tooltip - Line Indicator

tooltip

Labeled ordinal heatmap

matrix

Letter frequency pie with labels

polar

shadcn Bar Chart - Label

bar

Standard world projection gallery

geography

shadcn Bar Chart - Multiple

bar

Themed interactive area card

theme

shadcn Area Chart - Axes

area

Apple stock line with seasonal gaps

trend

Sorted vertical bars

bar

Scrollable resource timeline lanes

interaction

Basic Sankey

network

Industry unemployment stacked area

composition

Synchronized cursors across views

interaction

Ridgeline density comparison

distribution

Directed connected scatterplot

relationship

shadcn Radial Chart - Shape

radial

Indexed industry unemployment

trend

English letter frequency pie

polar

Sales conversion funnel

composition

Active donut metric

theme

shadcn Line Chart - Multiple

line

shadcn Area Chart - Legend

area

Premium KPI sparklines

composition

Voronoi nearest-point interaction

interaction

shadcn Area Chart

area

Westport House floor plan

geography

shadcn Pie Chart - Donut Active

pie

shadcn Pie Chart - Donut

pie

shadcn dashboard

application

HMS Beagle voyage

geography

Point density contours

distribution

Flare analytics treemap

hierarchy

shadcn Pie Chart - Legend

pie

shadcn Line Chart - Step

line

Rounded letter frequency donut

polar

Framed guide-free scatterplot

decoration

Linked chart and data table selection

interaction

Grouped bars

bar

Candlestick chart

financial

Open-to-close price intervals

interval

Snapped axis pointer with grouped tooltip

interaction

Annotated AAPL extrema

trend

Two-period slopegraph

change

Cross-chart geometry morph

motion

Active bar dashboard

theme

shadcn Area Chart - Gradient

area

shadcn Radar Chart - Dots

radar

shadcn Radar Chart - Multiple

radar

Marimekko survey composition

part-to-whole

Delaunay spatial network

spatial

shadcn Tooltip - Icons

tooltip

Stacked bars

bar

County unemployment gauge

polar

Editable event range

interaction

Orthographic globe with graticule

geography

Drillable Flare sunburst

hierarchy

shadcn Line Chart - Custom Label

line

shadcn Bar Chart - Stacked + Legend

bar

Focus and context time window

interaction

English letter frequency waffle

part-to-whole

Hexagonally binned density

distribution

Empirical cumulative distribution

distribution

shadcn Radar Chart - Icons

radar

Free cursor over car measurements

interaction

Streamgraph

composition

shadcn Area Chart - Linear

area

Violin distribution comparison

distribution

Histogram

distribution

Stacked and adjacent Seattle weather bars

comparison

Simple radar chart

polar

Industry share of unemployment

composition

shadcn Bar Chart - Interactive

bar

Bollinger band

trend

Seattle daily high-temperature polar line

polar

Comparative radar chart

polar

shadcn Radial Chart - Text

radial

Palmer penguins by species and sex

comparison

Cumulative histogram

distribution

Faceted distributions

small multiples

Spring line updates

motion

Metro inequality change arrows

change

Ranked lollipop chart

comparison

Point estimates with error bars

uncertainty

shadcn Pie Chart - Custom Label

pie

shadcn Radar Chart - Grid Circle

radar

Flare analytics sunburst

hierarchy

shadcn Tooltip - No Label

tooltip

Horizontal ranking with long labels

bar

shadcn Bar Chart - Custom Label

bar

shadcn Line Chart - Linear

line

A lot of chart. Not a lot of bundle.

Basic React line, 29 kB minified + gzip. SVG, compact scales, axes 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