| title |
API Reference |
| description |
Reference for TanStack Charts definitions, marks, scales, runtime, rendering, interaction, and framework adapters. |
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 |
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, isDynamicChartDefinition, mountChart, and renderChartSvg |
@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, isDynamicChartDefinition |
@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.