Framework

Start Router

Data & State

Query DB Store AI

UI & UX

Table Charts Form Hotkeys Markdown Highlight

Performance

Virtual Pacer

Tooling

Devtools Config CLI Intent

Blog

Blog & Release Notes

About

YouTubeThe official TanStack channel.WorkshopsLive sessions from the maintainers.Release NotesThe latest releases and changelog.

Channels

DiscordReal-time community support.GitHubSource, issues, discussions, and releases.

People & Work

MaintainersMeet the people maintaining the stack.ShowcaseTeams building with TanStack.

Tools

BuilderAlphaGenerate TanStack app starters.NotebookCreate and share client-side TSX modules.StatsNPM and ecosystem usage data.

Merch

View all

Support

Support OverviewFind the right support path.PartnersCompanies supporting TanStack.OSS SponsorsSponsors keeping TanStack open source.Enterprise SupportPrivate consulting and expert support.ContactGet in touch with the TanStack team.

About

EthosHow we approach open source.TenetsThe values that shape TanStack libraries.Design SystemLogos, tokens, and UI components.

Partners

Sponsorships, placements, and partner pages.

Work with

Partnership Inquiry

Charts Docs

Home
Get Started
Guides
API
Examples

Examples

Chart Guides

Overview
shadcn/ui Charts
Lines and Areas
Bars and Rankings
Scatterplots and Relationships
Distributions
Heatmaps and Densities
Intervals and Financial Charts
Stacked and Composed Charts
Facets and Multiple Views
Networks and Hierarchies
Maps and Spatial Charts
Polar and Radar Charts
Annotations and Overlays
Interactive Charts
Themes and Motion

Individual Charts

