Coming from Recharts | TanStack Charts Português (BR)

Use one defineChart() value for marks, scales, guides, and focus. A positional scale is an object such as y: { scale: scaleLinear }, not y: scaleLinear. Memoize definitions that capture React props. In Next.js, build them inside your client component.

Common options

Recharts option	TanStack Charts equivalent
`ResponsiveContainer`	`Chart` observes its container; supply `height` or `aspectRatio`, and `initialWidth` for SSR.
`tickLine={false}`	`axis: { ticks: { size: 0 } }` keeps labels. `ticks: false` removes both stubs and labels.
`axisLine={false}`	`axis: { line: false }` hides only the baseline.
`tickCount`	`axis: { ticks: { count } }` is a hint to the scale. Use `values` for exact tick candidates.
`activeDot`	Add a dot mark wrapped in `whenFocused(mark, { match: 'x' })`.
`barGap` / `barSize`	`barY` and `barX` use pixel `inset` and `maxThickness`; grouped band padding is a ratio.
`baseValue`	Set `areaY`'s `y1` or `areaX`'s `x1` explicitly. The default baseline is zero.
Shared tooltip	Set `focus: 'group-x'` and add `tooltip`; use `maxFocusDistance: Number.POSITIVE_INFINITY` to focus sparse columns at any x distance.

See Bar and Rect, Line and Area, Tooltips and Focus, and Responsive Charts for complete examples.

Defaults to compare with your existing charts

Grid lines use strokeOpacity: 0.11, and axis baselines use 0.28. Set grid and axis.line styles explicitly when matching existing paint. An areaY mark's default fillOpacity is 0.2, set the mark's own opacity when needed.

The default focus distance is 48 scene pixels. Axis focus modes measure that distance along their axis, so sparse charts can have gaps where nothing takes focus. Keep this default when empty space should clear a tooltip, or choose an explicit larger distance.

nice: true rounds the domain using the responsive or authored tick count, even with a hidden axis. On a small sparkline, use a number such as nice: 5 to keep the rounding policy independent of its dimensions.

Rows without visible values

Focus points come from mark geometry. To make a missing-value row available to a tooltip, add a zero-radius dot with one point per row and make the visible series decorative(). The dot's y value must be valid within your authored domain:

dot(rows, {
  id: 'row-focus',
  x: 'gameNumber',
  y: () => yDomain[0],
  r: 0,
})

With nearest-x or group-x, this mark supplies the row's semantic x value without painting a dot. Use the normal keyed rows for keyboard and tooltip content, and apply whenFocused(..., { match: 'x' }) to decorative focus-only geometry. This does not invent a value for the visible series.

Motion and tooltips

Tooltip motion can inherit chart motion. Give tooltip({ motion: ... }) its own shorter policy or motion: false when a long data transition should not control the tooltip. See Tooltip motion.