TanStack
API Reference

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

AreaReference
Object and responsive definitionsChart Definition API
The ChartSpec objectChart spec
Positional scales, axes, color, legends, and gradientsScales, guides, and color
Vanilla DOM mounting and responsive sizingDOM host
Framework prerender, mount, update, and layout lifecycleAdapter controller
Dynamic scene compilation and runtime behaviorRuntime and scene
Pointer focus, keyboard navigation, tooltips, and selectionFocus and interaction
SVG, Canvas, custom rendering, reconciliation, and exportRendering and export
Custom marks, renderers, scales, and indexesCustom extensions
Public generic and scene typesTypes

Mark reference

MarksReference
lineY, areaY, and areaXLine and area
barY, barX, rect, and cellBar and rect
dot and hexagonDot and hexagon
ruleX, ruleY, link, arrow, vector, tickX, and tickYRules, links, arrows, vectors, and ticks
text, frame, facet, and facetChartText, frame, and facet
geoShapeGeo shape
polar, radial marks, and polar guidesPolar marks

Framework adapters

FrameworkStartAdapter behaviorComponent API
ReactQuick startAdapterChart
PreactAdapterChart
VueAdapterChart
SolidAdapterChart
SvelteAdapterChart
AngularAdapterChart
LitAdapterChart, defineChartElement
AlpineAdaptercharts
OctaneQuick startAdapterChart

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, and their public types. Granular subpaths keep optional capabilities and individual marks independently tree-shakeable.

ImportPublic values
@tanstack/chartsCommon marks, legends, D3 curve bridges, createMark, defineChart, createChartScene, createChartRuntime, mountChart, renderChartSvg, and runtime comparison helpers
@tanstack/charts/adaptercreateChartAdapter, resolveChartAdapterLayout, ChartAdapter, ChartAdapterLayout, and ChartAdapterLayoutOptions
@tanstack/charts/adapter/renderercreateChartRendererAdapter
@tanstack/charts/areaareaY
@tanstack/charts/area-xareaX
@tanstack/charts/arrowarrow
@tanstack/charts/barbarX, barY
@tanstack/charts/canvasmountCanvasChart, canvasChartRenderer, createCanvasChartRenderer, and Canvas host/surface types
@tanstack/charts/d3/area-xd3AreaXCurve
@tanstack/charts/d3/shaped3Curve
@tanstack/charts/dommountChart
@tanstack/charts/dotdot
@tanstack/charts/exportSVG serialization/download and browser image export
@tanstack/charts/facetfacet, facetChart
@tanstack/charts/focusfocusX, focusY, focusNearestX, focusNearestY
@tanstack/charts/focus/disabledfocusDisabled
@tanstack/charts/frameframe
@tanstack/charts/geogeoShape and geographic projection types
@tanstack/charts/hexagonhexagon
@tanstack/charts/legendcolorLegend, colorGradientLegend
@tanstack/charts/linelineY
@tanstack/charts/linklink
@tanstack/charts/mark/scale-valuescreateMarkWithScaleValues
@tanstack/charts/polarpolar, radial arc/line/area/dot marks, and radial/angle guides
@tanstack/charts/reconcilereconcileChartSvg
@tanstack/charts/rectrect, cell
@tanstack/charts/renderermountChartRenderer
@tanstack/charts/ruleruleX, ruleY
@tanstack/charts/runtimecreateChartRuntime, definition and input comparison helpers
@tanstack/charts/scenedefineChart, createChartScene, defaultChartTheme, findNearestPoint
@tanstack/charts/svgrenderChartSvg
@tanstack/charts/svg/renderercreateSvgChartRenderer, svgChartRenderer
@tanstack/charts/svg/resourcesrenderChartSvgWithResources
@tanstack/charts/texttext
@tanstack/charts/ticktickX, tickY
@tanstack/charts/vectorvector

Import from the narrowest stable entry point when bundle isolation matters. Do not import internal source files.