Apple stock line with seasonal gaps
Industry unemployment with end labels
San Francisco temperature range band
Industry unemployment stacked area
Sorted vertical bars
Horizontal ranking with long labels
Grouped bars
Stacked bars
Bubble scatterplot
Histogram
Labeled ordinal heatmap
Anscombe quartet small multiples
Open-to-close price intervals
Point estimates with error bars
Grouped boxplot
Ranked lollipop chart
Dumbbell comparison
Cumulative histogram
San Francisco temperature moving averages
Industry share of unemployment
Streamgraph
Bollinger band
Quantitative binned heatmap
Precipitation calendar heatmap
Diverging Likert responses
Parallel coordinates
Candlestick chart
Annual gasoline-price waterfall
Two-period slopegraph
Scatterplot with linear regression
Metro inequality change arrows
Apple close versus moving average
Pointer-selected tooltip
Grouped X tooltip
Tidy hierarchy tree
Delaunay spatial network
Filled wind-speed contours
Point density contours
Westport House floor plan
Les Misérables character network
English letter frequency waffle
Two-dimensional vector field
Hexagonally binned density
Framed guide-free scatterplot
Empirical cumulative distribution
Faceted distributions
Beeswarm distribution
Log-scale Flare class sizes
Industry unemployment bump chart
Indexed industry unemployment
Directed connected scatterplot
Scatterplot with marginal histograms
Annotated AAPL extrema
Mean penguin mass reducer bars
AAPL lag-one autocorrelation
Industry unemployment percentile ribbon
Ridgeline density comparison
Violin distribution comparison
Marimekko survey composition
Voronoi nearest-point interaction
Layered Seattle weather chart
Palmer penguins by species and sex
Stacked and adjacent Seattle weather bars
Automobile specifications scatter
Flare analytics treemap
Simple radar chart
English letter frequency pie
English letter frequency donut
Survey agreement share gauge
Snapped axis pointer with grouped tooltip
Interactive series legend
Linked chart and data table selection
Focus and context time window
Expanding pinned energy tooltip
Scrollable resource timeline lanes
Streaming window preservation
Synchronized cursors across views
Free cursor over car measurements
Observed monthly AAPL brush selection
Wheel zoom and pan over AAPL closes
AAPL close playback scrubber
Editable event range
Letter frequency pie with labels
Letter frequency donut with total
Rounded letter frequency donut
Nested Flare package sizes
English letter frequency rose
County unemployment gauge
Comparative radar chart
Concentric letter frequency bars
Flare analytics sunburst
World learning-poverty choropleth
World population bubble map
Orthographic globe with graticule
HMS Beagle voyage
Seattle daily high-temperature polar line
Surface wind polar scatter
World population-density choropleth
United States county unemployment choropleth
Standard world projection gallery
Basic Sankey
Sankey
Staggered entrance motion
Interrupted spring updates
Spring line updates
Definition-owned motion
Cross-chart geometry morph
Focus and crosshair motion
Token use calendar heatmap
Stacked bars with band and rule cursors
Themed interactive area card
Active bar dashboard
Premium KPI sparklines
Active donut metric
Theme palette matrix
Sales conversion funnel
Drillable Flare sunburst
shadcn dashboard
shadcn bar chart – multiple
shadcn pie chart – donut with text
shadcn radar chart – multiple
shadcn radial chart – text
shadcn tooltip – advanced
shadcn Area Chart - Axes
shadcn Area Chart
shadcn Area Chart - Gradient
shadcn Area Chart - Icons
shadcn Area Chart - Interactive
shadcn Area Chart - Legend
shadcn Area Chart - Linear
shadcn Area Chart - Stacked Expanded
shadcn Area Chart - Stacked
shadcn Area Chart - Step
shadcn Bar Chart - Active
shadcn Bar Chart
shadcn Bar Chart - Horizontal
shadcn Bar Chart - Interactive
shadcn Bar Chart - Custom Label
shadcn Bar Chart - Label
shadcn Bar Chart - Mixed
shadcn Bar Chart - Negative
shadcn Bar Chart - Stacked + Legend
shadcn Line Chart
shadcn Line Chart - Dots Colors
shadcn Line Chart - Custom Dots
shadcn Line Chart - Dots
shadcn Line Chart - Interactive
shadcn Line Chart - Custom Label
shadcn Line Chart - Label
shadcn Line Chart - Linear
shadcn Line Chart - Multiple
shadcn Line Chart - Step
shadcn Pie Chart - Donut Active
shadcn Pie Chart - Donut
shadcn Pie Chart - Interactive
shadcn Pie Chart - Custom Label
shadcn Pie Chart - Label List
shadcn Pie Chart - Label
shadcn Pie Chart - Legend
shadcn Pie Chart - Separator None
shadcn Pie Chart
shadcn Pie Chart - Stacked
shadcn Radar Chart
shadcn Radar Chart - Dots
shadcn Radar Chart - Grid Circle Filled
shadcn Radar Chart - Grid Circle - No lines
shadcn Radar Chart - Grid Circle
shadcn Radar Chart - Grid Custom
shadcn Radar Chart - Grid Filled
shadcn Radar Chart - Grid None
shadcn Radar Chart - Icons
shadcn Radar Chart - Custom Label
shadcn Radar Chart - Legend
shadcn Radar Chart - Lines Only
shadcn Radar Chart - Radius Axis
shadcn Radial Chart - Grid
shadcn Radial Chart - Label
shadcn Radial Chart - Shape
shadcn Radial Chart
shadcn Radial Chart - Stacked
shadcn Tooltip - Default
shadcn Tooltip - Formatter
shadcn Tooltip - Icons
shadcn Tooltip - Line Indicator
shadcn Tooltip - No Indicator
shadcn Tooltip - Custom label
shadcn Tooltip - Label Formatter
shadcn Tooltip - No Label

Charts

Home Get Started Guides API Examples

Built in public Partner-backed Sponsor-supported

Examples

Chart Guides

Overview
shadcn/ui Charts
Lines and Areas
Bars and Rankings
Scatterplots and Relationships
Distributions
Heatmaps and Densities
Intervals and Financial Charts
Stacked and Composed Charts
Facets and Multiple Views
Networks and Hierarchies
Maps and Spatial Charts
Polar and Radar Charts
Annotations and Overlays
Interactive Charts
Themes and Motion

Individual Charts

