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
Pointer focus, keyboard navigation, tooltips, and selection	Focus and interaction
SVG, Canvas, custom rendering, reconciliation, and export	Rendering and export
Custom marks, renderers, scales, and indexes	Custom extensions
Public generic and scene types	Types

Mark reference

Marks	Reference
lineY, areaY, and areaX	Line and area
barY, barX, rect, and cell	Bar and rect
dot and hexagon	Dot and hexagon
ruleX, ruleY, link, arrow, vector, tickX, and tickY	Rules, links, arrows, vectors, and ticks
text, frame, facet, and facetChart	Text, frame, and facet
geoShape	Geo shape
polar, radial marks, and polar guides	Polar marks

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.

Import	Public values
@tanstack/charts	Common marks, legends, D3 curve bridges, createMark, defineChart, createChartScene, createChartRuntime, isDynamicChartDefinition, mountChart, and renderChartSvg
@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/canvas	mountCanvasChart, canvasChartRenderer, createCanvasChartRenderer, and Canvas host/surface types
@tanstack/charts/d3/area-x	d3AreaXCurve
@tanstack/charts/d3/shape	d3Curve
@tanstack/charts/dom	mountChart
@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/mark	whenFocused
@tanstack/charts/frame	frame
@tanstack/charts/geo	geoShape and geographic projection types
@tanstack/charts/group	group, GroupLayout, GroupOptions
@tanstack/charts/hexagon	hexagon
@tanstack/charts/legend	colorLegend, colorGradientLegend
@tanstack/charts/line	lineY
@tanstack/charts/link	link
@tanstack/charts/mark/scale-values	createMarkWithScaleValues
@tanstack/charts/polar	polar, radial arc/line/area/dot 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
@tanstack/charts/rect	rect, cell
@tanstack/charts/renderer	mountChartRenderer
@tanstack/charts/rule	ruleX, ruleY
@tanstack/charts/runtime	createChartRuntime, isDynamicChartDefinition
@tanstack/charts/scene	defineChart, createChartScene, defaultChartTheme, findNearestPoint
@tanstack/charts/svg	renderChartSvg
@tanstack/charts/svg/renderer	createSvgChartRenderer, svgChartRenderer
@tanstack/charts/svg/resources	renderChartSvgWithResources
@tanstack/charts/stack	stack, StackLayout, StackOptions, StackOrder, StackOffset
@tanstack/charts/text	text
@tanstack/charts/tick	tickX, tickY
@tanstack/charts/types	Universal definition, mark, scene, runtime, focus, and tooltip-model types
@tanstack/charts/vector	vector