react-native-livechart 3.3.0 → 3.5.0

package/src/components/LiveChart.tsx

@@ -29,12 +29,15 @@ import {
   resolveMetrics,
   resolvePulse,
   resolveScrub,
+  resolveScrubAction,
   resolveSelectionDot,
+  resolveThreshold,
   resolveTradeStream,
   resolveValueLine,
   resolveXAxis,
   resolveYAxis,
 } from "../core/resolveConfig";
+import type { ResolvedThresholdConfig } from "../core/resolveConfig";
 import { resolveSegment } from "../core/resolveSegment";
 import { useLiveChartEngine } from "../core/useLiveChartEngine";
 import { pulseRadialOutset } from "../draw/line";
@@ -51,10 +54,12 @@ import { useDegen } from "../hooks/useDegen";
 import { useLiveChartHasData } from "../hooks/useLiveChartHasData";
 import { useLiveDot } from "../hooks/useLiveDot";
 import { useMarkers } from "../hooks/useMarkers";
+import { useReferenceLinePress } from "../hooks/useReferenceLinePress";
 import { useModeBlend } from "../hooks/useModeBlend";
 import { useMomentum } from "../hooks/useMomentum";
 import { useSegmentLineGradient } from "../hooks/useSegmentLineGradient";
 import { useSingleChartReverseMorphInputs } from "../hooks/useReverseMorphEngineInputs";
+import { useThreshold } from "../hooks/useThreshold";
 import { useTradeStream } from "../hooks/useTradeStream";
 import { useXAxis } from "../hooks/useXAxis";
 import { useYAxis } from "../hooks/useYAxis";
@@ -67,9 +72,19 @@ import { collectReferenceValues } from "../math/referenceLines";
 import {
   applyPaletteOverride,
   leftEdgeFadeColorsFromBgRgb,
+  parseColorRgb,
   resolveTheme,
 } from "../theme";
-import type { LiveChartProps, Marker, TradeEvent } from "../types";
+import type {
+  LiveChartPalette,
+  LiveChartProps,
+  Marker,
+  TradeEvent,
+} from "../types";
+import {
+  ThresholdBadgeOverlay,
+  ThresholdLineOverlay,
+} from "./ThresholdLineOverlay";
 import { AxisLabelOverlay } from "./AxisLabelOverlay";
 import { BadgeOverlay } from "./BadgeOverlay";
 import { CrosshairOverlay } from "./CrosshairOverlay";
@@ -81,12 +96,39 @@ import { MarkerOverlay } from "./MarkerOverlay";
 import { MultiSeriesTooltipStack } from "./MultiSeriesTooltipStack";
 import { ValueTextOverlay } from "./ValueTextOverlay";
 import { ReferenceLineOverlay } from "./ReferenceLineOverlay";
+import { ScrubActionOverlay } from "./ScrubActionOverlay";
 import { SegmentDividerOverlay } from "./SegmentDividerOverlay";
 import { TradeStreamOverlay } from "./TradeStreamOverlay";
 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;