Apple stock line with seasonal gaps
Industry unemployment with end labels
San Francisco temperature range band
Industry unemployment stacked area
Sorted vertical bars
Horizontal ranking with long labels
Grouped bars
Stacked bars
Bubble scatterplot
Histogram
Labeled ordinal heatmap
Anscombe quartet small multiples
Open-to-close price intervals
Point estimates with error bars
Grouped boxplot
Ranked lollipop chart
Dumbbell comparison
Cumulative histogram
San Francisco temperature moving averages
Industry share of unemployment
Streamgraph
Bollinger band
Quantitative binned heatmap
Precipitation calendar heatmap
Diverging Likert responses
Parallel coordinates
Candlestick chart
Annual gasoline-price waterfall
Two-period slopegraph
Scatterplot with linear regression
Metro inequality change arrows
Apple close versus moving average
Pointer-selected tooltip
Grouped X tooltip
Tidy hierarchy tree
Delaunay spatial network
Filled wind-speed contours
Point density contours
Westport House floor plan
Les Misérables character network
English letter frequency waffle
Two-dimensional vector field
Hexagonally binned density
Framed guide-free scatterplot
Empirical cumulative distribution
Faceted distributions
Beeswarm distribution
Log-scale Flare class sizes
Industry unemployment bump chart
Indexed industry unemployment
Directed connected scatterplot
Scatterplot with marginal histograms
Annotated AAPL extrema
Mean penguin mass reducer bars
AAPL lag-one autocorrelation
Industry unemployment percentile ribbon
Ridgeline density comparison
Violin distribution comparison
Marimekko survey composition
Voronoi nearest-point interaction
Layered Seattle weather chart
Palmer penguins by species and sex
Stacked and adjacent Seattle weather bars
Automobile specifications scatter
Flare analytics treemap
Simple radar chart
English letter frequency pie
English letter frequency donut
Survey agreement share gauge
Snapped axis pointer with grouped tooltip
Interactive series legend
Linked chart and data table selection
Focus and context time window
Expanding pinned energy tooltip
Scrollable resource timeline lanes
Streaming window preservation
Synchronized cursors across views
Free cursor over car measurements
Observed monthly AAPL brush selection
Wheel zoom and pan over AAPL closes
AAPL close playback scrubber
Editable event range
Letter frequency pie with labels
Letter frequency donut with total
Rounded letter frequency donut
Nested Flare package sizes
English letter frequency rose
County unemployment gauge
Comparative radar chart
Concentric letter frequency bars
Flare analytics sunburst
World learning-poverty choropleth
World population bubble map
Orthographic globe with graticule
HMS Beagle voyage
Seattle daily high-temperature polar line
Surface wind polar scatter
World population-density choropleth
United States county unemployment choropleth
Standard world projection gallery
Basic Sankey
Sankey
Staggered entrance motion
Interrupted spring updates
Spring line updates
Definition-owned motion
Cross-chart geometry morph
Focus and crosshair motion
Token use calendar heatmap
Stacked bars with band and rule cursors
Themed interactive area card
Active bar dashboard
Premium KPI sparklines
Active donut metric
Theme palette matrix
Sales conversion funnel
Drillable Flare sunburst
shadcn dashboard
shadcn bar chart – multiple
shadcn pie chart – donut with text
shadcn radar chart – multiple
shadcn radial chart – text
shadcn tooltip – advanced
shadcn Area Chart - Axes
shadcn Area Chart
shadcn Area Chart - Gradient
shadcn Area Chart - Icons
shadcn Area Chart - Interactive
shadcn Area Chart - Legend
shadcn Area Chart - Linear
shadcn Area Chart - Stacked Expanded
shadcn Area Chart - Stacked
shadcn Area Chart - Step
shadcn Bar Chart - Active
shadcn Bar Chart
shadcn Bar Chart - Horizontal
shadcn Bar Chart - Interactive
shadcn Bar Chart - Custom Label
shadcn Bar Chart - Label
shadcn Bar Chart - Mixed
shadcn Bar Chart - Negative
shadcn Bar Chart - Stacked + Legend
shadcn Line Chart
shadcn Line Chart - Dots Colors
shadcn Line Chart - Custom Dots
shadcn Line Chart - Dots
shadcn Line Chart - Interactive
shadcn Line Chart - Custom Label
shadcn Line Chart - Label
shadcn Line Chart - Linear
shadcn Line Chart - Multiple
shadcn Line Chart - Step
shadcn Pie Chart - Donut Active
shadcn Pie Chart - Donut
shadcn Pie Chart - Interactive
shadcn Pie Chart - Custom Label
shadcn Pie Chart - Label List
shadcn Pie Chart - Label
shadcn Pie Chart - Legend
shadcn Pie Chart - Separator None
shadcn Pie Chart
shadcn Pie Chart - Stacked
shadcn Radar Chart
shadcn Radar Chart - Dots
shadcn Radar Chart - Grid Circle Filled
shadcn Radar Chart - Grid Circle - No lines
shadcn Radar Chart - Grid Circle
shadcn Radar Chart - Grid Custom
shadcn Radar Chart - Grid Filled
shadcn Radar Chart - Grid None
shadcn Radar Chart - Icons
shadcn Radar Chart - Custom Label
shadcn Radar Chart - Legend
shadcn Radar Chart - Lines Only
shadcn Radar Chart - Radius Axis
shadcn Radial Chart - Grid
shadcn Radial Chart - Label
shadcn Radial Chart - Shape
shadcn Radial Chart
shadcn Radial Chart - Stacked
shadcn Tooltip - Default
shadcn Tooltip - Formatter
shadcn Tooltip - Icons
shadcn Tooltip - Line Indicator
shadcn Tooltip - No Indicator
shadcn Tooltip - Custom label
shadcn Tooltip - Label Formatter
shadcn Tooltip - No Label

