Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

`motion()` renderer: the tooltip follows the 1.1 s data transition, and mark `states` wait for the entrance motion

Aperta
  • Qualcosa non va?
#179 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
52/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
data-visualization

Direzione di ricerca

Start with dist/motion.js and the “Tooltip motion” section in docs/guides/tooltips-and-focus.md; reproduce the two pointer behaviors using the supplied chart example. Check how tooltip motion and pendingStateFocus are handled during data transitions. Done means tooltip movement no longer inherits the slow data transition by default and focus states behave during entrance motion, or the states reference clearly documents any necessary deferral.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Version: @tanstack/charts 1.0.0, motion() from @tanstack/charts/motion

Problem

We use the motion() renderer for the entrance and data-update animations. Two default behaviors made the charts feel slow to the pointer.

(a) The tooltip moves with the data transition

dist/motion.js sets defaultDuration = 1100. The tooltip uses the same transition for entry, movement between points and exit. This is documented in "Tooltip motion" in docs/guides/tooltips-and-focus.md.

When the pointer moves from one point to the next, the tooltip takes 1.1 s to arrive. A transition of 1.1 s is good for the data, but it is too slow for a pointer. Each of our charts with a tooltip needed tooltip.motion: false.

(b) Mark states do not apply during the entrance motion

While the data motion runs, paintFocus keeps the state focus in pendingStateFocus. The renderer applies it only when the data motion ends. With the default duration and stagger, the entrance takes about 2 s on a chart with some data.

If the pointer is on the chart during the entrance, the tooltip shows, but focus states (for example a dot that grows on focus) do not apply until the entrance ends. The pointer looks broken for that time.

Minimal repro

import { defineChart, dot, lineY } from '@tanstack/charts';
import { motion } from '@tanstack/charts/motion';
import { RendererChart } from '@tanstack/charts/react/tooltip';
import { scaleLinear } from '@tanstack/charts/scales/linear';
import { tooltip } from '@tanstack/charts/tooltip';

const rows = Array.from({ length: 30 }, (_, x) => ({ x, y: Math.sin(x / 3) }));
const renderer = motion();

const definition = defineChart({
  marks: [
    lineY(rows, { x: 'x', y: 'y' }),
    dot(rows, {
      x: 'x',
      y: 'y',
      r: 2,
      states: [{ when: { focus: 'x' }, style: { r: 6 } }],
    }),
  ],
  scales: { x: { scale: scaleLinear }, y: { scale: scaleLinear } },
  focus: 'nearest-x',
  tooltip,
});

export const Repro = () => (
  <RendererChart
    definition={definition}
    renderer={renderer}
    ariaLabel="Repro"
    width={600}
    height={200}
  />
);
  1. Load the page with the pointer over the chart. The dot under the pointer does not grow until the entrance ends.
  2. After the entrance, move the pointer fast from left to right. The tooltip lags behind by about 1 s.

Expected

  • The tooltip follows the pointer with a short transition by default (for example 100 to 200 ms), or with no transition.
  • Focus states apply at once, also during the entrance motion. Or, if the deferral is necessary, the docs say so.

Actual

  • The tooltip uses the 1100 ms data transition.
  • Focus states wait until the data motion ends.

Our workaround

Our shared chart wrapper sets tooltip.motion: false when the definition does not set one:

// The motion renderer also moves the tooltip to each new point over 1.1s. Keep
// the tooltip at the point at once, unless the definition sets its own motion.
function withImmediateTooltip(definition) {
  const { tooltip } = definition;
  if (!tooltip) return definition;
  const config = 'create' in tooltip ? { use: tooltip } : tooltip;
  if (config.motion !== undefined) return definition;
  return { ...definition, tooltip: { ...config, motion: false } };
}

We have no workaround for (b).

Suggested fix

  • Give the tooltip its own, shorter default transition. Keep the current tooltip.motion override.
  • Apply focus states at once while the data motion runs, or let the state transition retarget from the current frame. If this is not possible, document the deferral in the states reference.

Written by an agent (Claude Code, claude-opus-5-5).

Lingua principale
TypeScript
Stelle
769
Fork
47
Merge medio
6h 9m
PR unite (30g)
20

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/charts

Tutte le issue di TanStack/charts

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.