react-native-livechart 4.21.0 → 4.22.0

package/src/components/thresholdSplitShaderSource.ts

@@ -37,6 +37,9 @@ export function buildThresholdSplitShaderSource(sampleCount: number): string {
 // and glides with the window so features move fluidly, frame to frame.
 uniform float sampleLeft;
 uniform float sampleRight;
+// X where the threshold starts (extendToStart: false → the first point's
+// pixel-X, else a large negative sentinel). Fragments left of it use restColor.
+uniform float clipLeft;
 // X where the threshold ends (extendToNow: false → the last point's pixel-X,
 // else a huge sentinel). Fragments right of it paint restColor: the plain line
 // color for the stroke, transparent for the band.
@@ -51,7 +54,7 @@ ${lookup}
 }
 
 half4 main(vec2 xy) {
-  if (xy.x > clipRight) {
+  if (xy.x < clipLeft || xy.x > clipRight) {
     return half4(half3(restColor.rgb) * restColor.a, restColor.a);
   }
   float span = sampleRight - sampleLeft;

package/src/core/chartDataPresence.ts

@@ -0,0 +1,24 @@
+import type { CandlePoint, LiveChartPoint, SeriesConfig } from "../types";
+
+/** A single historical line sample is enough to anchor the live tip. */
+export function hasLineChartData(points: LiveChartPoint[]): boolean {
+  "worklet";
+  return points.length > 0;
+}
+
+/** A single committed OHLC bucket is drawable as a candle. */
+export function hasCandleChartData(
+  candles: CandlePoint[] | undefined,
+): boolean {
+  "worklet";
+  return (candles?.length ?? 0) > 0;
+}
+
+/** Multi-series charts are non-empty when any series has one sample. */
+export function hasMultiSeriesChartData(series: SeriesConfig[]): boolean {
+  "worklet";
+  for (let i = 0; i < series.length; i++) {
+    if (series[i].data.length > 0) return true;
+  }
+  return false;
+}

package/src/core/liveChartEngineTick.ts

@@ -61,6 +61,9 @@ export interface EngineTickInput {
    * but windowed each tick.
    */
   thresholdRangePoints?: LiveChartPoint[];
+  /** Whether {@link thresholdRangePoints} extends flat before its first point to
+   *  the visible window start (`threshold.extendToStart`). Default `true`. */
+  thresholdRangeExtendToStart?: boolean;
   /** Whether {@link thresholdRangePoints} extends flat past its last point to
    *  "now" (`threshold.extendToNow`). Default `true`. */
   thresholdRangeExtendToNow?: boolean;
@@ -367,6 +370,7 @@ export function tickLiveChartEngineFrame(
       thrPts,
       state.timestamp,
       state.displayWindow,
+      input.thresholdRangeExtendToStart ?? true,
       input.thresholdRangeExtendToNow ?? true,
       THRESHOLD_RANGE_SCRATCH,
     );

package/src/core/resolveConfig.ts

@@ -447,6 +447,8 @@ export interface ResolvedThresholdConfig {
   fillOpacity: number;
   /** Fold the threshold into the Y-axis range fit. */
   includeInRange: boolean;
+  /** Series forms: extend flat before the first point to the visible window's start. */
+  extendToStart: boolean;
   /** Series forms: extend flat past the last point to "now". */
   extendToNow: boolean;
   line: ResolvedThresholdLineConfig | null;
@@ -495,6 +497,7 @@ export function resolveThreshold(
       (typeof prop.fill === "object" ? prop.fill.opacity : undefined) ??
       THRESHOLD_FILL_OPACITY_DEFAULT,
     includeInRange: prop.includeInRange ?? false,
+    extendToStart: prop.extendToStart ?? true,
     extendToNow: prop.extendToNow ?? true,
     line: resolveThresholdLine(prop.line),
   };

package/src/core/useLiveChartEngine.ts

@@ -54,6 +54,9 @@ export interface EngineConfig {
    * `LiveChartPoint[]` form.
    */
   thresholdRangePoints?: SharedValue<LiveChartPoint[]> | LiveChartPoint[];
+  /** With {@link thresholdRangePoints}: whether the series extends flat before
+   *  its first point to the visible window start. Default `true`. */
+  thresholdRangeExtendToStart?: boolean;
   /** With {@link thresholdRangePoints}: whether the series extends flat past its
    *  last point to "now" (`threshold.extendToNow`). Default `true`. */
   thresholdRangeExtendToNow?: boolean;
@@ -217,6 +220,7 @@ export interface EngineFrameRefs {
   referenceValues?: SharedValue<number[] | undefined>;
   /** Series threshold folded into the range fit (`threshold.includeInRange`). */
   thresholdRangePoints?: SharedValue<LiveChartPoint[] | undefined>;
+  thresholdRangeExtendToStart?: SharedValue<boolean>;
   thresholdRangeExtendToNow?: SharedValue<boolean>;
   nonNegativeSV?: SharedValue<boolean>;
   maxValueSV?: SharedValue<number | undefined>;
@@ -353,6 +357,8 @@ export function applyLiveChartEngineFrame(
   input.referenceValue = sv.referenceValue.value;
   input.referenceValues = sv.referenceValues?.value;
   input.thresholdRangePoints = sv.thresholdRangePoints?.value;
+  input.thresholdRangeExtendToStart =
+    sv.thresholdRangeExtendToStart?.value ?? true;
   input.thresholdRangeExtendToNow = sv.thresholdRangeExtendToNow?.value ?? true;
   input.nonNegative = sv.nonNegativeSV?.value ?? false;
   input.maxValue = sv.maxValueSV?.value;
@@ -453,6 +459,9 @@ export function useLiveChartEngine(
   const thresholdRangeExtendToNow = useDerivedValue(
     () => config.thresholdRangeExtendToNow ?? true,
   );
+  const thresholdRangeExtendToStart = useDerivedValue(
+    () => config.thresholdRangeExtendToStart ?? true,
+  );
   const nonNegativeSV = useDerivedValue(() => config.nonNegative ?? false);
   const maxValueSV = useDerivedValue(() => config.maxValue);
   const nowOverrideSV = useDerivedValue(() => config.nowOverride);
@@ -559,6 +568,7 @@ export function useLiveChartEngine(
     referenceValue,
     referenceValues,
     thresholdRangePoints,
+    thresholdRangeExtendToStart,
     thresholdRangeExtendToNow,
     nonNegativeSV,
     maxValueSV,
@@ -586,9 +596,12 @@ export function useLiveChartEngine(
     extremaMinTime,
     extremaMaxTime,
   };
-  const [frameScratchRef] = useState(() => ({
-    current: makeEngineFrameScratch(),
-  }));
+  const frameScratchRef = useRef<EngineFrameScratch | null>(null);
+  if (frameScratchRef.current === null) {
+    // React permits this predictable lazy-ref initialization: https://react.dev/reference/react/useRef#avoiding-recreating-the-ref-contents
+    // react-doctor-disable-next-line react-doctor/no-ref-current-in-render -- false positive for React's documented lazy-ref exception
+    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).

package/src/core/useLiveChartSeriesEngine.ts

@@ -356,6 +356,8 @@ export function useLiveChartSeriesEngine(
   // Reused per-frame output buffers (ping-ponged) — see applyLiveChartSeriesEngineFrame.
   const scratchRef = useRef<MultiSeriesEngineScratch | null>(null);
   if (scratchRef.current === null) {
+    // React permits this predictable lazy-ref initialization: https://react.dev/reference/react/useRef#avoiding-recreating-the-ref-contents
+    // react-doctor-disable-next-line react-doctor/no-ref-current-in-render -- false positive for React's documented lazy-ref exception
     scratchRef.current = makeMultiSeriesEngineScratch();
   }
 

package/src/draw/markerAtlas.ts

@@ -17,6 +17,11 @@ import type {
   MarkerKind,
 } from "../types";
 
+export type MarkerAtlasPalette = Pick<
+  LiveChartPalette,
+  "bgRgb" | "line" | "refLine" | "dotUp" | "refLabel"
+>;
+
 /** Default icon box (px) when `marker.size` is unset. */
 export const DEFAULT_ICON_SIZE = 16;
 /** Circular badge padding around the icon glyph + background ring width. */
@@ -78,7 +83,7 @@ export function groupCountTextWidth(
  *  per-frame overlay worklet can resolve a collapsed cluster's badge color. */
 export function defaultMarkerColor(
   kind: MarkerKind,
-  palette: LiveChartPalette,
+  palette: MarkerAtlasPalette,
 ): string {
   "worklet";
   switch (kind) {
@@ -188,7 +193,7 @@ interface CellSpec {
  * Geometry + draw routine for one marker appearance. Mirrors the per-glyph
  * rendering the old `MarkerGlyph` did inline, so the atlas is pixel-equivalent.
  */
-function cellSpec(m: Marker, palette: LiveChartPalette, font: SkFont): CellSpec {
+function cellSpec(m: Marker, palette: MarkerAtlasPalette, font: SkFont): CellSpec {
   const color = m.color ?? defaultMarkerColor(m.kind, palette);
   const m2 = CELL_MARGIN * 2;
 
@@ -382,7 +387,7 @@ function groupBgCellSpec(
  */
 export function buildMarkerAtlas(
   markers: Marker[],
-  palette: LiveChartPalette,
+  palette: MarkerAtlasPalette,
   font: SkFont,
   scale = 1,
   /** Also bake count-badge cells (digits + per-color backgrounds) for

package/src/hooks/useChartReveal.ts

@@ -39,7 +39,7 @@ export interface ChartRevealState {
   morphT: SharedValue<number>;
   /** True while loading=true */
   isLoading: SharedValue<boolean>;
-  /** True when not loading and fewer than two samples. */
+  /** True when not loading and no samples are available. */
   isEmpty: SharedValue<boolean>;
   yAxisOpacity: SharedValue<number>;
   fillOpacity: SharedValue<number>;

package/src/hooks/useCrosshair.ts

@@ -114,6 +114,34 @@ export interface CrosshairChartOpts {
   bridgeUnknown?: boolean;
 }
 
+function resolveCrosshairSettings(
+  chartOpts: CrosshairChartOpts | undefined,
+  scrubAction: ResolvedScrubActionConfig | null | undefined,
+  onScrubAction: ((point: ScrubActionPoint) => void) | undefined,
+  clampToPlot: boolean,
+) {
+  const hasScrubAction = scrubAction != null;
+  return {
+    hasScrubAction,
+    clampPlainScrubToPlot: clampToPlot && !hasScrubAction,
+    hasOnScrubAction: onScrubAction != null,
+    dismissOnTapOutside: scrubAction?.dismissOnTapOutside ?? false,
+    dismissOnAction: scrubAction?.dismissOnAction ?? false,
+    snapIncrement: scrubAction?.snap,
+    actionIcon: scrubAction?.icon ?? "+",
+    actionShowText: scrubAction?.text ?? true,
+    hasTimeBadge: scrubAction?.timeBadge ?? false,
+    isCandleMode: chartOpts?.mode === "candle",
+    candlesSV: chartOpts?.candles,
+    liveCandleSV: chartOpts?.liveCandle,
+    candleWidthSecs: chartOpts?.candleWidthSecs ?? 60,
+    chartGaps: chartOpts?.gaps ?? [],
+    bridgeNoTrades: chartOpts?.bridgeNoTrades ?? false,
+    bridgeUnavailable: chartOpts?.bridgeUnavailable ?? false,
+    bridgeUnknown: chartOpts?.bridgeUnknown ?? false,
+  };
+}
+
 /**
  * Single-series crosshair + scrub. Use `useCrosshairSeries` for `LiveChartSeries`.
  */
@@ -211,24 +239,30 @@ export function useCrosshair(
   // screen Y is re-derived from it each frame (see `lockY` below) so the level
   // tracks the price as the axis rescales instead of drifting under a fixed pixel.
   const lockPriceValue = useSharedValue<number | null>(null);
-  const hasScrubAction = scrubAction != null;
-  const clampPlainScrubToPlot = clampToPlot && !hasScrubAction;
-  const hasOnScrubAction = onScrubAction != null;
-  const dismissOnTapOutside = scrubAction?.dismissOnTapOutside ?? false;
-  const dismissOnAction = scrubAction?.dismissOnAction ?? false;
-  const snapIncrement = scrubAction?.snap;
-  const actionIcon = scrubAction?.icon ?? "+";
-  const actionShowText = scrubAction?.text ?? true;
-  const hasTimeBadge = scrubAction?.timeBadge ?? false;
-
-  const isCandleMode = chartOpts?.mode === "candle";
-  const candlesSV = chartOpts?.candles;
-  const liveCandleSV = chartOpts?.liveCandle;
-  const candleWidthSecs = chartOpts?.candleWidthSecs ?? 60;
-  const chartGaps = chartOpts?.gaps ?? [];
-  const bridgeNoTrades = chartOpts?.bridgeNoTrades ?? false;
-  const bridgeUnavailable = chartOpts?.bridgeUnavailable ?? false;
-  const bridgeUnknown = chartOpts?.bridgeUnknown ?? false;
+  const {
+    hasScrubAction,
+    clampPlainScrubToPlot,
+    hasOnScrubAction,
+    dismissOnTapOutside,
+    dismissOnAction,
+    snapIncrement,
+    actionIcon,
+    actionShowText,
+    hasTimeBadge,
+    isCandleMode,
+    candlesSV,
+    liveCandleSV,
+    candleWidthSecs,
+    chartGaps,
+    bridgeNoTrades,
+    bridgeUnavailable,
+    bridgeUnknown,
+  } = resolveCrosshairSettings(
+    chartOpts,
+    scrubAction,
+    onScrubAction,
+    clampToPlot,
+  );
 
   // 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
@@ -407,9 +441,7 @@ export function useCrosshair(
       const canvasWidth = engine.canvasWidth.get();
       const canvasHeight = engine.canvasHeight.get();
       const price =
-        active && rawPrice !== null
-          ? snapPrice(rawPrice, snapIncrement)
-          : null;
+        active && rawPrice !== null ? snapPrice(rawPrice, snapIncrement) : null;
       let y = -1;
       if (
         rawPrice !== null &&
@@ -586,15 +618,7 @@ export function useCrosshair(
         string | null,
         string | null,
       ];
-      scheduleOnRN(
-        handleScrub,
-        row[2],
-        row[3],
-        row[0],
-        row[1],
-        row[4],
-        row[5],
-      );
+      scheduleOnRN(handleScrub, row[2], row[3], row[0], row[1], row[4], row[5]);
     },
   );
 
@@ -667,13 +691,7 @@ export function useCrosshair(
     .onTouchesUp(
       /* istanbul ignore next */ (e, manager) => {
         "worklet";
-        delayedPanTouchUp(
-          longPressMs,
-          e,
-          manager,
-          fingerDown,
-          panActivated,
-        );
+        delayedPanTouchUp(longPressMs, e, manager, fingerDown, panActivated);
       },
     )
     .onTouchesCancelled(
@@ -706,7 +724,12 @@ export function useCrosshair(
         // stays false and the live crosshair hides itself.
         if (hasScrubAction && lockActive.get()) {
           lockX.set(
-            clampPlotX(e.x, padding.left, engine.canvasWidth.get(), padding.right),
+            clampPlotX(
+              e.x,
+              padding.left,
+              engine.canvasWidth.get(),
+              padding.right,
+            ),
           );
           // Freeze the chosen price (value at the pointer Y); the line's Y is
           // re-derived from it so the level stays put in PRICE as the axis rescales.
@@ -747,7 +770,12 @@ export function useCrosshair(
         if (!enabled) return;
         if (hasScrubAction && lockActive.get()) {
           lockX.set(
-            clampPlotX(e.x, padding.left, engine.canvasWidth.get(), padding.right),
+            clampPlotX(
+              e.x,
+              padding.left,
+              engine.canvasWidth.get(),
+              padding.right,
+            ),
           );
           // Freeze the chosen price (value at the pointer Y); the line's Y is
           // re-derived from it so the level stays put in PRICE as the axis rescales.
@@ -895,13 +923,8 @@ export function useCrosshair(
     : undefined;
   // Keep the bottom axis scroll-only. Do not apply horizontal plot bounds here:
   // the action badge is intentionally tappable in the right gutter.
-  const tapHitSlop = resolveScrubHitSlop(
-    padding,
-    false,
-    scrubBottomExclude,
-  );
-  if (tapGesture && tapHitSlop)
-    tapGesture = tapGesture.hitSlop(tapHitSlop);
+  const tapHitSlop = resolveScrubHitSlop(padding, false, scrubBottomExclude);
+  if (tapGesture && tapHitSlop) tapGesture = tapGesture.hitSlop(tapHitSlop);
 
   return {
     scrubX,

package/src/hooks/useDegen.ts

@@ -13,6 +13,32 @@ import type { SingleEngineState } from "../core/useLiveChartEngine";
 import { computeShake, spawnBurst, tickParticles } from "../math/degenTick";
 import type { DegenShakePayload, Momentum } from "../types";
 
+function resolveDegenSettings(
+  config: ResolvedDegenConfig | null,
+  hasShakeListener: boolean,
+) {
+  return {
+    off: config === null,
+    scale: config?.scale ?? 1,
+    down: config?.downMomentum ?? false,
+    shake: config?.shake ?? true,
+    shakeIntensity: config?.shakeIntensity ?? 1,
+    shakeDurationSec: config?.shakeDurationSec ?? 0.45,
+    slotCount: config?.particleSlotCount ?? 60,
+    burstParticleCount: config?.burstParticleCount ?? 20,
+    particleBurstDurationSec: config?.particleBurstDurationSec ?? 1,
+    drag: config?.drag ?? 0.95,
+    sizeMin: config?.particleSizeMin ?? 1,
+    sizeMax: config?.particleSizeMax ?? 2.2,
+    spreadAngle: config?.spreadAngle ?? Math.PI * 1.2,
+    jitterX: config?.positionJitterX ?? 24,
+    jitterY: config?.positionJitterY ?? 8,
+    speedMin: config?.speedMin ?? 60,
+    speedMax: config?.speedMax ?? 160,
+    hasShakeListener,
+  };
+}
+
 export function useDegen(
   engine: SingleEngineState,
   dotX: SharedValue<number>,
@@ -65,23 +91,26 @@ export function useDegen(
     onShakeRef.current?.({ direction });
   };
 
-  const degenOff = cfg === null;
-  const resolvedScale = cfg?.scale ?? 1;
-  const resolvedDown = cfg?.downMomentum ?? false;
-  const resolvedShake = cfg?.shake ?? true;
-  const resolvedShakeIntensity = cfg?.shakeIntensity ?? 1;
-  const resolvedShakeDurationSec = cfg?.shakeDurationSec ?? 0.45;
-  const resolvedSlotCount = cfg?.particleSlotCount ?? 60;
-  const resolvedBurstParticleCount = cfg?.burstParticleCount ?? 20;
-  const resolvedParticleBurstDurationSec = cfg?.particleBurstDurationSec ?? 1.0;
-  const resolvedDrag = cfg?.drag ?? 0.95;
-  const resolvedSizeMin = cfg?.particleSizeMin ?? 1;
-  const resolvedSizeMax = cfg?.particleSizeMax ?? 2.2;
-  const resolvedSpreadAngle = cfg?.spreadAngle ?? Math.PI * 1.2;
-  const resolvedJitterX = cfg?.positionJitterX ?? 24;
-  const resolvedJitterY = cfg?.positionJitterY ?? 8;
-  const resolvedSpeedMin = cfg?.speedMin ?? 60;
-  const resolvedSpeedMax = cfg?.speedMax ?? 160;
+  const {
+    off,
+    scale,
+    down,
+    shake,
+    shakeIntensity,
+    shakeDurationSec,
+    slotCount,
+    burstParticleCount,
+    particleBurstDurationSec,
+    drag,
+    sizeMin,
+    sizeMax,
+    spreadAngle,
+    jitterX,
+    jitterY,
+    speedMin,
+    speedMax,
+    hasShakeListener,
+  } = resolveDegenSettings(cfg, onShake != null);
 
   useEffect(() => {
     // Mirror the resolved config into SharedValues for the UI-thread worklet.
@@ -90,43 +119,43 @@ export function useDegen(
     // is off, enabledSV is 0 and the frame worklet early-returns (zeroing the
     // particle buffer and shake itself), so the remaining values are inert; the
     // resolved* defaults already stand in for the null-config case.
-    enabledSV.set(degenOff ? 0 : 1);
-    shakeEnabledSV.set(!degenOff && resolvedShake ? 1 : 0);
-    hasOnShakeListenerSV.set(!degenOff && onShake != null ? 1 : 0);
-    scaleSV.set(resolvedScale);
-    downSV.set(resolvedDown ? 1 : 0);
-    shakeIntensitySV.set(resolvedShakeIntensity);
-    shakeDurationSecSV.set(resolvedShakeDurationSec);
-    slotCountSV.set(resolvedSlotCount);
-    burstParticleCountSV.set(resolvedBurstParticleCount);
-    particleBurstDurationSecSV.set(resolvedParticleBurstDurationSec);
-    dragSV.set(resolvedDrag);
-    sizeMinSV.set(resolvedSizeMin);
-    sizeMaxSV.set(resolvedSizeMax);
-    spreadAngleSV.set(resolvedSpreadAngle);
-    jitterXSV.set(resolvedJitterX);
-    jitterYSV.set(resolvedJitterY);
-    speedMinSV.set(resolvedSpeedMin);
-    speedMaxSV.set(resolvedSpeedMax);
+    enabledSV.set(off ? 0 : 1);
+    shakeEnabledSV.set(!off && shake ? 1 : 0);
+    hasOnShakeListenerSV.set(!off && hasShakeListener ? 1 : 0);
+    scaleSV.set(scale);
+    downSV.set(down ? 1 : 0);
+    shakeIntensitySV.set(shakeIntensity);
+    shakeDurationSecSV.set(shakeDurationSec);
+    slotCountSV.set(slotCount);
+    burstParticleCountSV.set(burstParticleCount);
+    particleBurstDurationSecSV.set(particleBurstDurationSec);
+    dragSV.set(drag);
+    sizeMinSV.set(sizeMin);
+    sizeMaxSV.set(sizeMax);
+    spreadAngleSV.set(spreadAngle);
+    jitterXSV.set(jitterX);
+    jitterYSV.set(jitterY);
+    speedMinSV.set(speedMin);
+    speedMaxSV.set(speedMax);
   }, [
-    degenOff,
-    onShake,
-    resolvedScale,
-    resolvedDown,
-    resolvedShake,
-    resolvedShakeIntensity,
-    resolvedShakeDurationSec,
-    resolvedSlotCount,
-    resolvedBurstParticleCount,
-    resolvedParticleBurstDurationSec,
-    resolvedDrag,
-    resolvedSizeMin,
-    resolvedSizeMax,
-    resolvedSpreadAngle,
-    resolvedJitterX,
-    resolvedJitterY,
-    resolvedSpeedMin,
-    resolvedSpeedMax,
+    off,
+    scale,
+    down,
+    shake,
+    shakeIntensity,
+    shakeDurationSec,
+    slotCount,
+    burstParticleCount,
+    particleBurstDurationSec,
+    drag,
+    sizeMin,
+    sizeMax,
+    spreadAngle,
+    jitterX,
+    jitterY,
+    speedMin,
+    speedMax,
+    hasShakeListener,
     // SharedValue refs are stable (useSharedValue), so listing them satisfies
     // exhaustive-deps without ever re-running the effect.
     enabledSV,

package/src/hooks/useLiveChartHasData.ts

@@ -1,9 +1,13 @@
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
+import {
+  hasCandleChartData,
+  hasLineChartData,
+} from "../core/chartDataPresence";
 import type { CandlePoint, LiveChartPoint } from "../types";
 
 /**
- * Data presence for {@link LiveChart}: line mode needs ≥2 points;
- * candle mode needs ≥2 committed candles (`liveCandle` alone does not count).
+ * Data presence for {@link LiveChart}: line mode needs ≥1 point;
+ * candle mode needs ≥1 committed candle (`liveCandle` alone does not count).
  *
  * {@link useChartReveal} seeds its first-paint state off `hasData` directly (in a
  * layout effect), so no JS-thread snapshot is read during render here.
@@ -22,9 +26,9 @@ export function useLiveChartHasData({
   const hasData = useDerivedValue(() => {
     "worklet";
     if (isCandle) {
-      return (candles?.value.length ?? 0) >= 2;
+      return hasCandleChartData(candles?.value);
     }
-    return data.value.length >= 2;
+    return hasLineChartData(data.value);
   });
 
   return { hasData };

package/src/hooks/useReferenceLineSeries.ts

@@ -34,6 +34,7 @@ export function useReferenceLineSeries(
   engine: ChartEngineLayout,
   padding: ChartPadding,
   points: LiveChartPoint[],
+  extendToStart: boolean,
   extendToNow: boolean,
 ): ReferenceLineSeriesGeometry {
   const cacheRef = useRef<{
@@ -57,6 +58,7 @@ export function useReferenceLineSeries(
       engine.canvasWidth.get(),
       engine.canvasHeight.get(),
       padding,
+      extendToStart,
       extendToNow,
       cache.tick ? cache.a : cache.b,
     );
@@ -86,6 +88,9 @@ export function useReferenceLineSeries(
   );
   const currentVisible = useDerivedValue(() => {
     if (points.length === 0) return false;
+    if (!extendToStart && points[0].time > engine.timestamp.get()) {
+      return false;
+    }
     if (!extendToNow && points[points.length - 1].time < engine.timestamp.get()) {
       return false;
     }

package/src/hooks/useReverseMorphEngineInputs.ts

@@ -3,6 +3,11 @@ import {
   useSharedValue,
   type SharedValue,
 } from "react-native-reanimated";
+import {
+  hasCandleChartData,
+  hasLineChartData,
+  hasMultiSeriesChartData,
+} from "../core/chartDataPresence";
 import type { CandlePoint, LiveChartPoint, SeriesConfig } from "../types";
 
 const STASH_MORPH_EPS = 0.01;
@@ -42,20 +47,19 @@ export function useSingleChartReverseMorphInputs({
       has: hasData.get(),
       m: morphT.get(),
       d: data.get(),
-      cLen: candles?.get().length ?? 0,
       c: candles?.get(),
       lc: liveCandle?.get() ?? null,
     }),
     (curr) => {
       "worklet";
       if (!curr.candle) {
-        if (curr.has && curr.d.length >= 2) {
+        if (curr.has && hasLineChartData(curr.d)) {
           lineStash.set(curr.d.slice());
           lineEngineData.set(curr.d);
         } else if (
           !curr.has &&
           curr.m > STASH_MORPH_EPS &&
-          lineStash.get().length >= 2
+          hasLineChartData(lineStash.get())
         ) {
           lineEngineData.set(lineStash.get());
         } else {
@@ -65,14 +69,14 @@ export function useSingleChartReverseMorphInputs({
       }
 
       const cArr = curr.c;
-      if (curr.has && curr.cLen >= 2 && cArr) {
+      if (curr.has && hasCandleChartData(cArr) && cArr) {
         candleStash.set(cArr.slice());
         candlesEngine.set(cArr);
         liveEngine.set(curr.lc);
       } else if (
         !curr.has &&
         curr.m > STASH_MORPH_EPS &&
-        candleStash.get().length >= 2
+        hasCandleChartData(candleStash.get())
       ) {
         candlesEngine.set(candleStash.get());
         liveEngine.set(null);
@@ -118,27 +122,14 @@ export function useMultiSeriesReverseMorphInputs({
     (curr) => {
       "worklet";
       const live = curr.live;
-
-      let anyReady = false;
-      for (let i = 0; i < live.length; i++) {
-        if (live[i].data.length >= 2) {
-          anyReady = true;
-          break;
-        }
-      }
+      const anyReady = hasMultiSeriesChartData(live);
 
       if (curr.has && anyReady) {
         seriesStash.set(snapshotSeriesWorklet(live));
         effectiveSeries.set(live);
       } else {
-        let stashReady = false;
         const stash = seriesStash.get();
-        for (let i = 0; i < stash.length; i++) {
-          if (stash[i].data.length >= 2) {
-            stashReady = true;
-            break;
-          }
-        }
+        const stashReady = hasMultiSeriesChartData(stash);
 
         if (!curr.has && curr.m > STASH_MORPH_EPS && stashReady) {
           effectiveSeries.set(seriesStash.get());