What TanStack Charts does for readers who are sensitive to motion, and what you add so that no one depends on seeing a chart move.
What you get
Reduced motion by default. When the reader prefers reduced motion, motion() draws the final state at once: entrances, updates, focus states and the tooltip. The lighter svgAnimation tween does the same.
No motion on resize. A change of size redraws the chart without animating, unless you set resize: true.
Live focus during motion. The tooltip and separate focus marks keep following the pointer and the keyboard while the data animates.
Focus that stays with its item. With stable keys, a focused point moves with its data instead of jumping to another item.
What you add
Short transitions, so current values are never far away.
A stop for anything that plays on its own.
Text for every change that matters, besides the motion.
A stable key on every item.
Respect reduced motion
Some readers get dizzy or sick from movement on screen and turn on reduced motion in their system. Leave respectReducedMotion on the renderer at its default of true. Turning it off makes your chart the one thing on their screen that still moves.
The setting only covers the chart. Animations you add around it, such as a counter in a statistic or a CSS transition on a panel, need their own prefers-reduced-motion check.
No loops, no autoplay
Animate in answer to something: the first paint, a new filter, a click. Never loop a chart.
Movement that starts on its own and lasts more than five seconds needs a way to pause or stop it. A playback that steps through the data on a timer needs a Pause button.
Stop a playback when it reaches the last value.
Motion is never the only signal
A reader with reduced motion sees no movement, a screen reader user hears none, and anyone can look away at the wrong moment. Say every change that matters in text as well: an updated title, a status line, a tag such as "6.2% above target".
When the change itself is the news, put the message in an element with role="status" so a screen reader announces it.
Do not make readers wait
Keep the entrance short. The values should be readable within about a second, even with a stagger.
Focus states on a mark wait for its entrance or update to finish. If the focus indicator must show at once, draw it as a separate whenFocused mark.
Keep the tooltip quick while the data animates. Set its motion to false or a short tween.
Keep focus in place
When data updates under a keyboard user, the focused point should stay on the same item. Give every row a key that belongs to the item, so the focused point moves with it. Keys taken from the array position move focus to whatever item lands in that slot.
Check it
Turn on reduced motion in your system or browser and reload. The chart should appear in its final state.
Focus a point with the keyboard, then update the data.
Read the values while an entrance is still running.
Confirm every change is also said in text.
The Hover and motion guideline has the rules that apply to every chart.