react-native-livechart 4.8.0 → 4.9.1

package/src/components/LiveChart.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
@@ -48,6 +48,7 @@ import {
   resolveReturnToLiveMs,
   resolveSelectionDot,
   resolveThreshold,
+  THRESHOLD_FILL_OPACITY_DEFAULT,
   resolveTradeStream,
   resolveValueLine,
   resolveVolume,
@@ -82,7 +83,11 @@ import { usePinchZoom } from "../hooks/usePinchZoom";
 import { useVisibleRange } from "../hooks/useVisibleRange";
 import { useSegmentLineGradient } from "../hooks/useSegmentLineGradient";
 import { useSingleChartReverseMorphInputs } from "../hooks/useReverseMorphEngineInputs";
-import { useThreshold } from "../hooks/useThreshold";
+import {
+  useThreshold,
+  useThresholdSeries,
+  useThresholdSplitUniforms,
+} from "../hooks/useThreshold";
 import { useTradeStream } from "../hooks/useTradeStream";
 import { useXAxis } from "../hooks/useXAxis";
 import { useYAxis } from "../hooks/useYAxis";
@@ -110,6 +115,7 @@ import {
 } from "../theme";
 import type {
   LiveChartPalette,
+  LiveChartPoint,
   LiveChartProps,
   Marker,
   TradeEvent,
@@ -118,6 +124,10 @@ import {
   ThresholdBadgeOverlay,
   ThresholdLineOverlay,
 } from "./ThresholdLineOverlay";
+import {
+  THRESHOLD_SPLIT_AVAILABLE,
+  ThresholdSplitShader,
+} from "./ThresholdSplitShader";
 import { AreaDotsOverlay } from "./AreaDotsOverlay";
 import { AxisLabelOverlay } from "./AxisLabelOverlay";
 import {
@@ -149,8 +159,6 @@ import { ValueLineOverlay } from "./ValueLineOverlay";
 import { XAxisOverlay } from "./XAxisOverlay";
 import { YAxisOverlay } from "./YAxisOverlay";
 
-/** Translucent fill alpha for the threshold profit/loss band. */
-const THRESHOLD_FILL_OPACITY = 0.16;
 
 /** Stable empty grouping result (identity-stable so downstream worklets don't
  *  re-run) used when reference-line grouping is off. */
@@ -163,9 +171,9 @@ const EMPTY_NUMS: number[] = [];
 /**
  * Color stops for the threshold's hard-split vertical gradient. Both arrays pair
  * with the `[0, t, t, 1]` split positions: index 0–1 paint above the split,
- * 2–3 below. `stroke` is full-strength; `fill` is the same hues at
- * {@link THRESHOLD_FILL_OPACITY} for the band. Defaults to the palette's semantic
- * up-green / down-red when colors are omitted.
+ * 2–3 below. `stroke` is full-strength; `fill` is the same hues at the config's
+ * band opacity (`fill: { opacity }`, default `0.16`). Defaults to the palette's
+ * semantic up-green / down-red when colors are omitted.
  */
 function thresholdStops(
   cfg: ResolvedThresholdConfig,
@@ -175,14 +183,51 @@ function thresholdStops(
   const below = cfg.belowColor ?? palette.candleDown;
   const [ar, ag, ab] = parseColorRgb(above);
   const [br, bg, bb] = parseColorRgb(below);
-  const aboveFill = `rgba(${ar}, ${ag}, ${ab}, ${THRESHOLD_FILL_OPACITY})`;
-  const belowFill = `rgba(${br}, ${bg}, ${bb}, ${THRESHOLD_FILL_OPACITY})`;
+  const aboveFill = `rgba(${ar}, ${ag}, ${ab}, ${cfg.fillOpacity})`;
+  const belowFill = `rgba(${br}, ${bg}, ${bb}, ${cfg.fillOpacity})`;
   return {
     stroke: [above, above, below, below],
     fill: [aboveFill, aboveFill, belowFill, belowFill],
   };
 }
 
+/** Stand-in split color when no threshold is set (the shader is never rendered then). */
+const THRESHOLD_FALLBACK_COLOR = [0, 0, 0, 1];
+
+/**
+ * Above/below split colors as straight-alpha `[r, g, b, a]` vec4s (channels 0..1)
+ * for the time-varying {@link ThresholdSplitShader}: full-strength `stroke*` for
+ * the line, band-opacity `fill*` for the band — the vec4 equivalent of
+ * {@link thresholdStops}' gradient color array. Takes the already
+ * palette-defaulted color strings; an rgba() alpha carries into the stroke and
+ * multiplies the band opacity (matching what the constant gradient's raw-string
+ * stroke does).
+ */
+function thresholdSplitColorVecs(
+  above: string,
+  below: string,
+  fillOpacity: number,
+): {
+  strokeAbove: number[];
+  strokeBelow: number[];
+  fillAbove: number[];
+  fillBelow: number[];
+} {
+  const [ar, ag, ab, aa] = parseColorRgba(above);
+  const [br, bg, bb, ba] = parseColorRgba(below);
+  const a = [ar / 255, ag / 255, ab / 255];
+  const b = [br / 255, bg / 255, bb / 255];
+  return {
+    strokeAbove: [a[0], a[1], a[2], aa],
+    strokeBelow: [b[0], b[1], b[2], ba],
+    fillAbove: [a[0], a[1], a[2], aa * fillOpacity],
+    fillBelow: [b[0], b[1], b[2], ba * fillOpacity],
+  };
+}
+
+/** Transparent vec4 — the band shader's "threshold ended" rest color. */
+const TRANSPARENT_VEC4 = [0, 0, 0, 0];
+
 /**
  * Resolves props → configs → theme/layout → engine → per-frame derived values and
  * overlay hooks, returning a single render model. All the chart's wiring lives
@@ -310,6 +355,9 @@ function useLiveChartController({
   // Threshold split is a line-mode feature (candle bodies carry their own up/down
   // colors), so it's inert in candle mode — same as the area gradient.
   const thresholdCfg = isCandle ? null : resolveThreshold(threshold);
+  const thresholdSeriesSV = thresholdCfg?.series ?? null;
+  const thresholdIsSeries =
+    thresholdSeriesSV !== null || Array.isArray(thresholdCfg?.value);
   const valueLineCfg = resolveValueLine(valueLine);
   // Static charts run zero loops: force the pulse off so its `withRepeat`-driven
   // ring never starts (the DotOverlay reads `pulseCfg`, so null = no pulse).
@@ -367,6 +415,11 @@ function useLiveChartController({
   // range and the axis follows the finger in one motion (the committed values are
   // already in `refValues`). `excludeFromRange` lines opt out, matching the static
   // fit. Identity-stable (no re-fit) when nothing is draggable.
+  //
+  // `threshold.includeInRange` rides the same channel: the constant benchmark
+  // contributes its live value; a series contributes its window min/max
+  // (respecting `extendToNow`), so an off-range break-even expands the axis and
+  // stays on-plot like a reference line would.
   const draggableRefIdx = allRefLines
     .map((l, i) =>
       l.draggable && !l.excludeFromRange && referenceLineForm(l) === "line"
@@ -374,13 +427,30 @@ function useLiveChartController({
         : -1,
     )
     .filter((i) => i >= 0);
+  const thresholdInRange = thresholdCfg?.includeInRange === true;
+  // Constant benchmark → its live value rides this channel. A series threshold
+  // is folded inside the engine tick instead (`thresholdRangePoints`), which
+  // already knows the window bounds for the min/max.
+  const thresholdRangeValueSV =
+    thresholdInRange &&
+    thresholdCfg?.value != null &&
+    !Array.isArray(thresholdCfg.value)
+      ? thresholdCfg.value
+      : null;
   const liveRefValues = useDerivedValue<number[]>(() => {
-    if (draggableRefIdx.length === 0) return EMPTY_NUMS;
-    const dv = dragValues.get();
+    if (draggableRefIdx.length === 0 && thresholdRangeValueSV === null)
+      return EMPTY_NUMS;
     const out: number[] = [];
-    for (let k = 0; k < draggableRefIdx.length; k++) {
-      const v = dv[draggableRefIdx[k]];
-      if (v != null) out.push(v);
+    if (draggableRefIdx.length > 0) {
+      const dv = dragValues.get();
+      for (let k = 0; k < draggableRefIdx.length; k++) {
+        const v = dv[draggableRefIdx[k]];
+        if (v != null) out.push(v);
+      }
+    }
+    if (thresholdRangeValueSV !== null) {
+      const v = thresholdRangeValueSV.get();
+      if (Number.isFinite(v)) out.push(v);
     }
     return out;
   });
@@ -587,6 +657,13 @@ function useLiveChartController({
     exaggerate,
     referenceValues: refValues,
     liveReferenceValues: liveRefValues,
+    // Series threshold with `includeInRange`: the tick folds its window min/max
+    // into the Y-range fit (the constant form rides `liveReferenceValues`).
+    thresholdRangePoints:
+      thresholdInRange && thresholdIsSeries
+        ? (thresholdSeriesSV ?? (thresholdCfg?.value as LiveChartPoint[]))
+        : undefined,
+    thresholdRangeExtendToNow: thresholdCfg?.extendToNow ?? true,
     nonNegative,
     maxValue,
     windowBuffer,
@@ -658,17 +735,116 @@ function useLiveChartController({
     () => refGroupResult.get().hidden,
   );
 
-  // Threshold split geometry (shared by stroke gradient, fill band, marker line).
-  // Called unconditionally with a stand-in value when no threshold is set.
-  const thresholdGeom = useThreshold(
+  // Threshold split geometry. Two forms, picked at render by `Array.isArray` (no
+  // SharedValue read): a constant `SharedValue<number>` benchmark drives the
+  // vertical hard-stop gradient (`thresholdGeom`); a time-varying `LiveChartPoint[]`
+  // series drives the per-fragment split shader (`thresholdSeriesGeom`). Both hooks
+  // run unconditionally — the unused one short-circuits cheaply on the UI thread.
+  const thresholdValue = thresholdCfg?.value ?? emptyThresholdValue;
+  // An empty series (e.g. threshold history not fetched yet) must not paint: no
+  // band, no shader-forced stroke color — unlike the constant form, "no points
+  // yet" is a reachable state and should look like "no threshold". For the live
+  // `series` SharedValue form the emptiness lives on the UI thread, so mirror it
+  // to React state (fires only on empty↔non-empty transitions).
+  const [svSeriesNonEmpty, setSvSeriesNonEmpty] = useState(false);
+  useAnimatedReaction(
+    () => (thresholdSeriesSV ? thresholdSeriesSV.get().length > 0 : false),
+    /* istanbul ignore next -- Reanimated reaction; state mirrored on the JS thread, not exercised under Jest */
+    (hasPts, prev) => {
+      if (hasPts !== prev) scheduleOnRN(setSvSeriesNonEmpty, hasPts);
+    },
+  );
+  const thresholdSeriesHasPoints = thresholdSeriesSV
+    ? svSeriesNonEmpty
+    : Array.isArray(thresholdCfg?.value) && thresholdCfg.value.length > 0;
+  const thresholdGeom = useThreshold(engine, effectivePadding, thresholdValue);
+  const thresholdSeriesGeom = useThresholdSeries(
     engine,
     effectivePadding,
-    thresholdCfg?.value ?? emptyThresholdValue,
+    thresholdValue,
+    thresholdSeriesSV,
+    thresholdCfg?.extendToNow ?? true,
   );
   const thresholdStopColors = thresholdCfg
     ? thresholdStops(thresholdCfg, palette)
     : null;
 
+  // Split colors as vec4s for the series shader, memoized on the *resolved*
+  // color strings + opacity (so a threshold added after mount with default
+  // colors still computes, and the per-frame uniforms worklet isn't rebuilt
+  // every render). `strokeRest` is the plain line color painted right of the
+  // `extendToNow: false` cutoff.
+  const thresholdSplitAbove = thresholdCfg
+    ? (thresholdCfg.aboveColor ?? palette.candleUp)
+    : null;
+  const thresholdSplitBelow = thresholdCfg
+    ? (thresholdCfg.belowColor ?? palette.candleDown)
+    : null;
+  const thresholdFillOpacity =
+    thresholdCfg?.fillOpacity ?? THRESHOLD_FILL_OPACITY_DEFAULT;
+  const thresholdLineColorStr = lineProp?.color ?? palette.line;
+  const thresholdVecs = useMemo(
+    () =>
+      thresholdSplitAbove !== null && thresholdSplitBelow !== null
+        ? {
+            ...thresholdSplitColorVecs(
+              thresholdSplitAbove,
+              thresholdSplitBelow,
+              thresholdFillOpacity,
+            ),
+            strokeRest: (() => {
+              const [r, g, b, a] = parseColorRgba(thresholdLineColorStr);
+              return [r / 255, g / 255, b / 255, a];
+            })(),
+          }
+        : null,
+    [
+      thresholdSplitAbove,
+      thresholdSplitBelow,
+      thresholdFillOpacity,
+      thresholdLineColorStr,
+    ],
+  );
+  const thresholdStrokeUniforms = useThresholdSplitUniforms(
+    thresholdSeriesGeom.samples,
+    engine,
+    effectivePadding,
+    thresholdVecs?.strokeAbove ?? THRESHOLD_FALLBACK_COLOR,
+    thresholdVecs?.strokeBelow ?? THRESHOLD_FALLBACK_COLOR,
+    thresholdVecs?.strokeRest ?? THRESHOLD_FALLBACK_COLOR,
+    thresholdSeriesGeom.clipRightX,
+  );
+  const thresholdFillUniforms = useThresholdSplitUniforms(
+    thresholdSeriesGeom.samples,
+    engine,
+    effectivePadding,
+    thresholdVecs?.fillAbove ?? THRESHOLD_FALLBACK_COLOR,
+    thresholdVecs?.fillBelow ?? THRESHOLD_FALLBACK_COLOR,
+    TRANSPARENT_VEC4,
+    thresholdSeriesGeom.clipRightX,
+  );
+
+  // Marker line + badge sources: the series anchors at the value-at-now (flat-
+  // extended past its last point); the constant case at the single benchmark Y.
+  // The badge gets its own visibility — it's pinned at the value-at-now Y, which
+  // can be off-plot while older polyline segments are still visible.
+  const thresholdMarkerLineY = thresholdIsSeries
+    ? thresholdSeriesGeom.currentLineY
+    : thresholdGeom.lineY;
+  const thresholdMarkerVisible = thresholdIsSeries
+    ? thresholdSeriesGeom.visible
+    : thresholdGeom.visible;
+  const thresholdBadgeVisible = thresholdIsSeries
+    ? thresholdSeriesGeom.currentVisible
+    : thresholdGeom.visible;
+  const thresholdMarkerValue =
+    thresholdCfg && !thresholdIsSeries && !Array.isArray(thresholdCfg.value)
+      ? (thresholdCfg.value ?? thresholdSeriesGeom.currentValue)
+      : thresholdSeriesGeom.currentValue;
+  const thresholdSeriesPts = thresholdIsSeries
+    ? thresholdSeriesGeom.screenPts
+    : undefined;
+
   // Straight polyline instead of the monotone cubic when line.curve === "linear".
   // Shared by the path builders and the marker anchoring so glyphs sit on the
   // rendered line rather than the phantom spline.
@@ -678,8 +854,9 @@ function useLiveChartController({
     engine,
     effectivePadding,
     reveal.morphT,
-    // Only build the band path when the fill is actually on.
-    thresholdCfg?.fill ? thresholdGeom.lineY : undefined,
+    // Constant threshold band closes at a single Y (the series closes along the
+    // polyline passed as the last arg below).
+    thresholdCfg?.fill && !thresholdIsSeries ? thresholdGeom.lineY : undefined,
     lineIsLinear,
     // Tip the line at the view-edge price (not the live value) while scrolled,
     // matching the live dot — so the right edge doesn't drop to the off-screen
@@ -689,6 +866,13 @@ function useLiveChartController({
     // Match the standalone loading squiggle's wave during the reveal morph.
     loadingCfg?.amplitude,
     loadingCfg?.speed,
+    // Time-varying threshold band: bottom edge built from the shader's samples
+    // (so the band matches the shader and doesn't bleed at step risers). An empty
+    // series builds no band (its samples are all the far-below fallback, which
+    // would tint the entire area under the line).
+    thresholdCfg?.fill && thresholdSeriesHasPoints
+      ? thresholdSeriesGeom.samples
+      : undefined,
   );
 
   // Area-dots fill shader color as a vec4 (channels 0..1), with the config
@@ -1133,6 +1317,17 @@ function useLiveChartController({
     thresholdGeom,
     thresholdStrokeColors: thresholdStopColors?.stroke ?? null,
     thresholdFillColors: thresholdStopColors?.fill ?? null,
+    // Time-varying threshold (a `LiveChartPoint[]` series): the per-fragment split
+    // shader + polyline marker, vs. the constant case's gradient.
+    thresholdIsSeries,
+    thresholdSeriesHasPoints,
+    thresholdStrokeUniforms,
+    thresholdFillUniforms,
+    thresholdMarkerLineY,
+    thresholdMarkerVisible,
+    thresholdBadgeVisible,
+    thresholdMarkerValue,
+    thresholdSeriesPts,
     badgeUsesRightGutter,
     // theme / layout / fonts
     palette,
@@ -1247,6 +1442,9 @@ function ChartFillLayer({ model }: { model: LiveChartModel }) {
     thresholdGeom,
     thresholdFillPath,
     thresholdFillColors,
+    thresholdIsSeries,
+    thresholdSeriesHasPoints,
+    thresholdFillUniforms,
   } = model;
 
   return (
@@ -1300,20 +1498,33 @@ function ChartFillLayer({ model }: { model: LiveChartModel }) {
       )}
 
       {/* Threshold profit/loss band — the area between the line and the threshold,
-          hard-split at the threshold Y into the above/below colors. Independent of
-          the baseline area fill above (set `gradient={false}` for the band alone). */}
-      {thresholdCfg?.fill && thresholdFillColors && (
-        <Group opacity={reveal.fillOpacity}>
-          <Path path={thresholdFillPath} style="fill">
-            <LinearGradient
-              start={vec(0, 0)}
-              end={thresholdGeom.gradientEnd}
-              colors={thresholdFillColors}
-              positions={thresholdGeom.splitPositions}
-            />
-          </Path>
-        </Group>
-      )}
+          split into the above/below colors. Independent of the baseline area fill
+          above (set `gradient={false}` for the band alone). A time-varying series
+          paints with the per-fragment split shader; a constant value with the
+          vertical hard-stop gradient. */}
+      {thresholdCfg?.fill &&
+        (thresholdIsSeries ? (
+          // The availability gate keeps a failed shader compile from filling the
+          // band with the default paint (opaque black) — see THRESHOLD_SPLIT_AVAILABLE.
+          thresholdSeriesHasPoints && THRESHOLD_SPLIT_AVAILABLE ? (
+            <Group opacity={reveal.fillOpacity}>
+              <Path path={thresholdFillPath} style="fill">
+                <ThresholdSplitShader uniforms={thresholdFillUniforms} />
+              </Path>
+            </Group>
+          ) : null
+        ) : thresholdFillColors ? (
+          <Group opacity={reveal.fillOpacity}>
+            <Path path={thresholdFillPath} style="fill">
+              <LinearGradient
+                start={vec(0, 0)}
+                end={thresholdGeom.gradientEnd}
+                colors={thresholdFillColors}
+                positions={thresholdGeom.splitPositions}
+              />
+            </Path>
+          </Group>
+        ) : null)}
     </Group>
   );
 }
@@ -1342,6 +1553,14 @@ function ChartStack({ model }: { model: LiveChartModel }) {
     thresholdCfg,
     thresholdGeom,
     thresholdStrokeColors,
+    thresholdIsSeries,
+    thresholdSeriesHasPoints,
+    thresholdStrokeUniforms,
+    thresholdMarkerLineY,
+    thresholdMarkerVisible,
+    thresholdBadgeVisible,
+    thresholdMarkerValue,
+    thresholdSeriesPts,
     formatValue,
     lineGroupOpacity,
     linePath,
@@ -1439,18 +1658,20 @@ function ChartStack({ model }: { model: LiveChartModel }) {
         ))}
       </Group>
 
-      {/* Threshold marker line + label (behind the chart line). */}
+      {/* Threshold marker line + label (behind the chart line). For a time-varying
+          series it traces the threshold polyline; otherwise a horizontal line. */}
       {thresholdCfg?.line && (
         <ThresholdLineOverlay
           engine={engine}
           padding={effectivePadding}
-          lineY={thresholdGeom.lineY}
-          visible={thresholdGeom.visible}
-          value={thresholdCfg.value}
+          lineY={thresholdMarkerLineY}
+          visible={thresholdMarkerVisible}
+          value={thresholdMarkerValue}
           cfg={thresholdCfg.line}
           palette={palette}
           font={skiaFont}
           formatValue={formatValue}
+          seriesPts={thresholdSeriesPts}
         />
       )}
 
@@ -1467,7 +1688,15 @@ function ChartStack({ model }: { model: LiveChartModel }) {
           strokeJoin={lineProp?.join ?? "round"}
           color={lineProp?.color ?? palette.line}
         >
-          {thresholdCfg && thresholdStrokeColors ? (
+          {thresholdIsSeries ? (
+            // Time-varying split: a per-fragment shader colors the stroke above/
+            // below the threshold polyline. Supersedes line.colors + segments.
+            // An empty series renders no paint child → the plain stroke color
+            // (null here keeps the empty case out of the NaN constant gradient).
+            thresholdSeriesHasPoints ? (
+              <ThresholdSplitShader uniforms={thresholdStrokeUniforms} />
+            ) : null
+          ) : thresholdCfg && thresholdStrokeColors ? (
             // Vertical hard split at the threshold Y — supersedes line.colors and
             // segment recoloring for the stroke while a threshold is set.
             <LinearGradient
@@ -1617,9 +1846,9 @@ function ChartStack({ model }: { model: LiveChartModel }) {
         <ThresholdBadgeOverlay
           engine={engine}
           padding={effectivePadding}
-          lineY={thresholdGeom.lineY}
-          visible={thresholdGeom.visible}
-          value={thresholdCfg.value}
+          lineY={thresholdMarkerLineY}
+          visible={thresholdBadgeVisible}
+          value={thresholdMarkerValue}
           cfg={thresholdCfg.line}
           palette={palette}
           font={skiaFont}

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/components/ThresholdLineOverlay.tsx

@@ -12,6 +12,7 @@ import type { ResolvedThresholdLineConfig } from "../core/resolveConfig";
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import type { ChartPadding } from "../draw/line";
 import { usePathBuilder } from "../hooks/usePathBuilder";
+import { thresholdDashPhase } from "../math/threshold";
 import { measureFontTextWidth } from "../lib/measureFontTextWidth";
 import type { LiveChartPalette } from "../types";
 
@@ -32,6 +33,9 @@ interface ThresholdMarkerProps {
   palette: LiveChartPalette;
   font: SkFont;
   formatValue: (v: number) => string;
+  /** When set, draw the marker as this time-varying threshold polyline (`[x, y, …]`)
+   *  instead of a horizontal line at `lineY`. */
+  seriesPts?: SharedValue<number[]>;
 }
 
 /**
@@ -47,18 +51,44 @@ export function ThresholdLineOverlay({
   visible,
   cfg,
   palette,
+  seriesPts,
 }: ThresholdMarkerProps) {
   const lineColor = cfg.color ?? palette.refLine;
   const { strokeWidth, intervals } = cfg;
+  const isSeries = seriesPts !== undefined;
+  const dashCycle = intervals[0] + intervals[1];
+
+  // Series marker: advance the dash phase with the content scroll so the
+  // pattern rides the staircase instead of sitting screen-fixed under it (the
+  // path start is pinned at the plot edge, so a static phase reads as the dots
+  // marching right along the gliding line). The constant marker is a static
+  // level — its dashes stay screen-fixed (phase 0).
+  const dashPhase = useDerivedValue(() => {
+    if (!isSeries) return 0;
+    return thresholdDashPhase(
+      engine.timestamp.get(),
+      engine.displayWindow.get(),
+      padding.left,
+      engine.canvasWidth.get() - padding.right,
+      dashCycle,
+    );
+  });
 
   const builder = usePathBuilder();
 
   const linePath = useDerivedValue(() => {
     const b = builder.value;
     if (visible.get()) {
-      const y = lineY.get();
-      b.moveTo(padding.left, y);
-      b.lineTo(engine.canvasWidth.get() - padding.right, y);
+      const sp = seriesPts?.get();
+      if (sp && sp.length >= 4) {
+        // Time-varying threshold: trace the polyline across the plot.
+        b.moveTo(sp[0], sp[1]);
+        for (let i = 2; i < sp.length; i += 2) b.lineTo(sp[i], sp[i + 1]);
+      } else {
+        const y = lineY.get();
+        b.moveTo(padding.left, y);
+        b.lineTo(engine.canvasWidth.get() - padding.right, y);
+      }
     }
     return b.detach();
   });
@@ -73,7 +103,7 @@ export function ThresholdLineOverlay({
         strokeWidth={strokeWidth}
         color={lineColor}
       >
-        <DashPathEffect intervals={intervals} />
+        <DashPathEffect intervals={intervals} phase={dashPhase} />
       </Path>
     </Group>
   );
@@ -100,7 +130,7 @@ export function ThresholdBadgeOverlay({
   const { label, labelPosition, showValue } = cfg;
   const badgeBackground = palette.tooltipBg;
   const badgeBorderColor = cfg.color ?? palette.refLine;
-  const labelColor = cfg.color ?? palette.refLabel;
+  const labelColor = cfg.labelColor ?? cfg.color ?? palette.refLabel;
 
   // Font metrics are stable → read once (getMetrics allocates + crosses JSI).
   const { fontAscent, baselineOffset, pillH } = (() => {

package/src/components/ThresholdSplitShader.tsx

@@ -0,0 +1,92 @@
+import { Shader, Skia, type Uniforms } from "@shopify/react-native-skia";
+import type { SharedValue } from "react-native-reanimated";
+
+import { THRESHOLD_SAMPLE_COUNT } from "../math/threshold";
+
+/**
+ * Per-fragment split shader for a *time-varying* threshold. For each fragment it
+ * reads the threshold's Y at the fragment's X — linearly interpolated from
+ * `samples[]`, evenly spaced across `[plotLeft, plotRight]` — and paints
+ * `aboveColor` above the boundary (smaller Y), `belowColor` below. This is the
+ * polyline equivalent of the constant case's vertical hard-stop `LinearGradient`,
+ * which can only express a *horizontal* split.
+ *
+ * Used for both the line stroke and the profit/loss fill band (the band passes
+ * alpha-reduced colors). Output is premultiplied — Skia's shader convention, as in
+ * `AreaDotsOverlay`. One GPU draw, no per-frame clip / `saveLayer`.
+ */
+const SPLIT_SKSL = `
+// Pixel-X span of the sample grid (thresholdSampleSpanX) — overhangs the plot
+// and glides with the window so features move fluidly, frame to frame.
+uniform float sampleLeft;
+uniform float sampleRight;
+// 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.
+uniform float clipRight;
+uniform vec4 aboveColor; // straight-alpha rgba, 0..1
+uniform vec4 belowColor; // straight-alpha rgba, 0..1
+uniform vec4 restColor;  // straight-alpha rgba, 0..1
+uniform float samples[${THRESHOLD_SAMPLE_COUNT}];
+
+half4 main(vec2 xy) {
+  if (xy.x > clipRight) {
+    return half4(half3(restColor.rgb) * restColor.a, restColor.a);
+  }
+  float span = sampleRight - sampleLeft;
+  float u = span > 0.0 ? (xy.x - sampleLeft) / span : 0.0;
+  u = clamp(u, 0.0, 1.0) * float(${THRESHOLD_SAMPLE_COUNT - 1});
+  // SkSL forbids indexing a uniform array with a non-constant index, so walk the
+  // segments in an unrolled, constant-bound loop — the index is the loop variable
+  // (a compile-time constant per unrolled iteration) — and keep the last segment
+  // whose left edge is at or before the fragment's u.
+  float thrY = samples[0];
+  for (int j = 0; j < ${THRESHOLD_SAMPLE_COUNT - 1}; j++) {
+    if (u >= float(j)) {
+      thrY = mix(samples[j], samples[j + 1], clamp(u - float(j), 0.0, 1.0));
+    }
+  }
+  // 1 above the boundary, 0 below, with ~1px antialiasing across it.
+  float above = clamp(thrY - xy.y + 0.5, 0.0, 1.0);
+  vec4 c = mix(belowColor, aboveColor, above);
+  return half4(half3(c.rgb) * c.a, c.a);
+}`;
+
+// Compiled once. `RuntimeEffect.Make` THROWS on a compile error, so guard it —
+// a shader failure must degrade to "no split" (the line keeps its plain color),
+// never crash every chart screen at import. Null → the component no-ops.
+let SPLIT_EFFECT: ReturnType<typeof Skia.RuntimeEffect.Make> = null;
+try {
+  SPLIT_EFFECT = Skia.RuntimeEffect.Make(SPLIT_SKSL);
+} catch {
+  SPLIT_EFFECT = null;
+}
+
+/**
+ * Whether the split effect compiled. Callers must gate any `<Path>` whose ONLY
+ * paint is this shader on it — without the shader child the path fills with the
+ * default paint (opaque black). A fallback `color` prop can't stand in instead:
+ * Skia multiplies the shader output by the paint alpha, so a transparent color
+ * erases the shader's own output too.
+ */
+export const THRESHOLD_SPLIT_AVAILABLE = SPLIT_EFFECT !== null;
+
+interface ThresholdSplitShaderProps {
+  /**
+   * Per-frame uniforms (built in `useThresholdSplitUniforms`): `sampleLeft` /
+   * `sampleRight` (the gliding sample-grid span, px), `aboveColor` / `belowColor`
+   * (straight-alpha `[r, g, b, a]` vec4s, channels 0..1) and `samples`
+   * (`THRESHOLD_SAMPLE_COUNT` threshold pixel-Y values on the grid).
+   */
+  uniforms: SharedValue<Uniforms>;
+}
+
+/**
+ * The split `RuntimeShader` as a paint child — drop it inside a stroked line
+ * `<Path>` or a filled band `<Path>`, like a `<LinearGradient>`.
+ */
+export function ThresholdSplitShader({ uniforms }: ThresholdSplitShaderProps) {
+  /* istanbul ignore next -- defensive: SPLIT_SKSL is static and compiles */
+  if (!SPLIT_EFFECT) return null;
+  return <Shader source={SPLIT_EFFECT} uniforms={uniforms} />;
+}