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
Eager row, hierarchy, and static force transformsData transforms
Pointer focus, keyboard navigation, tooltips, and selectionFocus and interaction
SVG, Canvas, custom rendering, reconciliation, and exportRendering and export
Optional tween and spring motionMotion
Custom marks, renderers, scales, and indexesCustom extensions
Public generic and scene typesTypes

Mark reference

MarksReference
lineY, lineX, areaY, and areaXLine and area
differenceY and differenceXDifference
linearRegressionRowsY/X and linearRegressionY/XLinear regression
barY, barX, rect, and cellBar and rect
boxRows, boxY, and boxXBox
dot and hexagonDot and hexagon
createDotLayout, dodgeY, and dodgeXDodge layouts
waffleY and waffleXWaffle
ridgelineY and ridgelineXRidgeline
violinY and violinXViolin
focusGuideX and focusGuideYFocus guide
treemapTreemap
sunburstSunburst
sankeyDiagramSankey diagram
hexbinHexbin
contourContour
densityContourDensity contour
delaunayLinkDelaunay link
voronoiVoronoi
ruleX, ruleY, link, arrow, vector, tickX, and tickYRules, links, arrows, vectors, and ticks
text, frame, facet, and facetChartText, frame, and facet
composeViews, layout utilities, and viewGridView composition
geoShapeGeo shape
polar, radial marks, and polar guidesPolar marks
crosshairFocus and interaction

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, 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.

