react-native-livechart 4.9.2 → 4.11.0

package/src/core/useLiveChartEngine.ts

@@ -18,7 +18,11 @@ import {
 } from "react-native-reanimated";
 import { MS_PER_FRAME_60FPS, RETURN_TO_LIVE_MS } from "../constants";
 import type { CandlePoint, LiveChartPoint, SeriesConfig } from "../types";
-import { tickLiveChartEngineFrame } from "./liveChartEngineTick";
+import {
+  tickLiveChartEngineFrame,
+  type EngineTickInput,
+  type EngineTickMutable,
+} from "./liveChartEngineTick";
 
 export interface EngineConfig {
   data: SharedValue<LiveChartPoint[]>;
@@ -229,6 +233,42 @@ export interface EngineFrameRefs {
   extremaMaxTime: SharedValue<number>;
 }
 
+/** Stable state/input containers reused by the UI-thread frame callback. */
+export interface EngineFrameScratch {
+  state: EngineTickMutable;
+  input: EngineTickInput;
+}
+
+/** Allocate one single-series frame scratch. Call once per engine instance. */
+export function makeEngineFrameScratch(): EngineFrameScratch {
+  return {
+    state: {
+      displayValue: 0,
+      displayMin: 0,
+      displayMax: 1,
+      displayWindow: 0,
+      timestamp: 0,
+      liveEdge: 0,
+      edgeValue: 0,
+      extremaMinValue: NaN,
+      extremaMaxValue: NaN,
+      extremaMinTime: NaN,
+      extremaMaxTime: NaN,
+    },
+    input: {
+      dt: MS_PER_FRAME_60FPS,
+      canvasWidth: 0,
+      canvasHeight: 0,
+      timeWindow: 0,
+      smoothing: 0,
+      exaggerate: false,
+      referenceValue: undefined,
+      targetValue: 0,
+      points: [],
+    },
+  };
+}
+
 /**
  * Shared between the `useFrameCallback` worklet and unit tests.
  * Mutates shared values from a snapshot tick (`tickLiveChartEngineFrame`).
@@ -236,54 +276,77 @@ export interface EngineFrameRefs {
 export function applyLiveChartEngineFrame(
   frameInfo: { timeSincePreviousFrame?: number | null },
   sv: EngineFrameRefs,
+  scratch?: EngineFrameScratch,
 ): void {
   "worklet";
   const dt = frameInfo.timeSincePreviousFrame ?? MS_PER_FRAME_60FPS;
   // One-shot settle: a `snapKey` change set this flag; consume it for this tick
   // and clear it below so only this frame snaps (live ticks stay smoothed).
   const snap = sv.snapSV?.value ?? false;
-  const state = {
-    displayValue: sv.displayValue.value,
-    displayMin: sv.displayMin.value,
-    displayMax: sv.displayMax.value,
-    displayWindow: sv.displayWindow.value,
-    timestamp: sv.timestamp.value,
-    liveEdge: sv.liveEdgeSV?.value ?? 0,
-    edgeValue: sv.edgeValueSV?.value ?? 0,
-    extremaMinValue: sv.extremaMinValue.value,
-    extremaMaxValue: sv.extremaMaxValue.value,
-    extremaMinTime: sv.extremaMinTime.value,
-    extremaMaxTime: sv.extremaMaxTime.value,
+  const state: EngineTickMutable = scratch?.state ?? {
+    displayValue: 0,
+    displayMin: 0,
+    displayMax: 1,
+    displayWindow: 0,
+    timestamp: 0,
+    liveEdge: 0,
+    edgeValue: 0,
+    extremaMinValue: NaN,
+    extremaMaxValue: NaN,
+    extremaMinTime: NaN,
+    extremaMaxTime: NaN,
   };
-  tickLiveChartEngineFrame(state, {
+  state.displayValue = sv.displayValue.value;
+  state.displayMin = sv.displayMin.value;
+  state.displayMax = sv.displayMax.value;
+  state.displayWindow = sv.displayWindow.value;
+  state.timestamp = sv.timestamp.value;
+  state.liveEdge = sv.liveEdgeSV?.value ?? 0;
+  state.edgeValue = sv.edgeValueSV?.value ?? 0;
+  state.extremaMinValue = sv.extremaMinValue.value;
+  state.extremaMaxValue = sv.extremaMaxValue.value;
+  state.extremaMinTime = sv.extremaMinTime.value;
+  state.extremaMaxTime = sv.extremaMaxTime.value;
+
+  const input: EngineTickInput = scratch?.input ?? {
     dt,
-    canvasWidth: sv.canvasWidth.value,
-    canvasHeight: sv.canvasHeight.value,
-    timeWindow: sv.timeWindow.value,
-    smoothing: sv.smoothing.value,
-    adaptiveSpeedBoost: sv.adaptiveSpeedBoostSV?.value,
-    exaggerate: sv.exaggerateSV.value,
-    referenceValue: sv.referenceValue.value,
-    referenceValues: sv.referenceValues?.value,
-    thresholdRangePoints: sv.thresholdRangePoints?.value,
-    thresholdRangeExtendToNow: sv.thresholdRangeExtendToNow?.value ?? true,
-    nonNegative: sv.nonNegativeSV?.value ?? false,
-    maxValue: sv.maxValueSV?.value,
-    nowOverride: sv.nowOverrideSV?.value,
-    windowBuffer: sv.windowBufferSV?.value ?? 0,
-    targetValue: sv.value.value,
-    points: sv.data.value,
-    nowSeconds: Date.now() / 1000,
-    paused: sv.pausedSV.value,
-    snap,
-    viewEnd: sv.viewEndSV?.value,
-    returnT: sv.returnTSV?.value,
-    returnFrom: sv.returnFromSV?.value,
-    viewWindow: sv.viewWindowSV?.value,
-    mode: sv.modeSV.value,
-    candles: sv.candles?.value,
-    liveCandle: sv.liveCandle?.value,
-  });
+    canvasWidth: 0,
+    canvasHeight: 0,
+    timeWindow: 0,
+    smoothing: 0,
+    exaggerate: false,
+    referenceValue: undefined,
+    targetValue: 0,
+    points: [],
+  };
+  input.dt = dt;
+  input.canvasWidth = sv.canvasWidth.value;
+  input.canvasHeight = sv.canvasHeight.value;
+  input.timeWindow = sv.timeWindow.value;
+  input.smoothing = sv.smoothing.value;
+  input.adaptiveSpeedBoost = sv.adaptiveSpeedBoostSV?.value;
+  input.exaggerate = sv.exaggerateSV.value;
+  input.referenceValue = sv.referenceValue.value;
+  input.referenceValues = sv.referenceValues?.value;
+  input.thresholdRangePoints = sv.thresholdRangePoints?.value;
+  input.thresholdRangeExtendToNow = sv.thresholdRangeExtendToNow?.value ?? true;
+  input.nonNegative = sv.nonNegativeSV?.value ?? false;
+  input.maxValue = sv.maxValueSV?.value;
+  input.nowOverride = sv.nowOverrideSV?.value;
+  input.windowBuffer = sv.windowBufferSV?.value ?? 0;
+  input.targetValue = sv.value.value;
+  input.points = sv.data.value;
+  input.nowSeconds = Date.now() / 1000;
+  input.paused = sv.pausedSV.value;
+  input.snap = snap;
+  input.viewEnd = sv.viewEndSV?.value;
+  input.returnT = sv.returnTSV?.value;
+  input.returnFrom = sv.returnFromSV?.value;
+  input.viewWindow = sv.viewWindowSV?.value;
+  input.mode = sv.modeSV.value;
+  input.candles = sv.candles?.value;
+  input.liveCandle = sv.liveCandle?.value;
+  tickLiveChartEngineFrame(state, input);
   sv.displayValue.value = state.displayValue;
   sv.displayMin.value = state.displayMin;
   sv.displayMax.value = state.displayMax;
@@ -467,12 +530,16 @@ export function useLiveChartEngine(
     extremaMinTime,
     extremaMaxTime,
   };
+  const frameScratchRef = useRef<EngineFrameScratch | null>(null);
+  if (frameScratchRef.current === null) {
+    frameScratchRef.current = makeEngineFrameScratch();
+  }
 
   // `autostart=false` registers the frame callback without running it — the live
   // loop is fully inert in static mode (the invariant that makes this worth it).
   useFrameCallback((frameInfo) => {
     "worklet";
-    applyLiveChartEngineFrame(frameInfo, frameRefs);
+    applyLiveChartEngineFrame(frameInfo, frameRefs, frameScratchRef.current!);
   }, !config.static);
 
   // When time-scroll is disabled while scrolled back, return the window to the
@@ -532,6 +599,7 @@ export function useLiveChartEngine(
       applyLiveChartEngineFrame(
         { timeSincePreviousFrame: MS_PER_FRAME_60FPS },
         frameRefs,
+        frameScratchRef.current!,
       );
     },
   );

package/src/core/useLiveChartSeriesEngine.ts

@@ -11,7 +11,11 @@ import {
 } from "react-native-reanimated";
 import { MS_PER_FRAME_60FPS, RETURN_TO_LIVE_MS } from "../constants";
 import type { LiveChartPoint, SeriesConfig } from "../types";
-import { tickLiveChartSeriesEngineFrame } from "./liveChartSeriesEngineTick";
+import {
+  tickLiveChartSeriesEngineFrame,
+  type MultiEngineTickInput,
+  type MultiEngineTickMutable,
+} from "./liveChartSeriesEngineTick";
 import type { ChartEngineScroll, MultiEngineState } from "./useLiveChartEngine";
 
 export interface MultiSeriesEngineConfig {
@@ -94,10 +98,10 @@ export interface MultiEngineFrameRefs {
 }
 
 /**
- * Reusable per-frame scratch for {@link applyLiveChartSeriesEngineFrame}. The two
+ * Reusable per-frame scratch for {@link applyLiveChartSeriesEngineFrame}. The
  * output arrays ping-pong so the assigned reference still changes each frame
- * (Reanimated propagates on reference change) without allocating a fresh array
- * per frame. Create one per engine (the React Compiler keeps it stable).
+ * (Reanimated propagates on reference change), while the state/input containers
+ * are mutated in place. Create one per engine.
  */
 export interface MultiSeriesEngineScratch {
   dvA: number[];
@@ -105,6 +109,46 @@ export interface MultiSeriesEngineScratch {
   opA: number[];
   opB: number[];
   tick: boolean;
+  state: MultiEngineTickMutable;
+  input: MultiEngineTickInput;
+}
+
+/** Allocate one multi-series frame scratch. Call once per engine instance. */
+export function makeMultiSeriesEngineScratch(): MultiSeriesEngineScratch {
+  const dvA: number[] = [];
+  const dvB: number[] = [];
+  const opA: number[] = [];
+  const opB: number[] = [];
+  return {
+    dvA,
+    dvB,
+    opA,
+    opB,
+    tick: false,
+    state: {
+      displayMin: 0,
+      displayMax: 1,
+      displayWindow: 0,
+      timestamp: 0,
+      liveEdge: 0,
+      displayValues: dvA,
+      opacities: opA,
+      extremaMinValue: NaN,
+      extremaMaxValue: NaN,
+      extremaMinTime: NaN,
+      extremaMaxTime: NaN,
+    },
+    input: {
+      dt: MS_PER_FRAME_60FPS,
+      canvasWidth: 0,
+      canvasHeight: 0,
+      timeWindow: 0,
+      smoothing: 0,
+      exaggerate: false,
+      referenceValue: undefined,
+      series: [],
+    },
+  };
 }
 
 /**
@@ -113,8 +157,8 @@ export interface MultiSeriesEngineScratch {
  * to lerp per-series display values and opacities. Extracted as a
  * pure function so it can be called from both `useFrameCallback` and tests.
  *
- * Pass `scratch` to reuse the output arrays across frames instead of allocating
- * two via `.slice()` each frame; omit it (tests) to fall back to allocation.
+ * Pass `scratch` to reuse the output arrays plus state/input containers across
+ * frames; omit it (tests) to retain the standalone allocation fallback.
  */
 export function applyLiveChartSeriesEngineFrame(
   frameInfo: { timeSincePreviousFrame?: number | null },
@@ -143,42 +187,63 @@ export function applyLiveChartSeriesEngineFrame(
     displayValues = curDv.slice();
     opacities = curOp.slice();
   }
-  const state = {
-    displayMin: sv.displayMin.value,
-    displayMax: sv.displayMax.value,
-    displayWindow: sv.displayWindow.value,
-    timestamp: sv.timestamp.value,
-    liveEdge: sv.liveEdgeSV?.value ?? 0,
+  const state: MultiEngineTickMutable = scratch?.state ?? {
+    displayMin: 0,
+    displayMax: 1,
+    displayWindow: 0,
+    timestamp: 0,
+    liveEdge: 0,
     displayValues,
     opacities,
-    extremaMinValue: sv.extremaMinValue.value,
-    extremaMaxValue: sv.extremaMaxValue.value,
-    extremaMinTime: sv.extremaMinTime.value,
-    extremaMaxTime: sv.extremaMaxTime.value,
+    extremaMinValue: NaN,
+    extremaMaxValue: NaN,
+    extremaMinTime: NaN,
+    extremaMaxTime: NaN,
   };
-  tickLiveChartSeriesEngineFrame(state, {
+  state.displayMin = sv.displayMin.value;
+  state.displayMax = sv.displayMax.value;
+  state.displayWindow = sv.displayWindow.value;
+  state.timestamp = sv.timestamp.value;
+  state.liveEdge = sv.liveEdgeSV?.value ?? 0;
+  state.displayValues = displayValues;
+  state.opacities = opacities;
+  state.extremaMinValue = sv.extremaMinValue.value;
+  state.extremaMaxValue = sv.extremaMaxValue.value;
+  state.extremaMinTime = sv.extremaMinTime.value;
+  state.extremaMaxTime = sv.extremaMaxTime.value;
+
+  const input: MultiEngineTickInput = scratch?.input ?? {
     dt,
-    canvasWidth: sv.canvasWidth.value,
-    canvasHeight: sv.canvasHeight.value,
-    timeWindow: sv.timeWindow.value,
-    smoothing: sv.smoothing.value,
-    adaptiveSpeedBoost: sv.adaptiveSpeedBoostSV?.value,
-    exaggerate: sv.exaggerateSV.value,
-    referenceValue: sv.referenceValue.value,
-    referenceValues: sv.referenceValues?.value,
-    nonNegative: sv.nonNegativeSV?.value ?? false,
-    maxValue: sv.maxValueSV?.value,
-    nowOverride: sv.nowOverrideSV?.value,
-    windowBuffer: sv.windowBufferSV?.value ?? 0,
+    canvasWidth: 0,
+    canvasHeight: 0,
+    timeWindow: 0,
+    smoothing: 0,
+    exaggerate: false,
+    referenceValue: undefined,
     series: seriesSnap,
-    nowSeconds: Date.now() / 1000,
-    paused: sv.pausedSV.value,
-    snap,
-    viewEnd: sv.viewEndSV?.value,
-    returnT: sv.returnTSV?.value,
-    returnFrom: sv.returnFromSV?.value,
-    viewWindow: sv.viewWindowSV?.value,
-  });
+  };
+  input.dt = dt;
+  input.canvasWidth = sv.canvasWidth.value;
+  input.canvasHeight = sv.canvasHeight.value;
+  input.timeWindow = sv.timeWindow.value;
+  input.smoothing = sv.smoothing.value;
+  input.adaptiveSpeedBoost = sv.adaptiveSpeedBoostSV?.value;
+  input.exaggerate = sv.exaggerateSV.value;
+  input.referenceValue = sv.referenceValue.value;
+  input.referenceValues = sv.referenceValues?.value;
+  input.nonNegative = sv.nonNegativeSV?.value ?? false;
+  input.maxValue = sv.maxValueSV?.value;
+  input.nowOverride = sv.nowOverrideSV?.value;
+  input.windowBuffer = sv.windowBufferSV?.value ?? 0;
+  input.series = seriesSnap;
+  input.nowSeconds = Date.now() / 1000;
+  input.paused = sv.pausedSV.value;
+  input.snap = snap;
+  input.viewEnd = sv.viewEndSV?.value;
+  input.returnT = sv.returnTSV?.value;
+  input.returnFrom = sv.returnFromSV?.value;
+  input.viewWindow = sv.viewWindowSV?.value;
+  tickLiveChartSeriesEngineFrame(state, input);
   sv.displayMin.value = state.displayMin;
   sv.displayMax.value = state.displayMax;
   sv.displayWindow.value = state.displayWindow;
@@ -272,46 +337,48 @@ export function useLiveChartSeriesEngine(
   // Reused per-frame output buffers (ping-ponged) — see applyLiveChartSeriesEngineFrame.
   const scratchRef = useRef<MultiSeriesEngineScratch | null>(null);
   if (scratchRef.current === null) {
-    scratchRef.current = { dvA: [], dvB: [], opA: [], opB: [], tick: false };
+    scratchRef.current = makeMultiSeriesEngineScratch();
   }
 
+  const frameRefs: MultiEngineFrameRefs = {
+    series,
+    displaySeriesValues,
+    seriesOpacities,
+    displayMin,
+    displayMax,
+    displayWindow,
+    timestamp,
+    canvasWidth,
+    canvasHeight,
+    timeWindow,
+    smoothing,
+    adaptiveSpeedBoostSV,
+    exaggerateSV,
+    referenceValue,
+    referenceValues,
+    nonNegativeSV,
+    maxValueSV,
+    nowOverrideSV,
+    windowBufferSV,
+    pausedSV,
+    viewEndSV: viewEnd,
+    returnTSV: returnT,
+    returnFromSV: returnFrom,
+    viewWindowSV: viewWindow,
+    liveEdgeSV: liveEdge,
+    snapSV,
+    extremaMinValue,
+    extremaMaxValue,
+    extremaMinTime,
+    extremaMaxTime,
+  };
+
   useFrameCallback((frameInfo) => {
     "worklet";
     const scratch = scratchRef.current!;
     applyLiveChartSeriesEngineFrame(
       frameInfo,
-      {
-        series,
-        displaySeriesValues,
-        seriesOpacities,
-        displayMin,
-        displayMax,
-        displayWindow,
-        timestamp,
-        canvasWidth,
-        canvasHeight,
-        timeWindow,
-        smoothing,
-        adaptiveSpeedBoostSV,
-        exaggerateSV,
-        referenceValue,
-        referenceValues,
-        nonNegativeSV,
-        maxValueSV,
-        nowOverrideSV,
-        windowBufferSV,
-        pausedSV,
-        viewEndSV: viewEnd,
-        returnTSV: returnT,
-        returnFromSV: returnFrom,
-        viewWindowSV: viewWindow,
-        liveEdgeSV: liveEdge,
-        snapSV,
-        extremaMinValue,
-        extremaMaxValue,
-        extremaMinTime,
-        extremaMaxTime,
-      },
+      frameRefs,
       scratch,
     );
   });

package/src/draw/markerAtlas.ts

@@ -59,6 +59,21 @@ export function groupCountText(count: number): string {
   return count > 99 ? "99" : `${count}`;
 }
 
+/** Width of proportionally laid-out count-badge text at its on-canvas scale. */
+export function groupCountTextWidth(
+  text: string,
+  digitWidths: Record<string, number>,
+  letterSpacing = 0,
+): number {
+  "worklet";
+  let width = 0;
+  for (let i = 0; i < text.length; i++) {
+    width += (digitWidths[text[i]] ?? 0) * BADGE_TEXT_SCALE;
+    if (i > 0) width += letterSpacing;
+  }
+  return width;
+}
+
 /** Default glyph color per kind when `marker.color` is unset. Worklet-safe so the
  *  per-frame overlay worklet can resolve a collapsed cluster's badge color. */
 export function defaultMarkerColor(
@@ -333,10 +348,12 @@ function groupBgCellSpec(
   bgColor: string,
   uw: number,
   gh: number,
+  letterSpacing: number,
 ): CellSpec {
   const m2 = CELL_MARGIN * 2;
   // Inner circle fits a centered two-digit string at BADGE_TEXT_SCALE plus padding.
-  const innerR = Math.ceil(Math.max(2 * uw, gh) * BADGE_TEXT_SCALE) / 2 + BADGE_PAD;
+  const textWidth = 2 * uw * BADGE_TEXT_SCALE + Math.max(0, letterSpacing);
+  const innerR = Math.ceil(Math.max(textWidth, gh * BADGE_TEXT_SCALE)) / 2 + BADGE_PAD;
   const outerR = innerR + BADGE_BORDER;
   const diameter = 2 * outerR;
   return {
@@ -429,7 +446,10 @@ export function buildMarkerAtlas(
       colors.add(m.color ?? defaultMarkerColor(m.kind, palette));
     }
     for (const color of colors) {
-      specs.push({ sig: groupBgSig(color), spec: groupBgCellSpec(color, bgColor, uw, gh) });
+      specs.push({
+        sig: groupBgSig(color),
+        spec: groupBgCellSpec(color, bgColor, uw, gh, groupBadge?.letterSpacing ?? 0),
+      });
     }
   }
 

package/src/draw/particleAtlas.ts

@@ -62,7 +62,8 @@ export interface ParticleInstance {
  *   scale = r / spriteRadius
  *   alpha = life * particleOpacity
  * Inactive (active <= 0.5), pre-spawn (dt < 0) and fully-faded (life <= 0)
- * slots are skipped.
+ * slots are skipped. Pass distinct `out` and `pool` arrays to retain inactive
+ * instance objects for later bursts while returning only the active prefix.
  */
 export function buildParticleInstances(
   buf: Float64Array,
@@ -71,9 +72,13 @@ export function buildParticleInstances(
   burstDur: number,
   particleOpacity: number,
   spriteRadius: number,
+  out?: ParticleInstance[],
+  pool?: ParticleInstance[],
 ): ParticleInstance[] {
   "worklet";
-  const out: ParticleInstance[] = [];
+  const target = out ?? [];
+  const instances = pool ?? target;
+  let count = 0;
   for (let i = 0; i < slots; i++) {
     const base = i * DEGEN_STRIDE;
     if (!(buf[base + 5] > 0.5)) continue;
@@ -83,13 +88,19 @@ export function buildParticleInstances(
     if (life <= 0) continue;
     const size = buf[base + 6] || 1;
     const r = size * (0.5 + life * 0.5);
-    out.push({
-      x: buf[base + 0],
-      y: buf[base + 1],
-      scale: r / spriteRadius,
-      alpha: life * particleOpacity,
-      colorIndex: Math.max(0, Math.floor(buf[base + 7])),
-    });
+    let instance = instances[count];
+    if (!instance) {
+      instance = { x: 0, y: 0, scale: 0, alpha: 0, colorIndex: 0 };
+      instances[count] = instance;
+    }
+    instance.x = buf[base + 0];
+    instance.y = buf[base + 1];
+    instance.scale = r / spriteRadius;
+    instance.alpha = life * particleOpacity;
+    instance.colorIndex = Math.max(0, Math.floor(buf[base + 7]));
+    target[count] = instance;
+    count += 1;
   }
-  return out;
+  target.length = count;
+  return target;
 }

package/src/hooks/crosshairShared.ts

@@ -14,6 +14,22 @@ const TOOLTIP_EDGE_GAP = 4;
 const TOOLTIP_TOP_MARGIN = 8;
 const FADE_ZONE = 4;
 
+/** Horizontal travel required before a plain scrub claims the touch. */
+export const SCRUB_ACTIVATE_X_PX = 20;
+/** Vertical travel that fails a plain scrub so a parent scroll gesture can win. */
+export const SCRUB_FAIL_Y_PX = 10;
+
+/** Measure rendered text so the pill and its content share the same centre. */
+function measureTooltipTextWidth(
+  font: SkFont,
+  text: string,
+  monoCharWidth: number,
+): number {
+  "worklet";
+  const measured = measureFontTextWidth(font, text);
+  return measured > 0 ? measured : text.length * monoCharWidth;
+}
+
 export interface TooltipLayout {
   x: number;
   y: number;
@@ -197,10 +213,7 @@ export function computeTooltipLayout(
   formatValue: (v: number) => string,
   formatTime: (t: number) => string,
   font: SkFont,
-  /** Monospace advance width. When > 0, text width is `len * monoCharWidth`
-   *  instead of a per-frame Skia `measureText` — scrubbing re-runs this worklet
-   *  every frame, and `measureText` shapes text each call (a real cost,
-   *  especially in the simulator). Falls back to `measureText` when 0. */
+  /** Monospace advance width fallback when font measurement returns zero. */
   monoCharWidth = 0,
   /** Where the pill sits relative to the scrub line. `"side"` offsets it right
    *  (flipping left near the edge); `"top"`/`"bottom"` center it over the line,
@@ -243,14 +256,11 @@ export function computeTooltipLayout(
   const totalH =
     TOOLTIP_PAD_Y * 2 + lineH * rowCount + TOOLTIP_LINE_GAP * (rowCount - 1);
 
-  const valueW =
-    monoCharWidth > 0
-      ? valueStr.length * monoCharWidth
-      : measureFontTextWidth(font, valueStr);
-  const timeW =
-    monoCharWidth > 0
-      ? timeStr.length * monoCharWidth
-      : measureFontTextWidth(font, timeStr);
+  // Use actual glyph bounds for every visible-row variant. The old
+  // character-count approximation made punctuation-heavy dates/times appear
+  // off-centre even when the pill itself was positioned correctly.
+  const valueW = measureTooltipTextWidth(font, valueStr, monoCharWidth);
+  const timeW = measureTooltipTextWidth(font, timeStr, monoCharWidth);
   // Only the visible rows contribute to the pill width.
   const contentW = Math.max(sv ? valueW : 0, st ? timeW : 0);
   const pillW = contentW + TOOLTIP_PAD_X * 2;
@@ -333,8 +343,7 @@ export function computeTooltipLayoutMulti(
   padding: ChartPadding,
   canvasWidth: number,
   font: SkFont,
-  /** Monospace advance width; when > 0, sizes text by length instead of a
-   *  per-frame Skia `measureText`. See {@link computeTooltipLayout}. */
+  /** Monospace advance width fallback when font measurement returns zero. */
   monoCharWidth = 0,
 ): TooltipLayout {
   "worklet";
@@ -349,10 +358,7 @@ export function computeTooltipLayoutMulti(
   let contentW = 0;
   const lineWidths: number[] = [];
   for (let i = 0; i < n; i++) {
-    const w =
-      monoCharWidth > 0
-        ? lines[i].text.length * monoCharWidth
-        : measureFontTextWidth(font, lines[i].text);
+    const w = measureTooltipTextWidth(font, lines[i].text, monoCharWidth);
     lineWidths.push(w);
     if (w > contentW) contentW = w;
   }