react-native-livechart 4.9.0 → 4.9.2

package/src/components/LiveChartSeries.tsx

@@ -208,7 +208,11 @@ function useLiveChartSeriesController({
       ? (timeScrollHoldMs ?? (scrubCfg?.panGestureDelay || HOLD_TO_SCRUB_MS))
       : (scrubCfg?.panGestureDelay ?? 0);
 
-  const selectionDotCfg = resolveSelectionDot(selectionDot);
+  // Multi-series defaults the scrub selection dot OFF: it can only track one
+  // line (the leading series), which reads as a bug next to the other series.
+  // The crosshair line + per-series tooltip stack already mark the scrub point.
+  // Passing `selectionDot` explicitly (true / config) still opts it in.
+  const selectionDotCfg = resolveSelectionDot(selectionDot ?? false);
   const gridStyleCfg = resolveGridStyle(gridStyle);
   const dotCfg = resolveMultiSeriesDot(dotProp);
   // Outer footprint of a dot (the color-filled radius plus the halo ring).

package/src/core/liveChartEngineTick.ts

@@ -235,7 +235,9 @@ export function tickLiveChartEngineFrame(
       }
     }
     const lc = input.liveCandle;
-    if (lc) {
+    // Fold the in-progress candle in only while its bucket is visible — when
+    // scrolled back past it, the live candle must not stretch the Y range.
+    if (lc && (!scrolledBack || lc.time <= state.timestamp)) {
       /* istanbul ignore next -- trivial min/max */
       if (lc.low < tMin) {
         tMin = lc.low;
@@ -257,6 +259,11 @@ export function tickLiveChartEngineFrame(
       else hi = mid;
     }
     for (let i = lo; i < points.length; i++) {
+      // While scrolled back, stop at the frozen right edge (mirrors the candle
+      // scan) so newer points don't inflate the visible Y range. Following
+      // live, keep the tail inclusive — feed timestamps can run slightly ahead
+      // of the local clock and must not flicker out of the range.
+      if (scrolledBack && points[i].time > state.timestamp) break;
       const v = points[i].value;
       if (v < tMin) {
         tMin = v;
@@ -279,9 +286,15 @@ export function tickLiveChartEngineFrame(
   state.extremaMinTime = hasMin ? minTime : NaN;
   state.extremaMaxTime = hasMax ? maxTime : NaN;
 
-  const cv = state.displayValue;
-  if (cv < tMin) tMin = cv;
-  if (cv > tMax) tMax = cv;
+  // Keep the animated live tip inside the range — but only while it's actually
+  // in the window. Scrolled back, the live value sits beyond the frozen right
+  // edge; folding it in would pin the Y range to the live price and stop the
+  // axis from adapting to the visible history.
+  if (!scrolledBack) {
+    const cv = state.displayValue;
+    if (cv < tMin) tMin = cv;
+    if (cv > tMax) tMax = cv;
+  }
 
   const ref = input.referenceValue;
   if (ref !== undefined) {

package/src/core/liveChartSeriesEngineTick.ts

@@ -215,6 +215,12 @@ export function tickLiveChartSeriesEngineFrame(
       else hi = mid;
     }
     for (let j = lo; j < points.length; j++) {
+      // While scrolled back, stop at the frozen right edge so newer points
+      // don't inflate the visible Y range (the per-series tips folded below
+      // already track the edge value, so they stay in-range). Following live,
+      // keep the tail inclusive — feed timestamps can run slightly ahead of
+      // the local clock and must not flicker out of the range.
+      if (scrolledBack && points[j].time > state.timestamp) break;
       const v = points[j].value;
       /* istanbul ignore next -- trivial min/max */
       if (v < tMin) tMin = v;

package/src/hooks/useChartSkiaFont.ts

@@ -3,14 +3,41 @@ import {
   Skia,
   useFont,
   type SkFont,
+  type SkFontMgr,
 } from "@shopify/react-native-skia";
 
 import { resolveFontConfig } from "../core/resolveConfig";
 import type { FontConfig } from "../types";
 
+/**
+ * System-font match cache. `matchFont` walks the platform font manager to
+ * resolve a typeface — a few ms per call — and every chart resolves several
+ * fonts per render, so a screen full of sparklines would otherwise re-match
+ * the same `{family, size, weight}` dozens of times. `SkFont` instances are
+ * immutable and safe to share across canvases. Custom `fontManager`s bypass
+ * the cache (their identity isn't part of the key).
+ */
+const systemFontCache = new Map<string, SkFont>();
+let systemFontMgr: SkFontMgr | null = null;
+
+function matchSystemFont(
+  fontFamily: string,
+  fontSize: number,
+  fontWeight: NonNullable<FontConfig["fontWeight"]>,
+): SkFont {
+  const key = `${fontFamily}|${fontSize}|${fontWeight}`;
+  const cached = systemFontCache.get(key);
+  if (cached) return cached;
+  systemFontMgr ??= Skia.FontMgr.System();
+  const font = matchFont({ fontFamily, fontSize, fontWeight }, systemFontMgr);
+  systemFontCache.set(key, font);
+  return font;
+}
+
 /**
  * Resolves Skia text for charts: optional bundled `typeface` via `useFont`, otherwise
- * `matchFont` with optional custom `fontManager`.
+ * `matchFont` with optional custom `fontManager`. System-font matches are cached
+ * module-wide, so many charts sharing a family/size/weight resolve it once.
  */
 export function useChartSkiaFont(
   fontProp: FontConfig | undefined,
@@ -22,10 +49,9 @@ export function useChartSkiaFont(
   const typefaceSource = fontProp?.typeface ?? null;
   const customFont = useFont(typefaceSource, fontSize);
 
-  const fallbackFont = matchFont(
-    { fontFamily, fontSize, fontWeight },
-    fontProp?.fontManager ?? Skia.FontMgr.System(),
-  );
+  const fallbackFont = fontProp?.fontManager
+    ? matchFont({ fontFamily, fontSize, fontWeight }, fontProp.fontManager)
+    : matchSystemFont(fontFamily, fontSize, fontWeight);
 
   if (typefaceSource != null) {
     return customFont ?? fallbackFont;

package/src/hooks/useCrosshair.ts

@@ -3,7 +3,6 @@ import { Platform } from "react-native";
 import { Gesture } from "react-native-gesture-handler";
 import {
   useAnimatedReaction,
-  useDerivedValue,
   useSharedValue,
   type SharedValue,
 } from "react-native-reanimated";
@@ -32,6 +31,7 @@ import {
   deriveCrosshairTooltipSingle,
   HIDDEN_ACTION_BADGE,
   HIDDEN_TIME_BADGE,
+  HIDDEN_TOOLTIP,
   pointInRect,
   snapPrice,
   type CrosshairState,
@@ -172,203 +172,216 @@ export function useCrosshair(
   const actionShowText = scrubAction?.text ?? true;
   const hasTimeBadge = scrubAction?.timeBadge ?? false;
 
-  const scrubTime = useDerivedValue(() =>
-    computeScrubTime(
-      scrubActive.get(),
-      scrubX.get(),
-      padding,
-      engine.canvasWidth.get(),
-      engine.timestamp.get(),
-      engine.displayWindow.get(),
-    ),
-  );
-
   const isCandleMode = candleOpts?.mode === "candle";
   const candlesSV = candleOpts?.candles;
   const liveCandleSV = candleOpts?.liveCandle;
   const candleWidthSecs = candleOpts?.candleWidthSecs ?? 60;
 
-  /* istanbul ignore next -- worklet */
-  const scrubCandle = useDerivedValue(() => {
-    if (
-      !isCandleMode ||
-      !candlesSV ||
-      !scrubActive.get() ||
-      scrubTime.get() < 0
-    )
-      return null;
-    return pickCandleAtTime(
-      candlesSV.get(),
-      liveCandleSV?.get() ?? null,
-      scrubTime.get(),
-      candleWidthSecs,
-    );
-  });
-
-  /* istanbul ignore next -- worklet */
-  const scrubValue = useDerivedValue(() => {
-    if (!scrubActive.get() || scrubTime.get() < 0) return null;
-    if (isCandleMode) {
-      return scrubCandle.get()?.close ?? null;
-    }
-    return interpolateAtTime(engine.data.get(), scrubTime.get());
-  });
-
-  const crosshairOpacity = useDerivedValue(() =>
-    computeCrosshairOpacity(
-      scrubActive.get(),
-      scrubX.get(),
-      engine.canvasWidth.get(),
-      padding.right,
-    ),
-  );
-
-  // Y pixel of the scrub intersection — used by the selection dot. -1 when
-  // there's no value to mark.
-  const scrubDotY = useDerivedValue(() =>
-    computeScrubDotY(
-      scrubValue.get(),
-      engine.displayMin.get(),
-      engine.displayMax.get(),
-      engine.canvasHeight.get(),
-      padding.top,
-      padding.bottom,
-    ),
-  );
-
   // Monospace advance width, measured once per render (not per scrub frame) so
   // the tooltip layout worklet can size text by character count instead of a
   // per-frame Skia measureText.
   const monoCharWidth = font.measureText("0").width;
-
-  const tooltipLayout = useDerivedValue(() => {
-    if (isCandleMode) {
-      return computeCandleTooltipLayout(
-        scrubActive.get(),
-        scrubX.get(),
-        scrubCandle.get(),
-        scrubTime.get(),
+  const scrubTime = useSharedValue(-1);
+  const scrubCandle = useSharedValue<CandlePoint | null>(null);
+  const scrubValue = useSharedValue<number | null>(null);
+  const crosshairOpacity = useSharedValue(0);
+  const scrubDotY = useSharedValue(-1);
+  const tooltipLayout = useSharedValue(HIDDEN_TOOLTIP);
+
+  // These six outputs traverse the same scrub + engine inputs. One reaction
+  // computes and publishes the snapshot atomically instead of compiling six
+  // independent derived-value mappers with chained dependencies.
+  useAnimatedReaction(
+    () => {
+      "worklet";
+      const active = scrubActive.get();
+      const x = scrubX.get();
+      const canvasWidth = engine.canvasWidth.get();
+      const canvasHeight = engine.canvasHeight.get();
+      const time = computeScrubTime(
+        active,
+        x,
         padding,
-        engine.canvasWidth.get(),
-        formatValue,
-        formatTime,
-        font,
-        monoCharWidth,
+        canvasWidth,
+        engine.timestamp.get(),
+        engine.displayWindow.get(),
       );
-    }
-    return deriveCrosshairTooltipSingle(
-      scrubActive.get(),
-      scrubX.get(),
-      scrubTime.get(),
-      scrubValue.get(),
-      padding,
-      engine.canvasWidth.get(),
-      formatValue,
-      formatTime,
-      font,
-      monoCharWidth,
-      tooltipPlacement,
-      tooltipShowValue,
-      tooltipShowTime,
-      engine.canvasHeight.get(),
-      tooltipMargin,
-      scrubDotY.get(),
-    );
-  });
+      const candle =
+        isCandleMode && candlesSV && active && time >= 0
+          ? pickCandleAtTime(
+              candlesSV.get(),
+              liveCandleSV?.get() ?? null,
+              time,
+              candleWidthSecs,
+            )
+          : null;
+      const value =
+        !active || time < 0
+          ? null
+          : isCandleMode
+            ? (candle?.close ?? null)
+            : interpolateAtTime(engine.data.get(), time);
+      const dotY = computeScrubDotY(
+        value,
+        engine.displayMin.get(),
+        engine.displayMax.get(),
+        canvasHeight,
+        padding.top,
+        padding.bottom,
+      );
+      const layout = isCandleMode
+        ? computeCandleTooltipLayout(
+            active,
+            x,
+            candle,
+            time,
+            padding,
+            canvasWidth,
+            formatValue,
+            formatTime,
+            font,
+            monoCharWidth,
+          )
+        : deriveCrosshairTooltipSingle(
+            active,
+            x,
+            time,
+            value,
+            padding,
+            canvasWidth,
+            formatValue,
+            formatTime,
+            font,
+            monoCharWidth,
+            tooltipPlacement,
+            tooltipShowValue,
+            tooltipShowTime,
+            canvasHeight,
+            tooltipMargin,
+            dotY,
+          );
+      return {
+        time,
+        candle,
+        value,
+        opacity: computeCrosshairOpacity(active, x, canvasWidth, padding.right),
+        dotY,
+        layout,
+      };
+    },
+    (snapshot) => {
+      "worklet";
+      scrubTime.set(snapshot.time);
+      scrubCandle.set(snapshot.candle);
+      scrubValue.set(snapshot.value);
+      crosshairOpacity.set(snapshot.opacity);
+      scrubDotY.set(snapshot.dotY);
+      tooltipLayout.set(snapshot.layout);
+    },
+  );
 
   // ── Scrub-action lock derivations ──────────────────────────────────────────
-  // Reported price = the frozen chosen price, optionally snapped. Independent of
-  // the display range (the point of freezing it), so the badge readout and the
-  // onScrubAction payload stay stable while the chart auto-rescales. Null until a
-  // reticle is placed.
-  /* istanbul ignore next -- worklet (locked branch only runs on the UI thread) */
-  const lockPrice = useDerivedValue(() => {
-    if (!lockActive.get()) return null;
-    const p = lockPriceValue.get();
-    return p === null ? null : snapPrice(p, snapIncrement);
-  });
-
-  // Screen Y of the locked level, DERIVED from the frozen price each frame so the
-  // line + badge track the chosen price as displayMin/Max move (rather than the
-  // price drifting under a pixel-fixed reticle). Pins to the plot edge when the
-  // price scrolls out of the visible range; -1 until placed / laid out.
+  const lockPrice = useSharedValue<number | null>(null);
+  const lockY = useSharedValue(-1);
+  const lockTime = useSharedValue(-1);
+  const lockCandle = useSharedValue<CandlePoint | null>(null);
+  const actionBadge = useSharedValue(HIDDEN_ACTION_BADGE);
+  const timeBadge = useSharedValue(HIDDEN_TIME_BADGE);
+
+  // The lock price, projected coordinates, candle and both badges are one
+  // coherent reticle snapshot. Publishing them from one reaction replaces six
+  // chained derived-value mappers and prevents intermediate mixed-frame state.
   /* istanbul ignore next -- worklet (locked branch only runs on the UI thread) */
-  const lockY = useDerivedValue(() => {
-    const p = lockPriceValue.get();
-    const ch = engine.canvasHeight.get();
-    if (p === null || ch - padding.top - padding.bottom <= 0) return -1;
-    const y = computeScrubDotY(
-      p,
-      engine.displayMin.get(),
-      engine.displayMax.get(),
-      ch,
-      padding.top,
-      padding.bottom,
-    );
-    return clampPlotY(y, padding.top, ch, padding.bottom);
-  });
-
-  const lockTime = useDerivedValue(() =>
-    computeScrubTime(
-      lockActive.get(),
-      lockX.get(),
-      padding,
-      engine.canvasWidth.get(),
-      engine.timestamp.get(),
-      engine.displayWindow.get(),
-    ),
+  useAnimatedReaction(
+    () => {
+      "worklet";
+      const active = lockActive.get();
+      const x = lockX.get();
+      const rawPrice = lockPriceValue.get();
+      const canvasWidth = engine.canvasWidth.get();
+      const canvasHeight = engine.canvasHeight.get();
+      const price =
+        active && rawPrice !== null
+          ? snapPrice(rawPrice, snapIncrement)
+          : null;
+      let y = -1;
+      if (
+        rawPrice !== null &&
+        canvasHeight - padding.top - padding.bottom > 0
+      ) {
+        y = clampPlotY(
+          computeScrubDotY(
+            rawPrice,
+            engine.displayMin.get(),
+            engine.displayMax.get(),
+            canvasHeight,
+            padding.top,
+            padding.bottom,
+          ),
+          padding.top,
+          canvasHeight,
+          padding.bottom,
+        );
+      }
+      const time = computeScrubTime(
+        active,
+        x,
+        padding,
+        canvasWidth,
+        engine.timestamp.get(),
+        engine.displayWindow.get(),
+      );
+      const candle =
+        isCandleMode && candlesSV && active && time >= 0
+          ? pickCandleAtTime(
+              candlesSV.get(),
+              liveCandleSV?.get() ?? null,
+              time,
+              candleWidthSecs,
+            )
+          : null;
+      const badge =
+        price === null
+          ? HIDDEN_ACTION_BADGE
+          : computeActionBadgeLayout(
+              active,
+              y,
+              actionShowText ? formatValue(price) : "",
+              actionIcon,
+              canvasWidth,
+              canvasWidth - padding.right,
+              font,
+              badgeMetrics.marginEdge,
+              badgeMetrics.padX,
+              badgeMetrics.padY,
+            );
+      const timeLayout =
+        !hasTimeBadge || !active || time < 0
+          ? HIDDEN_TIME_BADGE
+          : computeTimeBadgeLayout(
+              active,
+              x,
+              formatTime(time),
+              canvasWidth,
+              canvasHeight - padding.bottom + X_AXIS_LABEL_OFFSET_Y,
+              font,
+              badgeMetrics.padX,
+              badgeMetrics.padY,
+              badgeMetrics.marginEdge,
+            );
+      return { price, y, time, candle, badge, timeLayout };
+    },
+    (snapshot) => {
+      "worklet";
+      lockPrice.set(snapshot.price);
+      lockY.set(snapshot.y);
+      lockTime.set(snapshot.time);
+      lockCandle.set(snapshot.candle);
+      actionBadge.set(snapshot.badge);
+      timeBadge.set(snapshot.timeLayout);
+    },
   );
 
-  /* istanbul ignore next -- worklet */
-  const lockCandle = useDerivedValue(() => {
-    if (!isCandleMode || !candlesSV || !lockActive.get() || lockTime.get() < 0)
-      return null;
-    return pickCandleAtTime(
-      candlesSV.get(),
-      liveCandleSV?.get() ?? null,
-      lockTime.get(),
-      candleWidthSecs,
-    );
-  });
-
-  // Right-gutter action-badge layout — also the tap hit rect. Hidden when not locked.
-  /* istanbul ignore next -- worklet (locked branch only runs on the UI thread) */
-  const actionBadge = useDerivedValue(() => {
-    const price = lockPrice.get();
-    if (price === null) return HIDDEN_ACTION_BADGE;
-    return computeActionBadgeLayout(
-      lockActive.get(),
-      lockY.get(),
-      actionShowText ? formatValue(price) : "",
-      actionIcon,
-      engine.canvasWidth.get(),
-      engine.canvasWidth.get() - padding.right,
-      font,
-      badgeMetrics.marginEdge,
-      badgeMetrics.padX,
-      badgeMetrics.padY,
-    );
-  });
-
-  // X-axis time badge at the reticle (opt-in). Hidden unless enabled + locked.
-  /* istanbul ignore next -- worklet (locked branch only runs on the UI thread) */
-  const timeBadge = useDerivedValue(() => {
-    if (!hasTimeBadge || !lockActive.get()) return HIDDEN_TIME_BADGE;
-    const t = lockTime.get();
-    if (t < 0) return HIDDEN_TIME_BADGE;
-    return computeTimeBadgeLayout(
-      lockActive.get(),
-      lockX.get(),
-      formatTime(t),
-      engine.canvasWidth.get(),
-      engine.canvasHeight.get() - padding.bottom + X_AXIS_LABEL_OFFSET_Y,
-      font,
-      badgeMetrics.padX,
-      badgeMetrics.padY,
-      badgeMetrics.marginEdge,
-    );
-  });
-
   /* istanbul ignore next -- invoked only via scheduleOnRN from UI-thread gesture */
   function handleScrubAction(
     price: number,

package/src/hooks/useXAxis.ts

@@ -129,15 +129,28 @@ export function useXAxis(
       targetKeys.push(Math.round(t * 100));
     }
 
-    const alphas = labelAlphas.get();
+    // SharedValue payloads may be frozen after crossing the JS/UI boundary.
+    // Work on a fresh cache (including fresh entries) so adding/removing keys
+    // and updating alpha never mutates the serialized value returned by get().
+    const previousAlphas = labelAlphas.get();
+    const alphas: Record<number, { alpha: number; text: string }> = {};
+    const previousKeys = Object.keys(previousAlphas);
+    for (let i = 0; i < previousKeys.length; i++) {
+      const key = Number(previousKeys[i]);
+      const previous = previousAlphas[key];
+      alphas[key] = { alpha: previous.alpha, text: previous.text };
+    }
+    let cacheChanged = false;
 
     // Create labels for new keys only. A key encodes its time, so the formatted
-    // text never changes — re-formatting (and re-allocating the entry) every
-    // frame just churns strings/objects for the GC.
+    // text never changes — re-formatting every frame would churn strings for
+    // the GC. The cache itself is copied below to keep SharedValue payloads
+    // immutable after they cross the JS/UI boundary.
     for (let i = 0; i < targetKeys.length; i++) {
       const key = targetKeys[i];
       if (!alphas[key]) {
         alphas[key] = { alpha: 0, text: formatTime(key / 100) };
+        cacheChanged = true;
       }
     }
 
@@ -160,13 +173,16 @@ export function useXAxis(
 
       if (next < 0.01 && target === 0) {
         delete alphas[key];
+        cacheChanged = true;
       } else {
-        // Mutate in place — text is stable, so no need to reallocate the entry.
+        // The entry is already a private copy, so updating alpha cannot mutate
+        // the serialized cache held by the SharedValue.
+        if (label.alpha !== next) cacheChanged = true;
         label.alpha = next;
       }
     }
 
-    labelAlphas.set(alphas);
+    if (cacheChanged) labelAlphas.set(alphas);
 
     // Collect visible labels
     const raw: XAxisEntry[] = [];

package/src/types.ts

@@ -1979,9 +1979,14 @@ export interface LiveChartCoreProps {
   /** Crosshair scrubbing on hover/drag. `true` = defaults, `false` = disabled, or pass `ScrubConfig`. Default `true`. */
   scrub?: boolean | ScrubConfig;
   /**
-   * Selection dot drawn at the scrub intersection while scrubbing. `true`/omitted
-   * = built-in dot, `false` = hidden, or pass `SelectionDotConfig` (`size`,
-   * `color`, `ring`, or a custom `component`). Default `true`.
+   * Selection dot drawn at the scrub intersection while scrubbing. `true` =
+   * built-in dot, `false` = hidden, or pass `SelectionDotConfig` (`size`,
+   * `color`, `ring`, or a custom `component`).
+   *
+   * Defaults differ per chart: `LiveChart` shows it (`true`); `LiveChartSeries`
+   * hides it (`false`) — with multiple lines the dot can only track the leading
+   * series, so the crosshair + per-series tooltips mark the scrub point instead.
+   * Pass `true` / a config to opt a multi-series chart in.
    */
   selectionDot?: boolean | SelectionDotConfig;
   /** Called once when the user starts scrubbing/panning the chart. */