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

Surface tiers

TierUseEntries
Ordinary authoringDefine and render charts@tanstack/charts with exact mark, scale, and framework subpaths
Optional capabilityAdd only when the chart needs ittransforms, motion, spatial indexes, controlled interaction, tooltip, Canvas, export, hierarchy, network, and view composition entries
Host and renderer extensionImplement an adapter, renderer, or host-owned extensionadapter, renderer, scene, reconciliation, SVG renderer, cursor host, and tooltip model entries

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; there is intentionally no aggregate /scales 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/reactSVG Chart and React chart prop, definition, point, and tooltip-body types
@tanstack/charts/react/canvasCanvas Chart and matching React chart prop, definition, point, and tooltip-body types
@tanstack/charts/react/coreRenderer-neutral Chart and matching React chart prop, definition, point, and tooltip-body types
@tanstack/charts/react/tooltipTooltip-composition Chart, CanvasChart, RendererChart, and their prop and render-context types
@tanstack/charts/react-nativeReact Native Chart, ChartProps, NativeChartRenderContext, NativeChartTooltipRenderContext, NativePaintContext, NativePaintResolver, and resolveNativePaint
@tanstack/charts/react-native/tooltipReact Native tooltip, NativeChartTooltipComponent, NativeChartTooltipExtension, NativeChartTooltipProps, and NativeChartTooltipRenderContext
@tanstack/charts/preactPreact Chart and chart prop, definition, point, and tooltip-body types
@tanstack/charts/vueVue Chart and chart prop, definition, point, and tooltip-slot types
@tanstack/charts/solidSolid Chart and chart prop, definition, point, and tooltip-body types
@tanstack/charts/svelteSvelte Chart and chart prop, definition, point, and tooltip-snippet types
@tanstack/charts/angularAngular Chart, tooltip-body directive, chart option, definition, point, and template-context types
@tanstack/charts/litLit Chart, defineChartElement, chart prop, definition, point, and tooltip-body types
@tanstack/charts/alpineAlpine charts plugin and chart option, definition, point, and tooltip-body types
@tanstack/charts/octaneSVG Chart and Octane chart prop, definition, point, and tooltip-body types
@tanstack/charts/octane/canvasCanvas Chart and matching Octane chart prop, definition, point, and tooltip-body types
@tanstack/charts/octane/coreRenderer-neutral Chart and matching Octane chart prop, definition, point, and tooltip-body types
@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/focusfocusGroupX, focusGroupY, 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, isResponsiveChartDefinition
@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/tooltip/modelEnvironment-neutral tooltip ordering, content, anchor, placement, value-formatting, and geometry types for host adapters
@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.