react-native-livechart 4.22.2 → 4.24.0

package/src/components/SelectionDot.tsx

@@ -18,7 +18,7 @@ export function DefaultSelectionDot({
   x: SharedValue<number>;
   y: SharedValue<number>;
   opacity: SharedValue<number>;
-  color: string;
+  color: string | SharedValue<string>;
   size: number;
   ring: ResolvedSelectionDotConfig["ring"];
 }) {
@@ -56,13 +56,17 @@ export function SelectionDotSlot({
   active,
   opacity,
   color,
+  plainColor,
 }: {
   config?: ResolvedSelectionDotConfig | null;
   x: SharedValue<number>;
   y?: SharedValue<number>;
   active?: SharedValue<number> | SharedValue<boolean>;
   opacity: SharedValue<number>;
-  color: string;
+  color: string | SharedValue<string>;
+  /** Plain-string color for a custom `component`, whose `color` prop is a
+   *  string, used when `color` is animated. */
+  plainColor: string;
 }) {
   if (!config || y === undefined || !active) return null;
   const dotColor = config.color ?? color;
@@ -74,7 +78,7 @@ export function SelectionDotSlot({
         y={y}
         active={active as SharedValue<boolean>}
         opacity={opacity}
-        color={dotColor}
+        color={typeof dotColor === "string" ? dotColor : plainColor}
         size={config.size}
       />
     );

package/src/components/YAxisOverlay.tsx

@@ -60,6 +60,7 @@ export function YAxisOverlay({
   gridStyle,
   variant = "all",
   float = false,
+  side = "right",
   labelRightMargin,
   gridEndGap = 0,
 }: {
@@ -97,6 +98,8 @@ export function YAxisOverlay({
    * plot) instead of centering them in a reserved gutter. See {@link YAxisConfig.float}.
    */
   float?: boolean;
+  /** Render labels in the caller-reserved left gutter without moving the grid. */
+  side?: "left" | "right";
   /** Fixed canvas-edge margin for a shared left-aligned label column. */
   labelRightMargin?: number;
   /** Gap between the grid-line end and the shared label column. */
@@ -109,7 +112,7 @@ export function YAxisOverlay({
   const gridBuilder = usePathBuilder();
 
   const rightAnchoredColumn = useDerivedValue(() => {
-    if (labelRightMargin === undefined) return null;
+    if (side === "left" || labelRightMargin === undefined) return null;
     return rightAnchoredYAxisColumnLayout(
       engine.canvasWidth.get(),
       entries.get(),
@@ -156,20 +159,23 @@ export function YAxisOverlay({
       const e = items[i];
       const textW = measureFontTextWidth(font, e.label);
       const x =
-        columnX !== undefined
-          ? columnX
-          : float
-            ? gutterRightAlignedTextLeftX(w, textW, FLOAT_LABEL_RIGHT_MARGIN)
-            : badge
-              ? pillTextLeftX(w, padding.right, leftInset, textW, badgeMetrics)
-              : seriesLabelInset > 0
-                ? gutterRightAlignedTextLeftX(w, textW)
-                : gutterCenteredTextLeftX(w, padding.right, textW);
+        side === "left"
+          ? (padding.left - textW) / 2
+          : columnX !== undefined
+            ? columnX
+            : float
+              ? gutterRightAlignedTextLeftX(w, textW, FLOAT_LABEL_RIGHT_MARGIN)
+              : badge
+                ? pillTextLeftX(w, padding.right, leftInset, textW, badgeMetrics)
+                : seriesLabelInset > 0
+                  ? gutterRightAlignedTextLeftX(w, textW)
+                  : gutterCenteredTextLeftX(w, padding.right, textW);
       result.push({
         x,
         y: e.y - baselineOffset,
         label: e.label,
         alpha:
+          side !== "left" &&
           resolvedBadgeCenterY !== null &&
           yAxisLabelIntersectsBadge(
             e.y,

package/src/core/liveChartEngineTick.ts

@@ -41,6 +41,10 @@ export interface EngineTickMutable {
   extremaMaxTime: number;
   /** Previous frame's yRangeScale — detects an in-flight scale drag. */
   lastYRangeScale?: number;
+  /** Canvas width observed by the previous measured tick. */
+  lastCanvasWidth?: number;
+  /** Canvas height observed by the previous measured tick. */
+  lastCanvasHeight?: number;
 }
 
 export interface EngineTickInput {
@@ -142,6 +146,40 @@ export interface EngineTickInput {
   candleGapBridgeUnknown?: boolean;
 }
 
+const SUBPIXEL_SETTLE_THRESHOLD = 0.5;
+
+/**
+ * Lerps toward a target, then lands exactly once the remaining distance is
+ * smaller than half a rendered pixel.
+ */
+export function lerpAndSettle(
+  current: number,
+  target: number,
+  speed: number,
+  dt: number,
+  unitsPerPixel: number,
+): number {
+  "worklet";
+  const next = lerp(current, target, speed, dt);
+  const epsilon = Math.abs(unitsPerPixel) * SUBPIXEL_SETTLE_THRESHOLD;
+  return epsilon > 0 && Math.abs(target - next) <= epsilon ? target : next;
+}
+
+/**
+ * Advances a live timestamp only after the chart has moved by half a pixel.
+ */
+export function advanceTimestampByPixel(
+  current: number,
+  target: number,
+  secondsPerPixel: number,
+): number {
+  "worklet";
+  const step = Math.abs(secondsPerPixel) * SUBPIXEL_SETTLE_THRESHOLD;
+  if (!(step > 0) || !Number.isFinite(step) || target <= current) return target;
+  const elapsedSteps = Math.floor((target - current) / step);
+  return elapsedSteps > 0 ? current + elapsedSteps * step : current;
+}
+
 /**
  * One frame of the live chart engine (mirrors `useLiveChartEngine` worklet body).
  * Mutates `state` in place for testability and reuse from the hook.
@@ -153,7 +191,6 @@ export function tickLiveChartEngineFrame(
   "worklet";
   const baseNow = input.nowOverride ?? input.nowSeconds ?? Date.now() / 1000;
   const liveEdge = baseNow + (input.windowBuffer ?? 0) * input.timeWindow;
-  state.liveEdge = liveEdge;
   const viewEnd = input.viewEnd;
   // First time of the visible series' data — the floor a frozen edge must stay
   // at or above. `-Infinity` when there's no data to bound against, so the freeze
@@ -177,6 +214,17 @@ export function tickLiveChartEngineFrame(
     viewEnd != null &&
     viewEnd >= firstDataTime &&
     (viewEnd < liveEdge || input.allowFutureViewEnd === true);
+  const canvasChanged =
+    state.lastCanvasWidth !== input.canvasWidth ||
+    state.lastCanvasHeight !== input.canvasHeight;
+  state.liveEdge =
+    !canvasChanged && input.canvasWidth > 0 && input.timeWindow > 0
+      ? advanceTimestampByPixel(
+          state.liveEdge,
+          liveEdge,
+          input.timeWindow / input.canvasWidth,
+        )
+      : liveEdge;
   if (scrolledBack) {
     state.timestamp = viewEnd;
   } else if (!input.paused) {
@@ -188,6 +236,16 @@ export function tickLiveChartEngineFrame(
     if (returnT != null && returnT < 1 && input.returnFrom != null) {
       state.timestamp =
         input.returnFrom + (liveEdge - input.returnFrom) * returnT;
+    } else if (
+      !canvasChanged &&
+      input.canvasWidth > 0 &&
+      input.timeWindow > 0
+    ) {
+      state.timestamp = advanceTimestampByPixel(
+        state.timestamp,
+        liveEdge,
+        input.timeWindow / input.canvasWidth,
+      );
     } else {
       state.timestamp = liveEdge;
     }
@@ -195,6 +253,8 @@ export function tickLiveChartEngineFrame(
   // else: paused with no active pan → leave the frozen timestamp untouched.
 
   if (input.canvasWidth === 0 || input.canvasHeight === 0) return;
+  state.lastCanvasWidth = input.canvasWidth;
+  state.lastCanvasHeight = input.canvasHeight;
 
   const speed = input.smoothing;
   // One-shot settle (snapKey change): collapse this frame's easing so the
@@ -214,16 +274,30 @@ export function tickLiveChartEngineFrame(
     (1 - gapRatio) *
       (input.adaptiveSpeedBoost ?? MOTION_METRICS_DEFAULTS.adaptiveSpeedBoost);
 
+  const valueUnitsPerPixel =
+    (state.displayMax - state.displayMin) / input.canvasHeight;
   state.displayValue = snap
     ? target
-    : lerp(state.displayValue, target, adaptiveSpeed, input.dt);
+    : lerpAndSettle(
+        state.displayValue,
+        target,
+        adaptiveSpeed,
+        input.dt,
+        valueUnitsPerPixel,
+      );
 
   // Pinch-zoom: ease toward the zoom override when set, else the configured
   // window. Mirrors the viewEnd freeze above (width vs. right edge).
   const targetWindow = input.viewWindow ?? input.timeWindow;
   state.displayWindow = snap
     ? targetWindow
-    : lerp(state.displayWindow, targetWindow, speed, input.dt);
+    : lerpAndSettle(
+        state.displayWindow,
+        targetWindow,
+        speed,
+        input.dt,
+        targetWindow / input.canvasWidth,
+      );
 
   const winStart = state.timestamp - state.displayWindow;
 
@@ -437,16 +511,29 @@ export function tickLiveChartEngineFrame(
     const maxV = input.maxValue;
     if (maxV !== undefined && tMax > maxV) tMax = maxV;
 
+    const rangeUnitsPerPixel = (tMax - tMin) / input.canvasHeight;
     if (snap || yScaleDragging || tMin < state.displayMin) {
       state.displayMin = tMin;
     } else {
-      state.displayMin = lerp(state.displayMin, tMin, speed, input.dt);
+      state.displayMin = lerpAndSettle(
+        state.displayMin,
+        tMin,
+        speed,
+        input.dt,
+        rangeUnitsPerPixel,
+      );
     }
 
     if (snap || yScaleDragging || tMax > state.displayMax) {
       state.displayMax = tMax;
     } else {
-      state.displayMax = lerp(state.displayMax, tMax, speed, input.dt);
+      state.displayMax = lerpAndSettle(
+        state.displayMax,
+        tMax,
+        speed,
+        input.dt,
+        rangeUnitsPerPixel,
+      );
     }
   }
 
@@ -485,6 +572,12 @@ export function tickLiveChartEngineFrame(
     }
     state.edgeValue = snap
       ? edgeTarget
-      : lerp(state.edgeValue, edgeTarget, speed, input.dt);
+      : lerpAndSettle(
+          state.edgeValue,
+          edgeTarget,
+          speed,
+          input.dt,
+          valueUnitsPerPixel,
+        );
   }
 }

package/src/core/resolveConfig.ts

@@ -94,6 +94,7 @@ export interface ResolvedBadgeConfig {
 }
 
 export interface ResolvedYAxisConfig {
+  side: "left" | "right";
   minGap: number;
   /** Multiplier used to choose and align representable dynamic nice intervals. */
   intervalScale: number;
@@ -295,7 +296,7 @@ export interface ResolvedGradientConfig {
   /** undefined → use palette.fillBottom (transparent) at render time */
   bottomOpacity: number | undefined;
   /** Explicit color stops (top → bottom); overrides the opacity stops. */
-  colors: string[] | undefined;
+  colors: string[] | SharedValue<string[]> | undefined;
   /** Stop positions (0..1) matching `colors` length. */
   positions: number[] | undefined;
 }
@@ -531,6 +532,7 @@ export function resolveBadge(
 }
 
 const Y_AXIS_DEFAULTS: ResolvedYAxisConfig = {
+  side: "right",
   minGap: 36,
   intervalScale: 1,
   count: 0,

package/src/core/useLiveChartEngine.ts

@@ -20,6 +20,7 @@ import { MS_PER_FRAME_60FPS, RETURN_TO_LIVE_MS } from "../constants";
 import type {
   CandleGap,
   CandlePoint,
+  LiveChartFrameStats,
   LiveChartPoint,
   SeriesConfig,
 } from "../types";
@@ -93,6 +94,10 @@ export interface EngineConfig {
    * {@link LiveChartProps.static}.
    */
   static?: boolean;
+  /** Runtime gate for the frame loop. Gestures and configuration stay mounted. */
+  isFrameLoopActive?: SharedValue<boolean>;
+  /** Optional development-only frame publication counters. */
+  debugFrameStats?: SharedValue<LiveChartFrameStats>;
   /**
    * Opaque key that snaps the framing to its target in one frame whenever it
    * changes (the next tick bypasses `smoothing` for the window, Y-range, and
@@ -282,6 +287,8 @@ export function makeEngineFrameScratch(): EngineFrameScratch {
       extremaMaxValue: NaN,
       extremaMinTime: NaN,
       extremaMaxTime: NaN,
+      lastCanvasWidth: undefined,
+      lastCanvasHeight: undefined,
     },
     input: {
       dt: MS_PER_FRAME_60FPS,
@@ -323,6 +330,8 @@ export function applyLiveChartEngineFrame(
     extremaMaxValue: NaN,
     extremaMinTime: NaN,
     extremaMaxTime: NaN,
+    lastCanvasWidth: undefined,
+    lastCanvasHeight: undefined,
   };
   state.displayValue = sv.displayValue.value;
   state.displayMin = sv.displayMin.value;
@@ -408,6 +417,40 @@ export function applyLiveChartEngineFrame(
 export function useLiveChartEngine(
   config: EngineConfig,
 ): SingleEngineState & ChartEngineScroll & ChartEngineEdge {
+  const {
+    data,
+    value,
+    timeWindow: configuredTimeWindow,
+    smoothing: configuredSmoothing,
+    adaptiveSpeedBoost,
+    exaggerate,
+    referenceValue: configuredReferenceValue,
+    referenceValues: configuredReferenceValues,
+    liveReferenceValues,
+    thresholdRangePoints: configuredThresholdRangePoints,
+    thresholdRangeExtendToNow: configuredThresholdRangeExtendToNow,
+    thresholdRangeExtendToStart: configuredThresholdRangeExtendToStart,
+    nonNegative,
+    maxValue,
+    yRangeScale,
+    nowOverride,
+    windowBuffer,
+    paused,
+    scrollEnabled,
+    allowFutureViewEnd,
+    returnToLiveMs,
+    static: isStatic,
+    isFrameLoopActive,
+    debugFrameStats,
+    snapKey,
+    mode,
+    candles,
+    liveCandle,
+    candleGaps,
+    candleGapBridgeNoTrades,
+    candleGapBridgeUnavailable,
+    candleGapBridgeUnknown,
+  } = config;
   // Pinch-zoom window-width override (null = follow the configured window).
   // Declared first so `timeWindow` below can fold it in. Defaults to null so
   // charts without `zoom` behave exactly as before.
@@ -418,26 +461,28 @@ export function useLiveChartEngine(
   // the new prop forever, and prop-driven window changes would silently no-op.
   useEffect(() => {
     viewWindow.set(null);
-  }, [config.timeWindow, viewWindow]);
+  }, [configuredTimeWindow, viewWindow]);
 
   // Low-frequency config → UI thread via useDerivedValue. `timeWindow` is the
   // *effective* target window: the zoom override when set, else the prop. Both
   // the tick's window lerp and the X-axis tick selection read it, so zoom flows
   // downstream for free (mirrors how viewEnd drives `timestamp`).
-  const timeWindow = useDerivedValue(() => viewWindow.value ?? config.timeWindow);
+  const timeWindow = useDerivedValue(
+    () => viewWindow.value ?? configuredTimeWindow,
+  );
   // Static charts snap to their target in one tick (smoothing=1), so the single
   // settle reaction below produces the final state with no per-frame easing.
   const smoothing = useDerivedValue(() =>
-    config.static ? 1 : config.smoothing,
+    isStatic ? 1 : configuredSmoothing,
   );
-  const adaptiveSpeedBoostSV = useDerivedValue(() => config.adaptiveSpeedBoost);
-  const exaggerateSV = useDerivedValue(() => config.exaggerate ?? false);
-  const referenceValue = useDerivedValue(() => config.referenceValue);
+  const adaptiveSpeedBoostSV = useDerivedValue(() => adaptiveSpeedBoost);
+  const exaggerateSV = useDerivedValue(() => exaggerate ?? false);
+  const referenceValue = useDerivedValue(() => configuredReferenceValue);
   // Captured directly (not via `config.`) so Reanimated tracks the SharedValue and
   // the merge re-runs each frame while a line is dragged; stable when idle.
-  const liveReferenceValuesSV = config.liveReferenceValues;
+  const liveReferenceValuesSV = liveReferenceValues;
   const referenceValues = useDerivedValue(() => {
-    const base = config.referenceValues;
+    const base = configuredReferenceValues;
     const live = liveReferenceValuesSV?.value;
     if (!live || live.length === 0) return base;
     return base && base.length > 0 ? base.concat(live) : live;
@@ -446,56 +491,56 @@ export function useLiveChartEngine(
   // directly (not via `config.`) like `liveReferenceValues`, so the live
   // `threshold.series` SharedValue is tracked and the tick sees fresh points.
   const thresholdRangeSourceSV =
-    config.thresholdRangePoints !== undefined &&
-    !Array.isArray(config.thresholdRangePoints)
-      ? config.thresholdRangePoints
+    configuredThresholdRangePoints !== undefined &&
+    !Array.isArray(configuredThresholdRangePoints)
+      ? configuredThresholdRangePoints
       : null;
   const thresholdRangePoints = useDerivedValue<LiveChartPoint[] | undefined>(
     () =>
       thresholdRangeSourceSV
         ? thresholdRangeSourceSV.value
-        : (config.thresholdRangePoints as LiveChartPoint[] | undefined),
+        : (configuredThresholdRangePoints as LiveChartPoint[] | undefined),
   );
   const thresholdRangeExtendToNow = useDerivedValue(
-    () => config.thresholdRangeExtendToNow ?? true,
+    () => configuredThresholdRangeExtendToNow ?? true,
   );
   const thresholdRangeExtendToStart = useDerivedValue(
-    () => config.thresholdRangeExtendToStart ?? true,
+    () => configuredThresholdRangeExtendToStart ?? true,
   );
-  const nonNegativeSV = useDerivedValue(() => config.nonNegative ?? false);
-  const maxValueSV = useDerivedValue(() => config.maxValue);
-  const nowOverrideSV = useDerivedValue(() => config.nowOverride);
-  const windowBufferSV = useDerivedValue(() => config.windowBuffer ?? 0);
-  const pausedSV = useDerivedValue(() => config.paused ?? false);
+  const nonNegativeSV = useDerivedValue(() => nonNegative ?? false);
+  const maxValueSV = useDerivedValue(() => maxValue);
+  const nowOverrideSV = useDerivedValue(() => nowOverride);
+  const windowBufferSV = useDerivedValue(() => windowBuffer ?? 0);
+  const pausedSV = useDerivedValue(() => paused ?? false);
   // Whether time-scroll is active. Drives the return-to-live reaction below
   // (the tick no longer reads it — clearing `viewEnd` is what makes it follow).
   // Defaults to enabled so a caller that omits it behaves as before.
-  const scrollEnabledSV = useDerivedValue(() => config.scrollEnabled ?? true);
+  const scrollEnabledSV = useDerivedValue(() => scrollEnabled ?? true);
   // Honor a viewEnd parked past the live edge (timeScroll.overscroll).
   const allowFutureViewEndSV = useDerivedValue(
-    () => config.allowFutureViewEnd ?? false,
+    () => allowFutureViewEnd ?? false,
   );
   // Return-to-live glide duration (ms); 0 = instant snap. Read by the reaction.
   const returnToLiveMsSV = useDerivedValue(
-    () => config.returnToLiveMs ?? RETURN_TO_LIVE_MS,
+    () => returnToLiveMs ?? RETURN_TO_LIVE_MS,
   );
-  const modeSV = useDerivedValue(() => config.mode ?? "line");
-  const candleGapsSV = useDerivedValue(() => config.candleGaps);
+  const modeSV = useDerivedValue(() => mode ?? "line");
+  const candleGapsSV = useDerivedValue(() => candleGaps);
   const candleGapBridgeNoTradesSV = useDerivedValue(
-    () => config.candleGapBridgeNoTrades ?? false,
+    () => candleGapBridgeNoTrades ?? false,
   );
   const candleGapBridgeUnavailableSV = useDerivedValue(
-    () => config.candleGapBridgeUnavailable ?? false,
+    () => candleGapBridgeUnavailable ?? false,
   );
   const candleGapBridgeUnknownSV = useDerivedValue(
-    () => config.candleGapBridgeUnknown ?? false,
+    () => candleGapBridgeUnknown ?? false,
   );
 
   // Animation state (mutated on UI thread each frame)
   const displayValue = useSharedValue(0);
   const displayMin = useSharedValue(0);
   const displayMax = useSharedValue(1);
-  const displayWindow = useSharedValue(config.timeWindow);
+  const displayWindow = useSharedValue(configuredTimeWindow);
   const canvasWidth = useSharedValue(0);
   const canvasHeight = useSharedValue(0);
   // Seed once; overwritten by the frame callback on the first tick.
@@ -525,8 +570,6 @@ export function useLiveChartEngine(
 
   // High-frequency data reads directly from the caller's shared values —
   // no useDerivedValue bridging, no closure serialization per tick.
-  const { data, value, candles, liveCandle } = config;
-
   // One-shot "snap the framing" flag. The effect below flips it to `true` when
   // `snapKey` changes; the next frame consumes it (bypassing `smoothing` for the
   // window / range / value) and clears it, so a timeframe / dataset switch lands
@@ -534,20 +577,20 @@ export function useLiveChartEngine(
   const snapSV = useSharedValue(false);
   // Compare against the previous key (not a "first render" flag) so React 18
   // StrictMode's double-invoked mount effect can't fire a spurious snap.
-  const lastSnapKey = useRef(config.snapKey);
+  const lastSnapKey = useRef(snapKey);
   // Layout effect, not passive: a passive effect runs after the commit has
   // painted, so the frame between them draws the new data/candleWidth against
   // the OLD framing (a one-frame squeeze on a timeframe switch). Flipping the
   // flag before paint lets the first frame with the new props consume the snap.
   useLayoutEffect(() => {
-    if (config.snapKey === lastSnapKey.current) return;
-    lastSnapKey.current = config.snapKey;
+    if (snapKey === lastSnapKey.current) return;
+    lastSnapKey.current = snapKey;
     snapSV.set(true);
-  }, [config.snapKey, snapSV]);
+  }, [snapKey, snapSV]);
 
   // Static charts run zero per-frame loops. `isStaticSV` gates both the
   // frame-callback autostart and the one-shot settle reaction below.
-  const isStaticSV = useDerivedValue(() => config.static ?? false);
+  const isStaticSV = useDerivedValue(() => isStatic ?? false);
 
   // Single refs object shared by the frame callback and the settle reaction so
   // they can never drift out of sync. Keep its identity stable across unrelated
@@ -576,7 +619,7 @@ export function useLiveChartEngine(
       thresholdRangeExtendToNow,
       nonNegativeSV,
       maxValueSV,
-      yRangeScaleSV: config.yRangeScale,
+      yRangeScaleSV: yRangeScale,
       nowOverrideSV,
       windowBufferSV,
       pausedSV,
@@ -610,7 +653,6 @@ export function useLiveChartEngine(
       candles,
       canvasHeight,
       canvasWidth,
-      config.yRangeScale,
       data,
       displayMax,
       displayMin,
@@ -638,12 +680,13 @@ export function useLiveChartEngine(
       thresholdRangeExtendToNow,
       thresholdRangeExtendToStart,
       thresholdRangePoints,
-      timestamp,
       timeWindow,
+      timestamp,
       value,
       viewEnd,
       viewWindow,
       windowBufferSV,
+      yRangeScale,
     ],
   );
   const frameScratchRef = useRef<EngineFrameScratch | null>(null);
@@ -657,13 +700,37 @@ export function useLiveChartEngine(
   // loop is fully inert in static mode (the invariant that makes this worth it).
   const engineFrameCallback = useFrameCallback((frameInfo) => {
     "worklet";
+    if (isFrameLoopActive?.get() === false) return;
+    const beforeValue = debugFrameStats ? displayValue.get() : 0;
+    const beforeMin = debugFrameStats ? displayMin.get() : 0;
+    const beforeMax = debugFrameStats ? displayMax.get() : 0;
+    const beforeWindow = debugFrameStats ? displayWindow.get() : 0;
+    const beforeTimestamp = debugFrameStats ? timestamp.get() : 0;
+    const beforeLiveEdge = debugFrameStats ? liveEdge.get() : 0;
+    const beforeEdgeValue = debugFrameStats ? edgeValue.get() : 0;
     applyLiveChartEngineFrame(frameInfo, frameRefs, frameScratchRef.current!);
-  }, !config.static);
+    if (debugFrameStats) {
+      const didPublish =
+        beforeValue !== displayValue.get() ||
+        beforeMin !== displayMin.get() ||
+        beforeMax !== displayMax.get() ||
+        beforeWindow !== displayWindow.get() ||
+        beforeTimestamp !== timestamp.get() ||
+        beforeLiveEdge !== liveEdge.get() ||
+        beforeEdgeValue !== edgeValue.get();
+      const previous = debugFrameStats.get();
+      debugFrameStats.set({
+        frames: previous.frames + 1,
+        published: previous.published + (didPublish ? 1 : 0),
+        skipped: previous.skipped + (didPublish ? 0 : 1),
+      });
+    }
+  }, !isStatic);
   useEffect(() => {
     // Reanimated only seeds `isActive` from `autostart` on mount. Keep the
     // imperative state aligned when a chart switches between static and live.
-    engineFrameCallback.setActive(!config.static);
-  }, [config.static, engineFrameCallback]);
+    engineFrameCallback.setActive(!isStatic);
+  }, [isStatic, engineFrameCallback]);
 
   // When time-scroll is disabled while scrolled back, return the window to the
   // live edge. With a positive duration this glides: snapshot the frozen edge into
@@ -715,6 +782,12 @@ export function useLiveChartEngine(
         canvasWidth.get(),
         canvasHeight.get(),
         timeWindow.get(),
+        // Range props can arrive after the data shared value. Re-settle when
+        // those bounds change too, rather than retaining the previous scale
+        // until another data/layout update (static charts have no frame loop).
+        maxValueSV.get(),
+        referenceValue.get(),
+        ...(referenceValues.get() ?? []),
       ].join(",");
     },
     (curr, prev) => {

package/src/hooks/useBadge.ts

@@ -1,4 +1,5 @@
 import { type SkFont } from "@shopify/react-native-skia";
+import { useRef } from "react";
 import {
   useDerivedValue,
   useSharedValue,
@@ -9,7 +10,10 @@ import {
   MOTION_METRICS_DEFAULTS,
   MS_PER_FRAME_60FPS,
 } from "../constants";
-import { measureFontTextWidth } from "../lib/measureFontTextWidth";
+import {
+  measureFontTextWidth,
+  type TextWidthCache,
+} from "../lib/measureFontTextWidth";
 import type { ChartEngineWithLiveValue } from "../core/useLiveChartEngine";
 import {
   badgeTailAndCap,
@@ -64,6 +68,7 @@ export function useBadge(
   const colorR = useSharedValue(0);
   const colorG = useSharedValue(0);
   const colorB = useSharedValue(0);
+  const textWidthCacheRef = useRef<TextWidthCache>({});
 
   const upRgb = hexToRgb(palette.dotUp);
   const downRgb = hexToRgb(palette.dotDown);
@@ -103,7 +108,7 @@ export function useBadge(
         : padding.top + ((dMax - liveVal) / valRange) * chartH;
 
     const text = formatValue(liveVal);
-    const textW = measureFontTextWidth(font, text);
+    const textW = measureFontTextWidth(font, text, textWidthCacheRef.current);
 
     const pillH = font.getSize() + badgeMetrics.padY * 2;
     // `midY` is the pill's vertical center (the tail anchors here); `capR` is the

package/src/hooks/useCandlePaths.ts

@@ -38,6 +38,8 @@ export function useCandleWidthLerp(
   autostart: boolean,
   /** Only advance the displayed width while candle mode is active. */
   active: boolean,
+  /** Runtime gate shared with the chart engine. */
+  isFrameLoopActive?: SharedValue<boolean>,
 ): SharedValue<number> {
   const targetCandleWidth = useDerivedValue(() => candleWidthSecs);
   const displayCandleWidth = useSharedValue(candleWidthSecs);
@@ -51,16 +53,16 @@ export function useCandleWidthLerp(
 
   const widthFrameCallback = useFrameCallback((frameInfo) => {
     "worklet";
-    if (!active) return;
+    if (!active || isFrameLoopActive?.get() === false) return;
     const dt = frameInfo.timeSincePreviousFrame ?? MS_PER_FRAME_60FPS;
-    displayCandleWidth.set(
-      lerp(
-        displayCandleWidth.get(),
-        targetCandleWidth.get(),
-        widthLerpSpeed.get(),
-        dt,
-      ),
+    const target = targetCandleWidth.get();
+    const next = lerp(
+      displayCandleWidth.get(),
+      target,
+      widthLerpSpeed.get(),
+      dt,
     );
+    displayCandleWidth.set(Math.abs(target - next) < 0.01 ? target : next);
   }, autostart);
   useEffect(() => {
     // `autostart` is an initial seed in Reanimated, not a reactive switch.