ImportPublic values
@tanstack/chartsCommon marks including crosshair, legends, D3 curve bridges, definitions, runtime, scene, DOM host, static SVG, and focus-presentation helpers
@tanstack/charts-scales/bandscaleBand, BandScale
@tanstack/charts-scales/linearscaleLinear, LinearScale
@tanstack/charts-scales/ordinalscaleOrdinal, OrdinalScale
@tanstack/charts-scales/pointscalePoint, PointScale
@tanstack/charts/adaptercreateChartAdapter, resolveChartAdapterLayout, ChartAdapter, ChartAdapterLayout, and ChartAdapterLayoutOptions
@tanstack/charts/adapter/renderercreateChartRendererAdapter
@tanstack/charts/areaareaY
@tanstack/charts/area-xareaX
@tanstack/charts/arrowarrow
@tanstack/charts/bandbandX, bandY
@tanstack/charts/barbarX, barY
@tanstack/charts/boxboxRows, boxY, boxX, derived datum types, and option types
@tanstack/charts/canvasmountCanvasChart, canvasChartRenderer, createCanvasChartRenderer, and Canvas host/surface types
@tanstack/charts/crosshairData-less crosshair, resolveCrosshairGuide, and crosshair option types
@tanstack/charts/cursorcreateChartCursor, cursorHost, and framework-neutral controller and state types
@tanstack/charts/cursor/hostAdapter-facing cursor session, projection, focus resolution, focus-strategy, and focus-presentation helpers
@tanstack/charts/d3/area-xd3AreaXCurve
@tanstack/charts/d3/shaped3Curve
@tanstack/charts/differencedifferenceY, differenceX, derived datum types, sign and independent-value types, and option types
@tanstack/charts/dommountChart
@tanstack/charts/dodgecreateDotLayout, dodgeY, dodgeX, anchor, option, and layout types
@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/focus/guidefocusGuideX, focusGuideY, FocusGuideLabelFormatContext, and focus-guide option types
@tanstack/charts/focus/markwhenFocused
@tanstack/charts/frameframe
@tanstack/charts/geogeoShape and geographic projection types
@tanstack/charts/groupgroup, GroupLayout, GroupOptions
@tanstack/charts/hierarchy/treetreeLayout, TreeOrientation, TreeNodeContext, TreeNodeComparator, TreeNodeSeparation, TreeLayoutPathOptions, TreeLayoutParentOptions, TreeLayoutOptions, TreeLayoutNode, TreeLayoutLink, TreeLayoutResult
@tanstack/charts/hierarchy/treemaptreemap, built-in and callable tile types, immutable node values, comparators, and path/parent option types
@tanstack/charts/hierarchy/sunburstsunburst, SunburstNode, SunburstNodeComparator, SunburstPathOptions, SunburstParentOptions, SunburstOptions
@tanstack/charts/hexagonhexagon
@tanstack/charts/interaction/brushbrushX and horizontal-brush range, change, source, target, and option types
@tanstack/charts/interaction/cursorcontinuousCursor and continuous-cursor position, change, guide, label, and option types
@tanstack/charts/interaction/signalcontrolledSignal, ControlledSignal, ControlledSignalChangeContext
@tanstack/charts/interaction/zoomzoomX, ZoomXValue, ZoomXWindow, ZoomXSource, ZoomXAction, ZoomXChange, and ZoomXOptions
@tanstack/charts/legendcolorLegend, colorGradientLegend, interactiveColorLegend, InteractiveColorLegendItemContext, and legend option/change types
@tanstack/charts/linelineY, lineX, LineYOptions, and LineXOptions
@tanstack/charts/regressionlinearRegressionRowsY, linearRegressionRowsX, linearRegressionY, linearRegressionX, derived datum types, and option types
@tanstack/charts/linklink
@tanstack/charts/mark/compositecompositeMark and CompositeMarkOptions
@tanstack/charts/mark/decorativedecorative
@tanstack/charts/mark/scale-valuescreateMarkWithScaleValues
@tanstack/charts/motionmotion, ChartMotionOptions, and renderer-neutral motion types
@tanstack/charts/network/forceforceLayout, built-in descriptors, named D3-compatible force factories, private working-clone context, settled node/link result, and lineage types
@tanstack/charts/network/sankeysankeyDiagram, shorthand and callable alignment types, responsive layout options, immutable node/link values, comparator contexts, and lineage types
@tanstack/charts/polarpie, polar, radialArc, radialBarRadius, radialBarAngle, other radial marks, and radial/angle guides
@tanstack/charts/universalCommon root authoring, runtime, scene, and static SVG values without browser hosts or adapters
@tanstack/charts/reconcilereconcileChartSvg, reconcileChartSvgFragment
@tanstack/charts/rectrect, cell
@tanstack/charts/renderermountChartRenderer
@tanstack/charts/ridgelineridgelineY, ridgelineX, RidgelineYOptions, RidgelineXOptions, RidgelinePosition, RidgelineCurve, and RidgelineStateStyle
@tanstack/charts/ruleruleX, ruleY
@tanstack/charts/runtimecreateChartRuntime, isDynamicChartDefinition
@tanstack/charts/selectionkeyedSelection, whenSelected, KeyedSelectionChange, KeyedSelectionKeyContext, KeyedSelectionOptions, and KeyedSelection
@tanstack/charts/scenedefineChart, createChartScene, defaultChartTheme, findNearestPoint, viewportInteractionPoints
@tanstack/charts/svgrenderChartSvg
@tanstack/charts/svg/renderercreateSvgChartRenderer, svgChartRenderer
@tanstack/charts/svg/resourcesrenderChartSvgWithResources
@tanstack/charts/stackstack, StackAnchor, StackLayout, StackOptions, StackOrder, StackOffset
@tanstack/charts/springcreateChartSpring and scalar spring types
@tanstack/charts/spatial/contourcontour, ContourOptions, and ContourDatum
@tanstack/charts/spatial/hexbinhexbin, HexbinOptions, and HexbinDatum
@tanstack/charts/spatial/densitydensityContour, DensityContourOptions, and DensityContourDatum
@tanstack/charts/spatial/delaunaydelaunayLink, DelaunayLinkOptions, and DelaunayLinkDatum
@tanstack/charts/spatial/voronoivoronoi and VoronoiOptions
@tanstack/charts/texttext
@tanstack/charts/ticktickX, tickY
@tanstack/charts/transform/foldfold, FoldField, FoldOutputNames, FoldOptions, and FoldDatum
@tanstack/charts/transform/waterfallwaterfall, WaterfallKind, WaterfallOptions, WaterfallDatum, WaterfallStepDatum, and WaterfallTotalDatum
@tanstack/charts/typesUniversal definition, mark, scene, runtime, focus, and tooltip-model types
@tanstack/charts/vectorvector
@tanstack/charts/viewcomposeViews, fill, grid, layer, inset, scale-link helpers, viewGrid, and view composition types
@tanstack/charts/violinviolinY, violinX, ViolinYOptions, ViolinXOptions, ViolinPosition, ViolinYCurve, and ViolinXCurve
@tanstack/charts/wafflewaffleY, waffleX, WaffleOptions, WaffleYOptions, and WaffleXOptions

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