All examples

shadcn/ui Charts

TanStack Charts implementations of every official shadcn/ui chart example, plus the dashboard.

71 examples

shadcn dashboard

application

shadcn bar chart – multiple

bar

shadcn pie chart – donut with text

pie

shadcn radar chart – multiple

radar

shadcn radial chart – text

radial

shadcn tooltip – advanced

tooltip

shadcn Area Chart - Axes

area

shadcn Area Chart

area

shadcn Area Chart - Gradient

area

shadcn Area Chart - Icons

area

shadcn Area Chart - Interactive

area

shadcn Area Chart - Legend

area

shadcn Area Chart - Linear

area

shadcn Area Chart - Stacked Expanded

area

shadcn Area Chart - Stacked

area

shadcn Area Chart - Step

area

shadcn Bar Chart - Active

bar

shadcn Bar Chart

bar

shadcn Bar Chart - Horizontal

bar

shadcn Bar Chart - Interactive

bar

shadcn Bar Chart - Custom Label

bar

shadcn Bar Chart - Label

bar

shadcn Bar Chart - Mixed

bar

shadcn Bar Chart - Negative

bar

shadcn Bar Chart - Stacked + Legend

bar

shadcn Line Chart

line

shadcn Line Chart - Dots Colors

line

shadcn Line Chart - Custom Dots

line

shadcn Line Chart - Dots

line

shadcn Line Chart - Interactive

line

shadcn Line Chart - Custom Label

line

shadcn Line Chart - Label

line

shadcn Line Chart - Linear

line

shadcn Line Chart - Multiple

line

shadcn Line Chart - Step

line

shadcn Pie Chart - Donut Active

pie

shadcn Pie Chart - Donut

pie

shadcn Pie Chart - Interactive

pie

shadcn Pie Chart - Custom Label

pie

shadcn Pie Chart - Label List

pie

shadcn Pie Chart - Label

pie

shadcn Pie Chart - Legend

pie

shadcn Pie Chart - Separator None

pie

shadcn Pie Chart

pie

shadcn Pie Chart - Stacked

pie

shadcn Radar Chart

radar

shadcn Radar Chart - Dots

radar

shadcn Radar Chart - Grid Circle Filled

radar

shadcn Radar Chart - Grid Circle - No lines

radar

shadcn Radar Chart - Grid Circle

radar

shadcn Radar Chart - Grid Custom

radar

shadcn Radar Chart - Grid Filled

radar

shadcn Radar Chart - Grid None

radar

shadcn Radar Chart - Icons

radar

shadcn Radar Chart - Custom Label

radar

shadcn Radar Chart - Legend

radar

shadcn Radar Chart - Lines Only

radar

shadcn Radar Chart - Radius Axis

radar

shadcn Radial Chart - Grid

radial

shadcn Radial Chart - Label

radial

shadcn Radial Chart - Shape

radial

shadcn Radial Chart

radial

shadcn Radial Chart - Stacked

radial

shadcn Tooltip - Default

tooltip

shadcn Tooltip - Formatter

tooltip

shadcn Tooltip - Icons

tooltip

shadcn Tooltip - Line Indicator

tooltip

shadcn Tooltip - No Indicator

tooltip

shadcn Tooltip - Custom label

tooltip

shadcn Tooltip - Label Formatter

tooltip

shadcn Tooltip - No Label

tooltip

The open source application stack for the web.

Libraries

Browse all
Query
Router
Start
Table
Form

Blog

Latest posts
Release notes
YouTube
Workshops

Community

Discord
GitHub
Maintainers
Showcase

Tools

Builder
Stats

Merch

Shop
Cart

Support

Support overview
Partners
OSS sponsors
Enterprise support
Contact
Ethos
Tenets
Design system

Privacy
Terms