Skip to content

[Feature] Smooth (animated) automatic Y-axis range transitions #855

Description

@NemeZZiZZ

Feature Description

On every data update / scroll / zoom, the automatic Y-axis range is applied instantly. When quotes stream in, the plot jumps on each tick; a single outlier spike flips the pane between full-span and body-fit, and back on the next bar. With multiple indicator panes the whole chart twitches. The visual result (recorded by many trading apps): constant micro-jumping of the price scale during live updates.

Today an app can soften this only via the createRange axis hook — i.e. by reimplementing easing, frame scheduling, snap-on-jump logic and width stabilization entirely outside the library (and re-doing it for every pane). That is exactly what a charting library should provide built-in, as an opt-in.

Related: #851 already addresses the other half of the same jitter problem (Y-axis width changes force horizontal re-layout of the whole pane; there measured 39 → 2 width transitions). This request is the range part: animate the value range smoothly toward the auto-fit target instead of snapping.

To Do

Opt-in animation of the automatic Y-axis range (default off, zero behavior change when disabled):

  1. Target = exact auto-fit. The existing auto-fit computation stays the source of truth; animation only affects the displayed range while it converges to the target.
  2. Time-based easing (e.g. exponential approach, ~100–150 ms effective duration), driven by real elapsed time so it is frame-rate independent — no fixed step count.
  3. Interpolate in real coordinate space (realFrom/realTo) using the existing axis conversion helpers, so log / percentage axes are handled by the same code path.
  4. Snap instead of animate on discontinuities: first fit after data (re)load, invalid/degenerate range, axis type change, symbol/timeframe/indicator replacement, and when old/new spans differ by a large factor (e.g. >4×). When the remaining error is below a small threshold, finish at the exact target (no asymptotic drift).
  5. Manual interaction stays instant. Dragging the Y-axis or scrolling/zooming must not fight the animation — user input cancels/overrides it immediately.
  6. One coalesced redraw per frame while transitioning (library already coalesces resize the same way).
  7. API sketch (final shape is yours to decide):
    • per-axis option, e.g. autoFitAnimation?: { enabled?: boolean /* default false */, duration?: number } in YAxisOverride / axis templates;
    • or reuse the existing animation / animationDuration style semantics if you prefer one global switch.
  8. App-level policies (deadbands, outlier trimming, rounding) remain possible through the existing createRange hook — this feature does not replace it.

Notes:

  • The animation state machine (target, elapsed, snap decisions) is pure logic on top of existing range computation → unit-testable without DOM.
  • The repo currently has no test framework. If you want tests with this feature, please say whether to add vitest in the same PR or verify via a demo page instead.

Questions

  1. Do you want this as a single focused PR (animation only, no policy heuristics)?
  2. Preferred API surface: per-axis option, chart-level option, or both?
  3. Tests: add a framework (vitest) alongside, or demo-based verification?

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions