# Interactions (/docs/chart/interactions)





Chart types live on [chart types](/docs/chart/types); this page is about wiring a chart's own interaction callbacks into your own UI, and about TanStack's own motion system.

## Selecting a point [#selecting-a-point]

`onFocusChange`/`onSelect` fire with a `ChartPoint` — its `datum` is the original row, so any click-to-drill-in UI is just `useState` plus your own JSX below (or beside) the chart.

<Preview title="Tickets resolved per day" align="block" code="&#x22;const [selected, setSelected] = useState<ChartPoint<TicketDatum> | null>(null);\n\n<Chart\n  definition={ticketsResolvedChart}\n  ariaLabel=\&#x22;Tickets resolved per day\&#x22;\n  height={280}\n  color=\&#x22;purple\&#x22;\n  onSelect={setSelected}\n/>\n<p>\n  {selected\n    ? `${selected.datum.day}: ${selected.datum.resolved} tickets resolved`\n    : 'Click a bar to select it.'}\n</p>&#x22;">
  <TicketSelectionDemo />
</Preview>

## An animated hover marker [#an-animated-hover-marker]

This is TanStack's own opt-in motion system, documented here as exactly what it is — not something `Chart` defaults to. The marker TanStack paints on hover/focus is a **new** DOM node per point, not one node repositioned (verified directly against the rendered output — a plain CSS `transition` can't bridge that, since there's no persistent element for it to interpolate from). A mark's own `motion` option (below, on the `crosshair` mark) configures *how* it should glide, but does nothing by itself — TanStack's default SVG renderer paints every frame at its target position with no interpolation at all (also verified directly: sampling the marker mid-gesture showed it jump straight to the final value in a single frame). Actually running that motion needs `@tanstack/charts/motion`'s own renderer, switched in through `Chart`'s `renderer` prop:

<Preview title="Daily signups this month" align="block" code="&#x22;import { motion } from '@tanstack/charts/motion';\n\nconst chart = defineChart({\n  marks: [\n    lineY(dailySignups, { x: 'day', y: 'count', points: true }),\n    crosshair({\n      marker: { radius: 5 },\n      motion: { transition: { type: 'tween', duration: 180, easing: 'ease-out' } },\n    }),\n  ],\n  scales: {\n    x: { scale: scaleLinear, nice: true, axis: { label: 'Day of month' } },\n    y: { scale: scaleLinear, nice: true, grid: true, axis: { label: 'Signups' } },\n  },\n  tooltip,\n});\n\n<Chart definition={chart} ariaLabel=\&#x22;Daily signups this month\&#x22; height={280} color=\&#x22;red\&#x22; renderer={motion()} />&#x22;">
  <AnimatedCrosshairDemo />
</Preview>

Hover across a few points to feel the difference against the plain (non-animated) charts on the other pages.