react-native-livechart 4.9.2 → 4.11.0

package/src/hooks/delayedPanGuard.ts

@@ -0,0 +1,80 @@
+import type { SharedValue } from "react-native-reanimated";
+
+type BooleanSharedValue = Pick<SharedValue<boolean>, "get" | "set">;
+
+type TouchCountEvent = {
+  numberOfTouches: number;
+};
+
+type GestureStateManager = {
+  fail: () => void;
+};
+
+/** Mark the first pointer of a delayed pan as down. Zero-delay pans are inert. */
+export function delayedPanTouchDown(
+  delayMs: number,
+  fingerDown: BooleanSharedValue,
+): void {
+  "worklet";
+  if (delayMs > 0) fingerDown.set(true);
+}
+
+/**
+ * Fail a delayed pan that is still pending when its final pointer lifts.
+ *
+ * RNGH 2.x on iOS can leave `activateAfterLongPress`'s timer armed after a
+ * stationary touch ends. Failing the pending recognizer forces the reset that
+ * cancels that timer. An already-active pan is left to finish normally.
+ */
+export function delayedPanTouchUp(
+  delayMs: number,
+  event: TouchCountEvent,
+  manager: GestureStateManager,
+  fingerDown: BooleanSharedValue,
+  panActivated: BooleanSharedValue,
+): void {
+  "worklet";
+  if (delayMs <= 0 || event.numberOfTouches > 0) return;
+  fingerDown.set(false);
+  if (!panActivated.get()) manager.fail();
+}
+
+/** Clear pointer state when the native touch stream is cancelled. */
+export function delayedPanTouchCancelled(
+  delayMs: number,
+  fingerDown: BooleanSharedValue,
+): void {
+  "worklet";
+  if (delayMs > 0) fingerDown.set(false);
+}
+
+/**
+ * Record a real delayed-pan activation, or reject an activation whose timer
+ * raced the final pointer-up. The rejected path deliberately keeps
+ * `panActivated` false so a missing native FINALIZE cannot poison the next
+ * interaction.
+ */
+export function shouldStartDelayedPan(
+  delayMs: number,
+  fingerDown: BooleanSharedValue,
+  panActivated: BooleanSharedValue,
+): boolean {
+  "worklet";
+  if (delayMs <= 0) return true;
+  if (!fingerDown.get()) {
+    panActivated.set(false);
+    return false;
+  }
+  panActivated.set(true);
+  return true;
+}
+
+/** Reset the delayed-pan lifecycle after native finalization. */
+export function resetDelayedPanGuard(
+  fingerDown: BooleanSharedValue,
+  panActivated: BooleanSharedValue,
+): void {
+  "worklet";
+  fingerDown.set(false);
+  panActivated.set(false);
+}

package/src/hooks/useChartPaths.ts

@@ -55,6 +55,10 @@ export function useChartPaths(
     ptsA: number[];
     ptsB: number[];
     ptsTick: boolean;
+    squigglePts: number[];
+    morphA: number[];
+    morphB: number[];
+    morphTick: boolean;
     scratch: ReturnType<typeof makeSplineScratch>;
   } | null>(null);
   if (cacheRef.current === null) {
@@ -63,6 +67,10 @@ export function useChartPaths(
       ptsA: [] as number[],
       ptsB: [] as number[],
       ptsTick: false,
+      squigglePts: [] as number[],
+      morphA: [] as number[],
+      morphB: [] as number[],
+      morphTick: false,
       scratch: makeSplineScratch(),
     };
   }
@@ -102,15 +110,18 @@ export function useChartPaths(
       centerY,
       squiggleAmplitude,
       squiggleSpeed,
+      cache.squigglePts,
     );
 
     // Blend center-out: centre of chart reveals first, edges last
+    cache.morphTick = !cache.morphTick;
     return blendPtsY(
       squigglyPts,
       realPts,
       t,
       padding,
       engine.canvasWidth.get(),
+      cache.morphTick ? cache.morphA : cache.morphB,
     );
   });
 

package/src/hooks/useCrosshair.ts

@@ -1,5 +1,4 @@
 import { type SkFont } from "@shopify/react-native-skia";
