Transforms and Reactivity

Keep raw observations in their application shape. Put grouping, binning, stacking, ranking, rolling statistics, and interval construction beside the chart definition so the analytical path remains visible.

Choose the execution boundary

Work	Location
A value derived from one row	Channel accessor
A chart-specific cross-row transform	Ordinary function beside defineChart
Reused or expensive derived data	Framework memo or computed state
A surface-responsive transform	Definition builder using surface size
Exact plot-pixel collision or placement	Custom mark render phase
Querying, permissions, or business aggregation	Application or server

Transform and memoize together

tsx

function LatencyChart({ observations }: Props) {
  const definition = useMemo(() => {
    const histogram = binLatency(observations)

    return defineChart({
      marks: [
        rect(histogram, {
          x1: 'x1',
          x2: 'x2',
          y1: () => 0,
          y2: 'count',
          key: 'id',
          inset: 1,
        }),
      ],
      x: { scale: scaleLinear },
      y: { scale: scaleLinear, nice: true },
    })
  }, [observations])

  return <Chart definition={definition} ariaLabel="Request latency" />
}

The imported data remains raw. The adjacent transform defines thresholds, derived row shape, and source observations retained for interaction. The chart derives positional domains from the materialized interval endpoints.

Responsive transforms

Keep surface-dependent layout inside the builder. Captured data remains stable while Charts rebuilds for a new size:

const definition = useMemo(
  () =>
    defineChart(({ width, height }) => {
      const columns = Math.max(
        1,
        Math.floor(Math.sqrt((total * width) / Math.max(1, height))),
      )
      return buildWaffleSpec(layoutWaffleCells(segments, columns), columns)
    }),
  [segments, total],
)

Exact inner plot bounds are not available until guides are measured; use a custom mark when an algorithm requires them.

Derived rows should preserve source observations needed by tooltips and selection. Drop or explicitly handle incomplete reducer output instead of casting it.

TanStack Charts accepts D3 output directly and does not require a library-owned series shape. Install each granular d3-* module imported by application source.