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.
| 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 |
| Responsive 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 |
Built-in Cartesian, radial, and composite marks accept renderer?: ChartMarkRenderer. Pass canvasChartRenderer from @tanstack/charts/canvas to opt that mark into Canvas while the rest of the chart keeps its host renderer.
| Marks | Reference |
|---|---|
| lineY, lineX, areaY, and areaX | Line and area |
| differenceY and differenceX | Difference |
| linearRegressionRowsY/X and linearRegressionY/X | Linear regression |
| barY, barX, rect, and cell | Bar and rect |
| boxRows, boxY, and boxX | Box |
| dot and hexagon | Dot and hexagon |
| createDotLayout, 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 | 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 |
Every default Chart starts with SVG and can opt selected marks into Canvas. React and Octane also provide /canvas entries for a completely Canvas chart and /core entries that require an explicit ChartRenderer.
| Tier | Use | Entries |
|---|---|---|
| Ordinary authoring | Define and render charts | @tanstack/charts with exact mark, scale, and framework subpaths |
| Optional capability | Add only when the chart needs it | transforms, motion, spatial indexes, controlled interaction, tooltip, Canvas, export, hierarchy, network, and view composition entries |
| Host and renderer extension | Implement an adapter, renderer, or host-owned extension | adapter, renderer, scene, reconciliation, SVG renderer, cursor host, and tooltip model entries |
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.
| 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/react | SVG Chart and React chart prop, definition, point, and tooltip-body types |
| @tanstack/charts/react/canvas | Canvas Chart and matching React chart prop, definition, point, and tooltip-body types |
| @tanstack/charts/react/core | Renderer-neutral Chart and matching React chart prop, definition, point, and tooltip-body types |
| @tanstack/charts/react/tooltip | Tooltip-composition Chart, CanvasChart, RendererChart, and their prop and render-context types |
| @tanstack/charts/react-native | React Native Chart, ChartProps, NativeChartRenderContext, NativeChartTooltipRenderContext, NativePaintContext, NativePaintResolver, and resolveNativePaint |
| @tanstack/charts/react-native/tooltip | React Native tooltip, NativeChartTooltipComponent, NativeChartTooltipExtension, NativeChartTooltipProps, and NativeChartTooltipRenderContext |
| @tanstack/charts/preact | Preact Chart and chart prop, definition, point, and tooltip-body types |
| @tanstack/charts/vue | Vue Chart and chart prop, definition, point, and tooltip-slot types |
| @tanstack/charts/solid | Solid Chart and chart prop, definition, point, and tooltip-body types |
| @tanstack/charts/svelte | Svelte Chart and chart prop, definition, point, and tooltip-snippet types |
| @tanstack/charts/angular | Angular Chart, tooltip-body directive, chart option, definition, point, and template-context types |
| @tanstack/charts/lit | Lit Chart, defineChartElement, chart prop, definition, point, and tooltip-body types |
| @tanstack/charts/alpine | Alpine charts plugin and chart option, definition, point, and tooltip-body types |
| @tanstack/charts/octane | SVG Chart and Octane chart prop, definition, point, and tooltip-body types |
| @tanstack/charts/octane/canvas | Canvas Chart and matching Octane chart prop, definition, point, and tooltip-body types |
| @tanstack/charts/octane/core | Renderer-neutral Chart and matching Octane chart prop, definition, point, and tooltip-body types |
| @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 | boxRows, 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 | createDotLayout, 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 | focusGroupX, focusGroupY, 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, built-in and callable tile types, immutable node values, comparators, and path/parent option types |
| @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 | linearRegressionRowsY, linearRegressionRowsX, 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, stagger, ChartMotionOptions, and renderer-neutral motion types |
| @tanstack/charts/motion/definition | Isolated stagger and ChartMotionStaggerOptions without the renderer or spring solver |
| @tanstack/charts/network/force | forceLayout, built-in descriptors, named D3-compatible force factories, private working-clone context, settled node/link result, and lineage types |
| @tanstack/charts/network/sankey | sankeyDiagram, shorthand and callable alignment types, responsive layout options, immutable node/link values, comparator contexts, and lineage types |
| @tanstack/charts/polar | pie, polar, focusGroupAngle, 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 and resolveChartRenderer |
| @tanstack/charts/ridgeline | ridgelineY, ridgelineX, RidgelineYOptions, RidgelineXOptions, RidgelinePosition, RidgelineCurve, and RidgelineStateStyle |
| @tanstack/charts/rule | ruleX, ruleY |
| @tanstack/charts/runtime | createChartRuntime, isResponsiveChartDefinition |
| @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/tooltip/model | Environment-neutral tooltip ordering, content, anchor, placement, value-formatting, and geometry types for host adapters |
| @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 |
Import from the narrowest stable entry point when bundle isolation matters. Do not import internal source files.