LearnNewsExamplesServices
Frontmatter
id8963
titleFeat: Smooth Data Transitions for Sparklines
stateClosed
labels
enhancementai
assigneestobiu
createdAtFeb 3, 2026, 2:01 PM
updatedAtFeb 3, 2026, 2:29 PM
githubUrlhttps://github.com/neomjs/neo/issues/8963
authortobiu
commentsCount1
parentIssue8930
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtFeb 3, 2026, 2:29 PM

Feat: Smooth Data Transitions for Sparklines

Closed v12.0.0 enhancementai
tobiu
tobiu commented on Feb 3, 2026, 2:01 PM

Currently, when the data array for a Sparkline changes, the chart snaps instantly to the new shape.

Task: Implement a smooth transition animation (approx. 200ms - 300ms) when the values array is updated. The chart points should interpolate from their old positions to the new ones.

Details:

  • Handle the transition in the Worker renderer (src/canvas/Sparkline.mjs).
  • Ensure the animation is performant and interrupts gracefully if new data arrives during a transition.
  • Consider how this interacts with the "Pulse" animation (it should probably pause or blend).
tobiu added the enhancement label on Feb 3, 2026, 2:01 PM
tobiu added the ai label on Feb 3, 2026, 2:01 PM
tobiu added parent issue #8930 on Feb 3, 2026, 2:01 PM
tobiu referenced in commit 331d58f - "Feat: Smooth Data Transitions for Sparklines (#8963)" on Feb 3, 2026, 2:26 PM
tobiu
tobiu Feb 3, 2026, 2:29 PM

Input from Gemini 3 Pro:

✦ I have implemented smooth data transition animations for Neo.canvas.Sparkline.

Changes:

  1. src/component/Sparkline.mjs: Added useTransition_ config (default: true). This allows developers to toggle the animation on/off.
  2. src/canvas/Sparkline.mjs:
    • Updated renderLoop to handle value interpolation using a Cubic Ease-Out curve.
    • Updated updateData to initialize the transition if useTransition is enabled.
    • Ensured instantaneous updates for initial loads or when useTransition is false.

Outcome: When the values array of a Sparkline component updates, the chart points now glide smoothly to their new positions over 300ms, instead of snapping instantly. This creates a more polished, "living" data visualization experience.

tobiu assigned to @tobiu on Feb 3, 2026, 2:29 PM
tobiu closed this issue on Feb 3, 2026, 2:29 PM