+
+/**
+ * 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.
+ */
+function thresholdStops(
+  cfg: ResolvedThresholdConfig,
+  palette: LiveChartPalette,
+): { stroke: string[]; fill: string[] } {
+  const above = cfg.aboveColor ?? palette.candleUp;
+  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})`;
+  return {
+    stroke: [above, above, below, below],
+    fill: [aboveFill, aboveFill, belowFill, belowFill],
+  };
+}
+
 /**
  * Resolves props → configs → theme/layout → engine → per-frame derived values and
  * overlay hooks, returning a single render model. All the chart's wiring lives
@@ -145,10 +187,12 @@ function useLiveChartController({
   valueMomentumColor = false,
   referenceLines,
   segments,
+  threshold,
   gridStyle,
   palette: paletteOverride,
   metrics,
   scrub = true,
+  scrubAction,
   selectionDot,
   tradeStream,
   degen,
@@ -159,6 +203,8 @@ function useLiveChartController({
 
   // ── Callbacks ───────────────────────────────────────────────────────────
   onScrub,
+  onScrubAction,
+  onReferenceLinePress,
   onGestureStart,
   onGestureEnd,
   onDegenShake,
@@ -167,6 +213,9 @@ function useLiveChartController({
   const tradeStreamSV = tradeStream ?? emptyTradeStream;
   const emptyMarkers = useSharedValue<Marker[]>([]);
   const markersSV = markers ?? emptyMarkers;
+  // Stand-in threshold value so `useThreshold` can be called unconditionally
+  // (hooks can't be); the geometry is ignored when no threshold is configured.
+  const emptyThresholdValue = useSharedValue(0);
   const isCandle = mode === "candle";
 
   // ── Resolve feature configs ────────────────────────────────────────────
@@ -176,7 +225,12 @@ function useLiveChartController({
   const bottomLabelCfg = resolveAxisLabel(bottomLabel);
   const badgeCfg = resolveBadge(badge);
   const scrubCfg = resolveScrub(scrub);
+  // Static charts run no gestures, so scrub-action (tap/drag to lock a price) is off.
+  const scrubActionCfg = isStatic ? null : resolveScrubAction(scrubAction);
   const gradientCfg = isCandle ? null : resolveGradient(gradient);
+  // 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 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).
@@ -327,10 +381,23 @@ function useLiveChartController({
   // ── Per-frame derived values ───────────────────────────────────────────
   const { layoutWidth, layoutHeight, onLayout } = useCanvasLayout(engine);
 
-  const { linePath, fillPath } = useChartPaths(
+  // 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(
+    engine,
+    effectivePadding,
+    thresholdCfg?.value ?? emptyThresholdValue,
+  );
+  const thresholdStopColors = thresholdCfg
+    ? thresholdStops(thresholdCfg, palette)
+    : null;
+
+  const { linePath, fillPath, thresholdFillPath } = useChartPaths(
     engine,
     effectivePadding,
     reveal.morphT,
+    // Only build the band path when the fill is actually on.
+    thresholdCfg?.fill ? thresholdGeom.lineY : undefined,
   );
   const { upBodiesPath, downBodiesPath, upWicksPath, downWicksPath } =
     useCandlePaths(
@@ -404,6 +471,46 @@ function useLiveChartController({
       }
     : undefined;
 
+  const markersActive = markers != null;
+  // `projected` is used internally by the hit-test gesture; the overlay
+  // self-projects, so we only need the gesture + hit-test here. Built BEFORE
+  // `useCrosshair` so the scrub-action tap can defer to a marker under the finger.
+  const { tapGesture: markerTapGesture, hitTest: markerHitTest } = useMarkers(
+    engine,
+    effectivePadding,
+    markersSV,
+    !isStatic && markersActive,
+    markerHitRadius,
+    onMarkerHover,
+    undefined, // seriesSV — single-series has none
+    engine.data, // anchor value-less markers to the line
+    !isStatic, // static: no marker-projection loop
+  );
+
+  // Pressable reference-line badges (working orders / alerts). Built before
+  // `useCrosshair` so the scrub-action tap can defer to a badge under the finger.
+  const refPressActive = onReferenceLinePress != null && allRefLines.length > 0;
+  const { tapGesture: refLineTapGesture, hitTest: refLineHitTest } =
+    useReferenceLinePress(
+      engine,
+      effectivePadding,
+      allRefLines,
+      skiaFont,
+      formatValue,
+      !isStatic && refPressActive,
+      markerHitRadius,
+      onReferenceLinePress,
+    );
+
+  // Combined "defer" hit-test for the scrub-action place-tap: yield to a marker or
+  // a pressable badge under the finger so the tap is routed there instead of
+  // dropping a reticle. (Both hit-tests return false when their feature is off.)
+  /* istanbul ignore next -- worklet runs on the UI thread, not in Jest */
+  const deferTapHit = (x: number, y: number): boolean => {
+    "worklet";
+    return markerHitTest(x, y) || refLineHitTest(x, y);
+  };
+
   const crosshair = useCrosshair(
     engine,
     effectivePadding,
@@ -412,32 +519,51 @@ function useLiveChartController({
     formatTime,
     skiaFont,
     // Static charts have an inert pan gesture — no scrub work on the UI thread.
-    !isStatic && scrubCfg !== null,
+    // Scrub-action also needs the gesture live even when plain scrub is off.
+    !isStatic && (scrubCfg !== null || scrubActionCfg !== null),
     onScrub,
     candleOpts,
     scrubCfg?.panGestureDelay ?? 0,
     onGestureStart,
     onGestureEnd,
+    scrubActionCfg,
+    onScrubAction,
+    metricsCfg.badge,
+    markersActive || refPressActive ? deferTapHit : undefined,
   );
 
-  const markersActive = markers != null;
-  // `projected` is used internally by the hit-test gesture; the overlay
-  // self-projects, so we only need the gesture here.
-  const { tapGesture: markerTapGesture } = useMarkers(
-    engine,
-    effectivePadding,
-    markersSV,
-    !isStatic && markersActive,
-    markerHitRadius,
-    onMarkerHover,
-    undefined, // seriesSV — single-series has none
-    engine.data, // anchor value-less markers to the line
-    !isStatic, // static: no marker-projection loop
-  );
-
-  const rootGesture = markersActive
-    ? Gesture.Race(crosshair.gesture, markerTapGesture)
-    : crosshair.gesture;
+  // Scrub-action composes a Tap (place/move the reticle, press the badge, dismiss)
+  // ahead of the pan via Exclusive, so a tap is tried first and only becomes a
+  // drag (live-scrub, or lock-adjust once placed) if the finger moves. `Exclusive`
+  // (not `Race`) prevents a jittery tap from being swallowed by the pan.
+  const baseGesture =
+    scrubActionCfg !== null && crosshair.tapGesture
+      ? Gesture.Exclusive(crosshair.tapGesture, crosshair.gesture)
+      : crosshair.gesture;
+
+  // Overlay taps that hit-test discrete targets (marker dots, reference-line
+  // badges). They must all see each tap, so they're combined with `Simultaneous`
+  // (not `Race`, which cancels the loser and would drop one). The scrub-action
+  // action tap defers to them via `deferTapHit`, so a tap on an overlay is routed
+  // there instead of placing a reticle.
+  const overlayTaps = [
+    markersActive ? markerTapGesture : null,
+    refPressActive ? refLineTapGesture : null,
+  ].filter((g): g is NonNullable<typeof g> => g !== null);
+
+  let rootGesture = baseGesture;
+  if (overlayTaps.length > 0) {
+    const tapGroup =
+      overlayTaps.length === 1
+        ? overlayTaps[0]
+        : Gesture.Simultaneous(overlayTaps[0], overlayTaps[1]);
+    // With scrub-action the action tap shares the gesture space with the overlay
+    // taps (Simultaneous); without it the pan only needs to race the tap group.
+    rootGesture =
+      scrubActionCfg !== null
+        ? Gesture.Simultaneous(baseGesture, tapGroup)
+        : Gesture.Race(baseGesture, tapGroup);
+  }
 
   // ── Derived render values ──────────────────────────────────────────────
   const {
@@ -494,6 +620,7 @@ function useLiveChartController({
     xAxisCfg,
     badgeCfg,
     scrubCfg,
+    scrubActionCfg,
     gradientCfg,
     valueLineCfg,
     pulseCfg,
@@ -508,6 +635,10 @@ function useLiveChartController({
     resolvedSegments,
     hasRecolorSegments,
     segmentGradient,
+    thresholdCfg,
+    thresholdGeom,
+    thresholdStrokeColors: thresholdStopColors?.stroke ?? null,
+    thresholdFillColors: thresholdStopColors?.fill ?? null,
     badgeUsesRightGutter,
     // theme / layout / fonts
     palette,
@@ -531,6 +662,7 @@ function useLiveChartController({
     onLayout,
     linePath,
     fillPath,
+    thresholdFillPath,
     upBodiesPath,
     downBodiesPath,
     upWicksPath,
@@ -561,10 +693,13 @@ function useLiveChartController({
 
 type LiveChartModel = ReturnType<typeof useLiveChartController>;
 
-/** Main shaken chart stack: grid, fill, line/candles, axes, badge, dot, degen,
- *  markers, and the loading/empty art. The live value text is a separate layer
- *  (ChartValueOverlay) so it sits above the left-edge fade. */
-function ChartStack({ model }: { model: LiveChartModel }) {
+/**
+ * Background fills drawn BENEATH the left-edge fade: the y-axis grid, the area
+ * gradient, and the threshold profit/loss band. Split out from `ChartStack` so
+ * the fade's `dstOut` only softens the fills — the line and everything above it
+ * (drawn in `ChartStack`, after the fade) stay crisp at the left edge.
+ */
+function ChartFillLayer({ model }: { model: LiveChartModel }) {
   const {
     degenShakeTransform,
     yAxisCfg,
@@ -577,41 +712,16 @@ function ChartStack({ model }: { model: LiveChartModel }) {
     badgeUsesRightGutter,
     badgeCfg,
     gridStyleCfg,
+    metricsCfg,
     gradientCfg,
     fillPath,
     gradientEnd,
     gradientColors,
     gradientPositions,
-    valueLineCfg,
-    dotY,
-    allRefLines,
-    resolvedSegments,
-    hasRecolorSegments,
-    segmentGradient,
-    formatValue,
-    lineGroupOpacity,
-    linePath,
-    strokeWidth,
-    lineProp,
-    candleGroupOpacity,
-    upWicksPath,
-    downWicksPath,
-    upBodiesPath,
-    downBodiesPath,
-    xAxisCfg,
-    xAxisEntries,
-    dotX,
-    liveDotOpacity,
-    pulseCfg,
-    dotCfg,
-    degenCfg,
-    degenPack,
-    degenPackRevision,
-    markersActive,
-    markersSV,
-    emptyText,
-    metricsCfg,
-    layoutWidth,
+    thresholdCfg,
+    thresholdGeom,
+    thresholdFillPath,
+    thresholdFillColors,
   } = model;
 
   return (
@@ -647,6 +757,75 @@ function ChartStack({ model }: { model: LiveChartModel }) {
         </Group>
       )}
 
+      {/* 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>
+      )}
+    </Group>
+  );
+}
+
+/** Main shaken chart stack drawn ABOVE the left-edge fade so the line stays crisp:
+ *  segment dividers, value/reference lines, the line/candles, axes, dot, degen,
+ *  markers, and the loading/empty art. Background fills are in `ChartFillLayer`
+ *  (below the fade); the live value text is `ChartValueOverlay` (above the fade). */
+function ChartStack({ model }: { model: LiveChartModel }) {
+  const {
+    degenShakeTransform,
+    reveal,
+    engine,
+    effectivePadding,
+    palette,
+    skiaFont,
+    badgeCfg,
+    valueLineCfg,
+    dotY,
+    allRefLines,
+    resolvedSegments,
+    hasRecolorSegments,
+    segmentGradient,
+    thresholdCfg,
+    thresholdGeom,
+    thresholdStrokeColors,
+    formatValue,
+    lineGroupOpacity,
+    linePath,
+    strokeWidth,
+    lineProp,
+    candleGroupOpacity,
+    upWicksPath,
+    downWicksPath,
+    upBodiesPath,
+    downBodiesPath,
+    xAxisCfg,
+    xAxisEntries,
+    dotX,
+    liveDotOpacity,
+    pulseCfg,
+    dotCfg,
+    degenCfg,
+    degenPack,
+    degenPackRevision,
+    markersActive,
+    markersSV,
+    emptyText,
+    metricsCfg,
+    layoutWidth,
+  } = model;
+
+  return (
+    <Group transform={degenShakeTransform}>
       {/* Segment dividers + labels (behind the line). The scrub-focus emphasis is
           painted on the line stroke itself, below — this overlay draws no fill. */}
       {resolvedSegments.map((seg, i) => (
@@ -673,9 +852,12 @@ function ChartStack({ model }: { model: LiveChartModel }) {
         </Group>
       )}
 
-      {allRefLines.map((rl) => (
+      {/* Index keys: reference lines are a positional array and two may share
+          value + label (e.g. duplicate working orders at the same price), which a
+          content-derived key would collapse to one. */}
+      {allRefLines.map((rl, i) => (
         <ReferenceLineOverlay
-          key={`${rl.value ?? ""}:${rl.valueFrom ?? ""}:${rl.valueTo ?? ""}:${rl.from ?? ""}:${rl.to ?? ""}:${rl.label ?? ""}`}
+          key={i}
           engine={engine}
           padding={effectivePadding}
           line={rl}
@@ -685,6 +867,21 @@ function ChartStack({ model }: { model: LiveChartModel }) {
         />
       ))}
 
+      {/* Threshold marker line + label (behind the chart line). */}
+      {thresholdCfg?.line && (
+        <ThresholdLineOverlay
+          engine={engine}
+          padding={effectivePadding}
+          lineY={thresholdGeom.lineY}
+          visible={thresholdGeom.visible}
+          value={thresholdCfg.value}
+          cfg={thresholdCfg.line}
+          palette={palette}
+          font={skiaFont}
+          formatValue={formatValue}
+        />
+      )}
+
       {/* Chart line (fades out in candle mode). When segments recolor the line, a
           full-width gradient paints the base color outside segments and each
           segment's color within — so the line itself is recolored/faded (alpha in
@@ -698,7 +895,16 @@ function ChartStack({ model }: { model: LiveChartModel }) {
           strokeJoin="round"
           color={lineProp?.color ?? palette.line}
         >
-          {hasRecolorSegments ? (
+          {thresholdCfg && thresholdStrokeColors ? (
+            // Vertical hard split at the threshold Y — supersedes line.colors and
+            // segment recoloring for the stroke while a threshold is set.
+            <LinearGradient
+              start={vec(0, 0)}
+              end={thresholdGeom.gradientEnd}
+              colors={thresholdStrokeColors}
+              positions={thresholdGeom.splitPositions}
+            />
+          ) : hasRecolorSegments ? (
             <LinearGradient
               start={vec(0, 0)}
               end={segmentGradient.gradientEnd}
@@ -794,7 +1000,24 @@ function ChartStack({ model }: { model: LiveChartModel }) {
         </Group>
       )}
 
-      {/* Loading / empty state — before left-edge fade so the squiggle/empty art fades like the chart */}
+      {/* Threshold label badge — on top of the line/dot/markers so it's never
+          painted over (the dashed marker line itself stays behind the line, above). */}
+      {thresholdCfg?.line && (
+        <ThresholdBadgeOverlay
+          engine={engine}
+          padding={effectivePadding}
+          lineY={thresholdGeom.lineY}
+          visible={thresholdGeom.visible}
+          value={thresholdCfg.value}
+          cfg={thresholdCfg.line}
+          palette={palette}
+          font={skiaFont}
+          formatValue={formatValue}
+        />
+      )}
+
+      {/* Loading / empty state — drawn with the line stack (above the fade) so the
+          squiggle/empty art stays crisp, consistent with the line. */}
       <LoadingOverlay
         engine={engine}
         padding={effectivePadding}
@@ -945,6 +1168,73 @@ function ChartBadgeLayer({ model }: { model: LiveChartModel }) {
   );
 }
 
+/** Reference-line badges + labels, drawn ABOVE the left-edge fade so a
+ *  left-pinned badge (off-axis / `labelBadge`) and any label stay crisp instead
+ *  of being erased by the fade's dstOut. The lines/bands themselves render in the
+ *  base pass inside ChartStack (behind the chart content). */
+function ChartRefBadgeLayer({ model }: { model: LiveChartModel }) {
+  const {
+    allRefLines,
+    engine,
+    effectivePadding,
+    palette,
+    formatValue,
+    skiaFont,
+    degenShakeTransform,
+  } = model;
+  if (allRefLines.length === 0) return null;
+  return (
+    <Group transform={degenShakeTransform}>
+      {allRefLines.map((rl, i) => (
+        <ReferenceLineOverlay
+          key={i}
+          engine={engine}
+          padding={effectivePadding}
+          line={rl}
+          palette={palette}
+          formatValue={formatValue}
+          font={skiaFont}
+          badgeLayer
+        />
+      ))}
+    </Group>
+  );
+}
+
+/** Scrub-action ("order ticket") reticle + action badge. Drawn OUTSIDE the degen
+ *  shake group so the rendered badge stays aligned with the untransformed tap
+ *  hit-test; it tracks the locked reticle, not the shaken stack. */
+function ChartScrubActionLayer({ model }: { model: LiveChartModel }) {
+  const { scrubActionCfg, crosshair, engine, effectivePadding, palette, skiaFont } =
+    model;
+  if (
+    !scrubActionCfg ||
+    !crosshair.lockActive ||
+    !crosshair.lockX ||
+    !crosshair.lockY ||
+    !crosshair.actionBadge
+  ) {
+    return null;
+  }
+  return (
+    <ScrubActionOverlay
+      lockActive={crosshair.lockActive}
+      lockX={crosshair.lockX}
+      lockY={crosshair.lockY}
+      actionBadge={crosshair.actionBadge}
+      timeBadge={crosshair.timeBadge}
+      engine={engine}
+      padding={effectivePadding}
+      palette={palette}
+      font={skiaFont}
+      icon={scrubActionCfg.icon}
+      lineColor={scrubActionCfg.lineColor}
+      background={scrubActionCfg.background}
+      iconColor={scrubActionCfg.iconColor}
+    />
+  );
+}
+
 export function LiveChart(props: LiveChartProps) {
   const model = useLiveChartController(props);
   const {
@@ -973,8 +1263,10 @@ export function LiveChart(props: LiveChartProps) {
         accessibilityRole={accessibilityRole}
       >
         <Canvas style={{ flex: 1 }}>
-          {/* Shaken chart stack — left-edge fade is a sibling below so dstOut runs in canvas space */}
-          <ChartStack model={model} />
+          {/* Background fills first, then the left-edge fade (a canvas-space sibling
+              so dstOut blends correctly), then the line stack on top — so the fade
+              softens only the fills and the line stays crisp at the left edge. */}
+          <ChartFillLayer model={model} />
 
           {leftEdgeFadeCfg && (
             <LeftEdgeFade
@@ -986,6 +1278,12 @@ export function LiveChart(props: LiveChartProps) {
             />
           )}
 
+          {/* Line stack above the fade so the line stays crisp at the left edge. */}
+          <ChartStack model={model} />
+
+          {/* Reference-line badges + labels above the fade so they stay crisp. */}
+          <ChartRefBadgeLayer model={model} />
+
           <ChartValueOverlay model={model} />
 
           <ChartScrubLayer model={model} />
@@ -993,6 +1291,9 @@ export function LiveChart(props: LiveChartProps) {
           {/* Live-price badge on top of the scrub dim so the dim never clips
               its left edge (the badge tracks the live value, not the scrub). */}
           <ChartBadgeLayer model={model} />
+
+          {/* Scrub-action reticle + action badge — top-most, no shake transform. */}
+          <ChartScrubActionLayer model={model} />
         </Canvas>
 
         {/* RN labels floated over the canvas (sibling of <Canvas>, an RN view).

package/src/components/LiveChartSeries.tsx

@@ -448,9 +448,12 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
         </Group>
       )}
 
-      {allRefLines.map((rl) => (
+      {/* Index keys: reference lines are a positional array and two may share
+          value + label (e.g. duplicate working orders at the same price), which a
+          content-derived key would collapse to one. */}
+      {allRefLines.map((rl, i) => (
         <ReferenceLineOverlay
-          key={`${rl.value ?? ""}:${rl.valueFrom ?? ""}:${rl.valueTo ?? ""}:${rl.from ?? ""}:${rl.to ?? ""}:${rl.label ?? ""}`}
+          key={i}
           engine={engine}
           padding={effectivePadding}
           line={rl}
@@ -589,6 +592,37 @@ function SeriesValueLabelLayer({ model }: { model: LiveChartSeriesModel }) {
   );
 }
 
+/** Reference-line badges + labels, drawn ABOVE the left-edge fade so they stay
+ *  crisp (the lines/bands render in the base pass inside SeriesChartStack). */
+function SeriesRefBadgeLayer({ model }: { model: LiveChartSeriesModel }) {
+  const {
+    allRefLines,
+    engine,
+    effectivePadding,
+    palette,
+    formatValue,
+    skiaFont,
+    degenShakeTransform,
+  } = model;
+  if (allRefLines.length === 0) return null;
+  return (
+    <Group transform={degenShakeTransform}>
+      {allRefLines.map((rl, i) => (
+        <ReferenceLineOverlay
+          key={i}
+          engine={engine}
+          padding={effectivePadding}
+          line={rl}
+          palette={palette}
+          formatValue={formatValue}
+          font={skiaFont}
+          badgeLayer
+        />
+      ))}
+    </Group>
+  );
+}
+
 export function LiveChartSeries(props: LiveChartSeriesProps) {
   const model = useLiveChartSeriesController(props);
   const {
@@ -664,6 +698,9 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
               />
             )}
 
+            {/* Reference-line badges + labels above the fade so they stay crisp. */}
+            <SeriesRefBadgeLayer model={model} />
+
             {scrubCfg && (
               <CrosshairLine
                 scrubX={crosshair.scrubX}