API Reference

TanStack Charts has a small framework-neutral core and thin framework adapters. Most applications use defineChart, one or more marks, configured scales, and the selected framework's chart binding. Lower-level entry points are available for custom marks, vanilla DOM mounting, static rendering, export, and application-owned interaction.

Core reference

Area	Reference
Object and responsive definitions	Chart Definition API
The ChartSpec object	Chart spec
Positional scales, axes, color, legends, and gradients	Scales, guides, and color
Vanilla DOM mounting and responsive sizing	DOM host
Framework prerender, mount, update, and layout lifecycle	Adapter controller
Dynamic scene compilation and runtime behavior	Runtime and scene
Eager row, hierarchy, and static force transforms	Data transforms
Pointer focus, keyboard navigation, tooltips, and selection	Focus and interaction
SVG, Canvas, custom rendering, reconciliation, and export	Rendering and export
Optional tween and spring motion	Motion
Custom marks, renderers, scales, and indexes	Custom extensions
Public generic and scene types	Types

Mark reference

Marks	Reference
lineY, lineX, areaY, and areaX	Line and area
differenceY and differenceX	Difference
linearRegressionY and linearRegressionX	Linear regression
barY, barX, rect, and cell	Bar and rect
boxY and boxX	Box
dot and hexagon	Dot and hexagon
dodgeY and dodgeX	Dodge layouts
waffleY and waffleX	Waffle
ridgelineY and ridgelineX	Ridgeline
violinY and violinX	Violin
focusGuideX and focusGuideY	Focus guide
treemap	Treemap
sunburst	Sunburst
sankeyDiagram	Sankey diagram
hexbin	Hexbin
contour	Contour
densityContour	Density contour
delaunayLink	Delaunay link
voronoi	Voronoi
ruleX, ruleY, link, arrow, vector, tickX, and tickY	Rules, links, arrows, vectors, and ticks
text, frame, facet, and facetChart	Text, frame, and facet
composeViews, layout utilities, and viewGrid	View composition
geoShape	Geo shape
polar, radial marks, and polar guides	Polar marks
crosshair	Focus and interaction

Framework adapters

Framework	Start	Adapter behavior	Component API
React	Quick start	Adapter	Chart
Preact	—	Adapter	Chart
Vue	—	Adapter	Chart
Solid	—	Adapter	Chart
Svelte	—	Adapter	Chart
Angular	—	Adapter	Chart
Lit	—	Adapter	Chart, defineChartElement
Alpine	—	Adapter	charts
Octane	Quick start	Adapter	Chart

React and Octane keep the default Chart SVG-based. Their /canvas entries select the optional Canvas renderer; their /core entries require an explicit ChartRenderer. The other adapters currently expose the default SVG surface.

Import map

