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 |
| 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 |
| 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 | 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.
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.
| Import | Public values |
|---|---|
| @tanstack/charts | Common marks, legends, D3 curve bridges, createMark, defineChart, createChartScene, createChartRuntime, mountChart, renderChartSvg, and runtime comparison helpers |
| @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/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/frame | frame |
| @tanstack/charts/geo | geoShape and geographic projection types |
| @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/reconcile | reconcileChartSvg |
| @tanstack/charts/rect | rect, cell |
| @tanstack/charts/renderer | mountChartRenderer |
| @tanstack/charts/rule | ruleX, ruleY |
| @tanstack/charts/runtime | createChartRuntime, definition and input comparison helpers |
| @tanstack/charts/scene | defineChart, createChartScene, defaultChartTheme, findNearestPoint |
| @tanstack/charts/svg | renderChartSvg |
| @tanstack/charts/svg/renderer | createSvgChartRenderer, svgChartRenderer |
| @tanstack/charts/svg/resources | renderChartSvgWithResources |
| @tanstack/charts/text | text |
| @tanstack/charts/tick | tickX, tickY |
| @tanstack/charts/vector | vector |
Import from the narrowest stable entry point when bundle isolation matters. Do not import internal source files.