-import { Platform } from "react-native";
 import { Gesture } from "react-native-gesture-handler";
 import {
   useAnimatedReaction,
@@ -33,9 +32,18 @@ import {
   HIDDEN_TIME_BADGE,
   HIDDEN_TOOLTIP,
   pointInRect,
+  SCRUB_ACTIVATE_X_PX,
+  SCRUB_FAIL_Y_PX,
   snapPrice,
   type CrosshairState,
 } from "./crosshairShared";
+import {
+  delayedPanTouchCancelled,
+  delayedPanTouchDown,
+  delayedPanTouchUp,
+  resetDelayedPanGuard,
+  shouldStartDelayedPan,
+} from "./delayedPanGuard";
 
 const ACTION_HIT_SLOP = 6;
 const RETICLE_HIT = 14;
@@ -150,6 +158,10 @@ export function useCrosshair(
   // Tracks whether the active scrub phase actually began, so a tap that never
   // activates doesn't emit a spurious onGestureEnd.
   const gestureStarted = useSharedValue(false);
+  // Guard state for RNGH's delayed-pan post-lift activation on iOS. The shared
+  // lifecycle helpers are also used by LiveChartSeries and unit-tested directly.
+  const fingerDown = useSharedValue(false);
+  const panActivated = useSharedValue(false);
   // Where the crosshair line should start (canvas Y) so it stops at a top-pinned
   // custom tooltip instead of running through it. -1 = no top tooltip → the line
   // starts at padding.top. Written by CustomTooltipOverlay, read by CrosshairOverlay.
@@ -490,14 +502,32 @@ export function useCrosshair(
       : panGestureDelay;
 
   let gesture = Gesture.Pan()
-    // Scrub-action: minDistance 0 — the press-hold above is the sole activator
-    // (movement during the hold fails the pan), so the crosshair never appears
-    // from a tap's travel. The Tap (maxDistance SCRUB_ACTION_TAP_SLOP) owns quick
-    // gestures; only a held press becomes a scrub/adjust drag.
-    .minDistance(!hasScrubAction && Platform.OS === "android" ? 10 : 0)
-    .activateAfterLongPress(longPressMs)
     .maxPointers(1)
     .shouldCancelWhenOutside(false)
+    .onTouchesDown(
+      /* istanbul ignore next */ () => {
+        "worklet";
+        delayedPanTouchDown(longPressMs, fingerDown);
+      },
+    )
+    .onTouchesUp(
+      /* istanbul ignore next */ (e, manager) => {
+        "worklet";
+        delayedPanTouchUp(
+          longPressMs,
+          e,
+          manager,
+          fingerDown,
+          panActivated,
+        );
+      },
+    )
+    .onTouchesCancelled(
+      /* istanbul ignore next */ () => {
+        "worklet";
+        delayedPanTouchCancelled(longPressMs, fingerDown);
+      },
+    )
     // Start scrubbing on ACTIVE (onStart), not on touch-down (onBegin):
     // `activateAfterLongPress` only delays activation, so onBegin still fires
     // immediately — using it would scrub instantly and ignore panGestureDelay,
@@ -505,6 +535,7 @@ export function useCrosshair(
     .onStart(
       /* istanbul ignore next */ (e) => {
         "worklet";
+        if (!shouldStartDelayedPan(longPressMs, fingerDown, panActivated)) return;
         if (!enabled) return;
         // Scrub-action: once a reticle is placed, drag adjusts it (2D — the Y is
         // the price). The ephemeral live-scrub never engages, so scrubActive
@@ -569,6 +600,7 @@ export function useCrosshair(
     .onFinalize(
       /* istanbul ignore next */ () => {
         "worklet";
+        resetDelayedPanGuard(fingerDown, panActivated);
         // A lock-adjust drag leaves the reticle in place (scrubActive was never
         // set); a live-scrub clears its crosshair. Always clear scrubActive so a
         // stray scrub can never linger behind a placed reticle.
@@ -583,11 +615,22 @@ export function useCrosshair(
       },
     );
 
-  /* istanbul ignore next -- Android-only gesture axis config */
-  if (Platform.OS === "android" && !hasScrubAction) {
+  // Passing zero-valued activation modifiers lets RNGH's iOS pan recognizer
+  // activate before the axis constraints classify the drag. Only configure a
+  // hold when one is requested, and reserve minDistance(0) for scrub-action's
+  // deliberate press-hold interaction.
+  if (longPressMs > 0) {
+    gesture = gesture.activateAfterLongPress(longPressMs);
+  }
+
+  if (hasScrubAction) {
+    gesture = gesture.minDistance(0);
+  } else {
     // Lock mode needs free vertical drag (Y = price), so the failOffsetY clamp —
     // which would kill a vertical adjust — is applied only outside scrub-action.
-    gesture = gesture.activeOffsetX([-25, 25]).failOffsetY([-25, 25]);
+    gesture = gesture
+      .activeOffsetX([-SCRUB_ACTIVATE_X_PX, SCRUB_ACTIVATE_X_PX])
+      .failOffsetY([-SCRUB_FAIL_Y_PX, SCRUB_FAIL_Y_PX]);
   }
 
   // Axis-drag time-scroll: carve the bottom "time ruler" band out of the scrub's

package/src/hooks/useCrosshairSeries.ts

@@ -1,4 +1,3 @@
-import { Platform } from "react-native";
 import { Gesture } from "react-native-gesture-handler";
 import {
   useAnimatedReaction,
@@ -18,8 +17,17 @@ import {
   computeScrubDotY,
   computeScrubTime,
   HIDDEN_TOOLTIP,
+  SCRUB_ACTIVATE_X_PX,
+  SCRUB_FAIL_Y_PX,
   type CrosshairState,
 } from "./crosshairShared";
+import {
+  delayedPanTouchCancelled,
+  delayedPanTouchDown,
+  delayedPanTouchUp,
+  resetDelayedPanGuard,
+  shouldStartDelayedPan,
+} from "./delayedPanGuard";
 
 /**
  * LiveChartSeries crosshair + scrub. No tooltip — data is delivered via
@@ -40,6 +48,10 @@ export function useCrosshairSeries(
   // Tracks whether the active scrub phase actually began, so a tap that never
   // activates doesn't emit a spurious onGestureEnd.
   const gestureStarted = useSharedValue(false);
+  // Mirrors LiveChart's guard against RNGH's delayed-pan timer activating after
+  // the final pointer has already lifted on iOS.
+  const fingerDown = useSharedValue(false);
+  const panActivated = useSharedValue(false);
 
   const scrubTime = useDerivedValue(() =>
     computeScrubTime(
@@ -154,10 +166,32 @@ export function useCrosshairSeries(
   );
 
   let gesture = Gesture.Pan()
-    .minDistance(Platform.OS === "android" ? 10 : 0)
-    .activateAfterLongPress(panGestureDelay)
     .maxPointers(1)
     .shouldCancelWhenOutside(false)
+    .onTouchesDown(
+      /* istanbul ignore next */ () => {
+        "worklet";
+        delayedPanTouchDown(panGestureDelay, fingerDown);
+      },
+    )
+    .onTouchesUp(
+      /* istanbul ignore next */ (e, manager) => {
+        "worklet";
+        delayedPanTouchUp(
+          panGestureDelay,
+          e,
+          manager,
+          fingerDown,
+          panActivated,
+        );
+      },
+    )
+    .onTouchesCancelled(
+      /* istanbul ignore next */ () => {
+        "worklet";
+        delayedPanTouchCancelled(panGestureDelay, fingerDown);
+      },
+    )
     // Start scrubbing on ACTIVE (onStart), not on touch-down (onBegin):
     // `activateAfterLongPress` only delays activation, so onBegin still fires
     // immediately — using it would scrub instantly and ignore panGestureDelay,
@@ -165,6 +199,8 @@ export function useCrosshairSeries(
     .onStart(
       /* istanbul ignore next */ (e) => {
         "worklet";
+        if (!shouldStartDelayedPan(panGestureDelay, fingerDown, panActivated))
+          return;
         if (!enabled) return;
         scrubX.set(e.x);
         scrubActive.set(true);
@@ -182,6 +218,7 @@ export function useCrosshairSeries(
     .onFinalize(
       /* istanbul ignore next */ () => {
         "worklet";
+        resetDelayedPanGuard(fingerDown, panActivated);
         scrubActive.set(false);
         if (gestureStarted.get()) {
           gestureStarted.set(false);
@@ -190,11 +227,17 @@ export function useCrosshairSeries(
       },
     );
 
-  /* istanbul ignore next */
-  if (Platform.OS === "android") {
-    gesture = gesture.activeOffsetX([-25, 25]).failOffsetY([-25, 25]);
+  // Omit zero-valued activation modifiers so RNGH can classify direction before
+  // the pan activates on iOS. A vertical drag then remains available to a parent
+  // ScrollView/list, while a clear horizontal drag starts scrubbing.
+  if (panGestureDelay > 0) {
+    gesture = gesture.activateAfterLongPress(panGestureDelay);
   }
 
+  gesture = gesture
+    .activeOffsetX([-SCRUB_ACTIVATE_X_PX, SCRUB_ACTIVATE_X_PX])
+    .failOffsetY([-SCRUB_FAIL_Y_PX, SCRUB_FAIL_Y_PX]);
+
   return {
     scrubX,
     scrubActive,

package/src/hooks/useMultiSeriesLinePaths.ts

@@ -8,30 +8,37 @@ import { drawSpline, makeSplineScratch } from "../math/spline";
 import { usePathBuilders } from "./usePathBuilder";
 
 /**
- * One derived shared value holding up to `MAX_MULTI_SERIES` Skia paths (unused
- * slots reuse one cached empty path).
+ * One derived shared value holding only the active series' Skia paths, capped at
+ * `MAX_MULTI_SERIES`.
  *
  * Each visible series' path is built into a per-slot `Skia.PathBuilder` (reused
  * across frames via a SharedValue) and finalized with `detach()` — a fresh
  * immutable `SkPath` per frame, so `MultiSeriesStroke`'s per-slot
  * `useDerivedValue(() => paths.value[index])` repaints without the two-SkPath
- * ping-pong. Only visible series allocate a path.
+ * ping-pong. Only active series allocate and publish a path.
  */
 export function useMultiSeriesLinePaths(
   engine: MultiEngineState,
   padding: ChartPadding,
+  activeSeriesCount = MAX_MULTI_SERIES,
 ): SharedValue<SkPath[]> {
   const builders = usePathBuilders(MAX_MULTI_SERIES);
 
   const poolRef = useRef<{
     empty: SkPath;
     ptsBuf: number[];
+    pathsA: SkPath[];
+    pathsB: SkPath[];
+    pathsTick: boolean;
     scratch: ReturnType<typeof makeSplineScratch>;
   } | null>(null);
   if (poolRef.current === null) {
     poolRef.current = {
       empty: Skia.Path.Make(),
       ptsBuf: [] as number[],
+      pathsA: [] as SkPath[],
+      pathsB: [] as SkPath[],
+      pathsTick: false,
       scratch: makeSplineScratch(),
     };
   }
@@ -41,12 +48,11 @@ export function useMultiSeriesLinePaths(
     const slots = builders.value;
     const s = engine.series.get();
     const displays = engine.displaySeriesValues.get();
-    const out: SkPath[] = [];
-    for (let i = 0; i < MAX_MULTI_SERIES; i++) {
-      if (i >= s.length) {
-        out.push(pool.empty);
-        continue;
-      }
+    pool.pathsTick = !pool.pathsTick;
+    const out = pool.pathsTick ? pool.pathsA : pool.pathsB;
+    out.length = 0;
+    const count = Math.min(activeSeriesCount, s.length, MAX_MULTI_SERIES);
+    for (let i = 0; i < count; i++) {
       const pts = buildLinePoints(
         s[i].data,
         displays[i] ?? s[i].value,

package/src/index.ts

@@ -40,6 +40,7 @@ export type {
   BadgeVariant,
   CandleMetrics,
   CandlePoint,
+  CanvasMode,
   ChartInsets,
   ChartOverlayContext,
   ChartPlotRect,

package/src/math/squiggly.ts

@@ -31,6 +31,7 @@ export function squigglyYAt(
  * Build a flat [x0,y0,x1,y1,...] point array for a standalone squiggly line
  * spanning the full chart area (used in loading / empty state).
  * Points are spaced ~4px apart for smooth curves.
+ * Pass `out` to reuse a caller-owned frame scratch.
  */
 export function buildSquigglyPts(
   canvasWidth: number,
@@ -39,17 +40,22 @@ export function buildSquigglyPts(
   t: number,
   base = 14,
   speed = 1,
+  out?: number[],
 ): number[] {
   "worklet";
+  const pts = out ?? [];
   const leftEdge = padding.left;
   const rightEdge = canvasWidth - padding.right;
   const chartW = rightEdge - leftEdge;
-  if (chartW <= 0 || canvasHeight <= 0) return [];
+  if (chartW <= 0 || canvasHeight <= 0) {
+    pts.length = 0;
+    return pts;
+  }
 
   const centerY = (canvasHeight - padding.bottom + padding.top) / 2;
   const step = 4;
   const count = Math.ceil(chartW / step) + 1;
-  const pts: number[] = new Array(count * 2);
+  pts.length = count * 2;
   for (let i = 0; i < count; i++) {
     const x = leftEdge + Math.min(i * step, chartW);
     pts[i * 2] = x;
@@ -61,6 +67,7 @@ export function buildSquigglyPts(
 /**
  * Given a real flat-pts array (from buildLinePoints), replace each Y with the
  * squiggly Y at the same X. Used during the morph reveal.
+ * Pass `out` to reuse a caller-owned frame scratch.
  */
 export function squigglifyPts(
   flatPts: number[],
@@ -68,15 +75,17 @@ export function squigglifyPts(
   centerY: number,
   base = 14,
   speed = 1,
+  out?: number[],
 ): number[] {
   "worklet";
   const n = flatPts.length;
-  const out: number[] = new Array(n);
+  const target = out ?? [];
+  target.length = n;
   for (let i = 0; i < n; i += 2) {
-    out[i] = flatPts[i];
-    out[i + 1] = squigglyYAt(flatPts[i], centerY, t, base, speed);
+    target[i] = flatPts[i];
+    target[i + 1] = squigglyYAt(flatPts[i], centerY, t, base, speed);
   }
-  return out;
+  return target;
 }
 
 /**
@@ -97,6 +106,7 @@ export function smoothstep(t: number): number {
  *   distFromCentre = |x - chartCentreX| / (chartW / 2)   // 0=centre, 1=edge
  *   weight = smoothstep((morphT - distFromCentre * 0.5) / 0.5)
  *   blendedY = fromY + (toY - fromY) * weight
+ * Pass `out` to reuse a caller-owned frame scratch.
  */
 export function blendPtsY(
   from: number[],
@@ -104,19 +114,26 @@ export function blendPtsY(
   morphT: number,
   padding: ChartPadding,
   canvasWidth: number,
+  out?: number[],
 ): number[] {
   "worklet";
   const n = from.length;
-  if (n === 0) return to;
+  if (n === 0 && !out) return to;
   const chartCentreX = (padding.left + canvasWidth - padding.right) / 2;
   const halfChartW = (canvasWidth - padding.left - padding.right) / 2;
-  const out: number[] = new Array(n);
+  const target = out ?? [];
+  const outputLength = n === 0 ? to.length : n;
+  target.length = outputLength;
+  if (n === 0) {
+    for (let i = 0; i < to.length; i++) target[i] = to[i];
+    return target;
+  }
   for (let i = 0; i < n; i += 2) {
-    out[i] = to[i]; // X always from real pts
+    target[i] = to[i]; // X always from real pts
     const distFromCentre =
       halfChartW > 0 ? Math.abs(from[i] - chartCentreX) / halfChartW : 0;
     const weight = smoothstep((morphT - distFromCentre * 0.5) / 0.5);
-    out[i + 1] = from[i + 1] + (to[i + 1] - from[i + 1]) * weight;
+    target[i + 1] = from[i + 1] + (to[i + 1] - from[i + 1]) * weight;
   }
-  return out;
+  return target;
 }

package/src/math/threshold.ts

@@ -12,8 +12,8 @@ import type { LiveChartPoint } from "../types";
  * projected to this many evenly-spaced pixel-Y values across the plot, which the
  * shader linearly interpolates between. ~one sample per 6px on a phone plot —
  * fine enough that the line's crossing point is coloured accurately. The shader
- * walks these in an unrolled loop (`THRESHOLD_SAMPLE_COUNT - 1` iterations), so
- * keep it modest to stay within SkSL's unroll limits.
+ * selects between them through a balanced constant-index branch tree, so 64
+ * samples require at most six comparisons per covered fragment.
  */
 export const THRESHOLD_SAMPLE_COUNT = 64;
 

package/src/types.ts

@@ -44,6 +44,10 @@ export type FontWeight =
 /** Color scheme for the chart background, grid, and derived palette colors. */
 export type ThemeMode = "light" | "dark";
 
+/** Skia canvas composition mode. Android uses TextureView for `"transparent"`
+ * and an opaque SurfaceView for `"opaque"`. */
+export type CanvasMode = "transparent" | "opaque";
+
 /**
  * Badge pill style.
  * - `"default"` — accent-colored background with white text.
@@ -249,8 +253,9 @@ export interface ReferenceLineBadgeConfig extends BadgeStyleConfig {
 }
 
 /**
- * Context passed to a custom {@link LiveChartProps.renderReferenceLine}. The chart
- * floats the element you return over the canvas and pins it to the line's value on
+ * Context passed to a custom {@link LiveChartProps.renderReferenceLine} or
+ * {@link LiveChartSeriesProps.renderReferenceLine}. The chart floats the element
+ * you return over the canvas and pins it to the line's value on
  * the UI thread (vertically centered on the line, horizontally at the badge /
  * label position) — so it tracks the rescaling axis and any drag smoothly without
  * JS re-renders, just like {@link TooltipRenderProps}. Replaces the built-in pill
@@ -1122,7 +1127,8 @@ export interface TradeEvent {
 }
 
 /** Built-in marker glyph kinds drawn into the chart canvas. */
-export type MarkerKind = "trade" | "boost" | "graduation" | "winner" | "clawback";
+export type MarkerKind =
+  "trade" | "boost" | "graduation" | "winner" | "clawback";
 
 /**
  * A marker rendered into the chart at `(time, y)`. Exactly one of `seriesId`
@@ -1236,10 +1242,15 @@ export interface MarkerClusterConfig {
  * A dedicated badge drawn for a collapsed marker cluster — your own Skia design,
  * independent of the member markers. Pass it as
  * {@link MarkerClusterConfig.groupBadge}. Glyph precedence mirrors a single marker:
- * `image` → `icon` (`pill`) → a filled dot. Requires `image` or `icon` (otherwise
- * the group falls back to the count badge).
+ * `image` → `icon` (`pill`) → the built-in count badge. An object containing only
+ * {@link letterSpacing} customizes that built-in count badge.
  */
 export interface MarkerGroupBadge {
+  /**
+   * Extra spacing in px between digits in the built-in count badge. Also applies
+   * to the optional corner count on a custom group badge. Default `0`.
+   */
+  letterSpacing?: number;
   /** Custom Skia image for the collapsed group (e.g. from `useImage`). Takes
    *  precedence over {@link icon}. */
   image?: SkImage;
@@ -1743,6 +1754,18 @@ export interface LiveChartCoreProps {
   insets?: ChartInsets;
   /** Container View style. */
   style?: ViewStyle;
+  /**
+   * Canvas composition mode. `"transparent"` keeps Skia's default compositing
+   * path (TextureView on Android) and can reveal content behind the chart.
+   * `"opaque"` makes the canvas own and paint its palette background; on Android
+   * this selects SurfaceView and may reduce RenderThread work, but it cannot be
+   * used when the chart must reveal content behind it. Default `"transparent"`.
+   *
+   * @experimental Profile on representative physical Android hardware before
+   * enabling broadly; SurfaceView ordering, clipping, transforms, screenshots,
+   * and parent scrolling should be validated in the consuming layout.
+   */
+  canvasMode?: CanvasMode;
   /** Visible time window in seconds. Default `30`. */
   timeWindow?: number;
   /** Freeze chart scrolling. Resume catches up to real time. Default `false`. */
@@ -2172,6 +2195,18 @@ export interface LiveChartProps extends LiveChartCoreProps {
 export interface LiveChartSeriesProps extends LiveChartCoreProps {
   /** Array of series definitions. Must be a SharedValue for UI-thread reads. */
   series: SharedValue<SeriesConfig[]>;
+  /**
+   * Render a Form-A reference line's tag as a custom **React Native** element
+   * instead of the built-in Skia pill / gutter label. The chart pins the returned
+   * element to the line's live Y position on the UI thread (see
+   * {@link ReferenceLineRenderProps}), including off-axis edge pinning. Return
+   * `null`/`undefined` to keep that line's built-in tag. The line stroke always
+   * remains visible, and `badge.position` / `labelPosition` controls the custom
+   * tag's left, center, or right anchor.
+   */
+  renderReferenceLine?: (
+    ctx: ReferenceLineRenderProps,
+  ) => ReactElement | null | undefined;
   /** Called when a series toggle chip is tapped. */
   onSeriesToggle?: (id: string, visible: boolean) => void;
   /**