The root @tanstack/charts entry point exports the common grammar, runtime, scene, SVG renderer, browser host, and their public types. The universal entry excludes browser hosts and adapters. Granular subpaths keep optional capabilities and individual marks independently tree-shakeable. Compact scales come from exact @tanstack/charts-scales/* entries; that package intentionally has no root export.

Import	Public values
@tanstack/charts	Common marks including crosshair, legends, D3 curve bridges, definitions, runtime, scene, DOM host, static SVG, and focus-presentation helpers
@tanstack/charts-scales/band	scaleBand, BandScale
@tanstack/charts-scales/linear	scaleLinear, LinearScale
@tanstack/charts-scales/ordinal	scaleOrdinal, OrdinalScale
@tanstack/charts-scales/point	scalePoint, PointScale
@tanstack/charts/adapter	createChartAdapter, resolveChartAdapterLayout, ChartAdapter, ChartAdapterLayout, and ChartAdapterLayoutOptions
@tanstack/charts/adapter/renderer	createChartRendererAdapter
@tanstack/charts/area	areaY
@tanstack/charts/area-x	areaX
@tanstack/charts/arrow	arrow
@tanstack/charts/band	bandX, bandY
@tanstack/charts/bar	barX, barY
@tanstack/charts/box	boxY, boxX, derived datum types, and option types
@tanstack/charts/canvas	mountCanvasChart, canvasChartRenderer, createCanvasChartRenderer, and Canvas host/surface types
@tanstack/charts/crosshair	Data-less crosshair, resolveCrosshairGuide, and crosshair option types
@tanstack/charts/cursor	createChartCursor, cursorHost, and framework-neutral controller and state types
@tanstack/charts/cursor/host	Adapter-facing cursor session, projection, focus resolution, focus-strategy, and focus-presentation helpers
@tanstack/charts/d3/area-x	d3AreaXCurve
@tanstack/charts/d3/shape	d3Curve
@tanstack/charts/difference	differenceY, differenceX, derived datum types, sign and independent-value types, and option types
@tanstack/charts/dom	mountChart
@tanstack/charts/dodge	dodgeY, dodgeX, anchor, option, and layout types
@tanstack/charts/dot	dot
@tanstack/charts/export	SVG serialization/download and browser image export
@tanstack/charts/facet	facet, facetChart
@tanstack/charts/focus	focusX, focusY, focusNearestX, focusNearestY
@tanstack/charts/focus/disabled	focusDisabled
@tanstack/charts/focus/guide	focusGuideX, focusGuideY, FocusGuideLabelFormatContext, and focus-guide option types
@tanstack/charts/focus/mark	whenFocused
@tanstack/charts/frame	frame
@tanstack/charts/geo	geoShape and geographic projection types
@tanstack/charts/group	group, GroupLayout, GroupOptions
@tanstack/charts/hierarchy/tree	treeLayout, TreeOrientation, TreeNodeContext, TreeNodeComparator, TreeNodeSeparation, TreeLayoutPathOptions, TreeLayoutParentOptions, TreeLayoutOptions, TreeLayoutNode, TreeLayoutLink, TreeLayoutResult
@tanstack/charts/hierarchy/treemap	treemap, TreemapMethod, TreemapNode, TreemapNodeComparator, TreemapPathOptions, TreemapParentOptions, TreemapOptions
@tanstack/charts/hierarchy/sunburst	sunburst, SunburstNode, SunburstNodeComparator, SunburstPathOptions, SunburstParentOptions, SunburstOptions
@tanstack/charts/hexagon	hexagon
@tanstack/charts/interaction/brush	brushX and horizontal-brush range, change, source, target, and option types
@tanstack/charts/interaction/cursor	continuousCursor and continuous-cursor position, change, guide, label, and option types
@tanstack/charts/interaction/signal	controlledSignal, ControlledSignal, ControlledSignalChangeContext
@tanstack/charts/interaction/zoom	zoomX, ZoomXValue, ZoomXWindow, ZoomXSource, ZoomXAction, ZoomXChange, and ZoomXOptions
@tanstack/charts/legend	colorLegend, colorGradientLegend, interactiveColorLegend, InteractiveColorLegendItemContext, and legend option/change types
@tanstack/charts/line	lineY, lineX, LineYOptions, and LineXOptions
@tanstack/charts/regression	linearRegressionY, linearRegressionX, derived datum types, and option types
@tanstack/charts/link	link
@tanstack/charts/mark/composite	compositeMark and CompositeMarkOptions
@tanstack/charts/mark/decorative	decorative
@tanstack/charts/mark/scale-values	createMarkWithScaleValues
@tanstack/charts/motion	motion, ChartMotionOptions, and renderer-neutral motion types
@tanstack/charts/network/force	forceLayout, force descriptors, settled node/link result, and lineage types
@tanstack/charts/network/sankey	sankeyDiagram, responsive layout options, immutable node/link values, comparator contexts, and lineage types
@tanstack/charts/polar	pie, polar, radialArc, radialBarRadius, radialBarAngle, other radial marks, and radial/angle guides
@tanstack/charts/universal	Common root authoring, runtime, scene, and static SVG values without browser hosts or adapters
@tanstack/charts/reconcile	reconcileChartSvg, reconcileChartSvgFragment
@tanstack/charts/rect	rect, cell
@tanstack/charts/renderer	mountChartRenderer
@tanstack/charts/ridgeline	ridgelineY, ridgelineX, RidgelineYOptions, RidgelineXOptions, RidgelinePosition, RidgelineCurve, and RidgelineStateStyle
@tanstack/charts/rule	ruleX, ruleY
@tanstack/charts/runtime	createChartRuntime, isDynamicChartDefinition
@tanstack/charts/selection	keyedSelection, whenSelected, KeyedSelectionChange, KeyedSelectionKeyContext, KeyedSelectionOptions, and KeyedSelection
@tanstack/charts/scene	defineChart, createChartScene, defaultChartTheme, findNearestPoint, viewportInteractionPoints
@tanstack/charts/svg	renderChartSvg
@tanstack/charts/svg/renderer	createSvgChartRenderer, svgChartRenderer
@tanstack/charts/svg/resources	renderChartSvgWithResources
@tanstack/charts/stack	stack, StackAnchor, StackLayout, StackOptions, StackOrder, StackOffset
@tanstack/charts/spring	createChartSpring and scalar spring types
@tanstack/charts/spatial/contour	contour, ContourOptions, and ContourDatum
@tanstack/charts/spatial/hexbin	hexbin, HexbinOptions, and HexbinDatum
@tanstack/charts/spatial/density	densityContour, DensityContourOptions, and DensityContourDatum
@tanstack/charts/spatial/delaunay	delaunayLink, DelaunayLinkOptions, and DelaunayLinkDatum
@tanstack/charts/spatial/voronoi	voronoi and VoronoiOptions
@tanstack/charts/text	text
@tanstack/charts/tick	tickX, tickY
@tanstack/charts/transform/fold	fold, FoldField, FoldOutputNames, FoldOptions, and FoldDatum
@tanstack/charts/transform/waterfall	waterfall, WaterfallKind, WaterfallOptions, WaterfallDatum, WaterfallStepDatum, and WaterfallTotalDatum
@tanstack/charts/types	Universal definition, mark, scene, runtime, focus, and tooltip-model types
@tanstack/charts/vector	vector
@tanstack/charts/view	composeViews, fill, grid, layer, inset, scale-link helpers, viewGrid, and view composition types
@tanstack/charts/violin	violinY, violinX, ViolinYOptions, ViolinXOptions, ViolinPosition, ViolinYCurve, and ViolinXCurve
@tanstack/charts/waffle	waffleY, waffleX, WaffleOptions, WaffleYOptions, and WaffleXOptions