react-native-livechart 4.17.0 → 4.19.0

package/src/components/LiveChart.tsx

@@ -69,7 +69,12 @@ import {
 } from "../core/liveIndicatorVisibility";
 import { resolveSegment, type ResolvedSegment } from "../core/resolveSegment";
 import { useLiveChartEngine } from "../core/useLiveChartEngine";
-import { pulseRadialOutset } from "../draw/line";
+import {
+  computeCandleFocusPassOpacity,
+  computeCandleFocusClip,
+  HIDDEN_CANDLE_FOCUS_CLIP,
+} from "../draw/candle";
+import { dotGlowRadialOutset, pulseRadialOutset } from "../draw/line";
 import { resolveChartLayout } from "../hooks/resolveChartLayout";
 import { useBadge } from "../hooks/useBadge";
 import { useCandlePaths, useCandleWidthLerp } from "../hooks/useCandlePaths";
@@ -87,12 +92,13 @@ import { useMarkers } from "../hooks/useMarkers";
 import { useReferenceDrag } from "../hooks/useReferenceDrag";
 import { useReferenceLinePress } from "../hooks/useReferenceLinePress";
 import { useModeBlend } from "../hooks/useModeBlend";
-import {
-  resolveMomentumProp,
-  useMomentum,
-} from "../hooks/useMomentum";
+import { resolveMomentumProp, useMomentum } from "../hooks/useMomentum";
 import { AXIS_GRAB_MIN_PX, usePanScroll } from "../hooks/usePanScroll";
 import { usePinchZoom } from "../hooks/usePinchZoom";
+import {
+  SERIES_INDICATOR_FADE_MS,
+  useSeriesIndicatorOpacity,
+} from "../hooks/useSeriesIndicatorOpacity";
 import { useVisibleRange } from "../hooks/useVisibleRange";
 import { useSingleChartReverseMorphInputs } from "../hooks/useReverseMorphEngineInputs";
 import {
@@ -127,6 +133,7 @@ import {
   resolveTheme,
 } from "../theme";
 import type {
+  CandlePoint,
   LiveChartPalette,
   LiveChartPoint,
   LiveChartProps,
@@ -380,9 +387,17 @@ function useLiveChartController({
   // ring never starts (the DotOverlay reads `pulseCfg`, so null = no pulse).
   const pulseCfg = isStatic ? null : resolvePulse(pulse);
   const dotCfg = resolveDot(dot);
+  // `badge.followViewEdge` wins over `dot.trackWhileParked`: an edge-pinned dot
+  // must stay aligned with its badge, so the tracking flag is ignored.
+  const dotTracksParked =
+    dotCfg.trackWhileParked && !(badgeCfg?.followViewEdge ?? false);
   const selectionDotCfg = resolveSelectionDot(selectionDot);
-  // Outer footprint of the dot (color-filled radius plus the halo ring).
-  const dotOuterRadius = dotCfg.radius + (dotCfg.ring?.width ?? 0);
+  // Outer visible footprint of the dot, including its crisp ring and optional
+  // blurred glow. Used by scrub dimming so neither effect leaks through.
+  const dotOuterRadius = Math.max(
+    dotCfg.radius + (dotCfg.ring?.width ?? 0),
+    dotCfg.glow ? dotGlowRadialOutset(dotCfg.glow.radius, dotCfg.glow.blur) : 0,
+  );
   const gridStyleCfg = resolveGridStyle(gridStyle);
   // Static charts run zero loops: force degen off so `useDegen`'s frame callback
   // never starts (also passed `isStatic` below as a belt-and-braces autostart gate).
@@ -409,12 +424,14 @@ function useLiveChartController({
     const active = dragActive.get();
     const cur = dragValues.get();
     const seeded = seededRef.current;
-    dragValues.set(allRefLines.map((l, i) => {
-      const prop = l.value ?? 0;
-      if (active[i]) return cur[i] ?? prop; // mid-drag → keep the dragged value
-      if (l.value !== seeded[i]) return prop; // prop changed → adopt (controlled)
-      return cur[i] ?? prop; // unchanged → keep current (uncontrolled persist)
-    }));
+    dragValues.set(
+      allRefLines.map((l, i) => {
+        const prop = l.value ?? 0;
+        if (active[i]) return cur[i] ?? prop; // mid-drag → keep the dragged value
+        if (l.value !== seeded[i]) return prop; // prop changed → adopt (controlled)
+        return cur[i] ?? prop; // unchanged → keep current (uncontrolled persist)
+      }),
+    );
     seededRef.current = allRefLines.map((l) => l.value);
     if (dragActive.get().length !== allRefLines.length) {
       dragActive.set(allRefLines.map((_, i) => active[i] ?? false));
@@ -649,6 +666,7 @@ function useLiveChartController({
     formatValue,
     currentValue: valueLayoutSample,
     pulse: pulseConfig,
+    dotGlow: dotCfg.glow,
     volumeBandHeight,
   });
 
@@ -671,6 +689,10 @@ function useLiveChartController({
     isStatic,
     transitionsCfg.reveal,
   );
+  const seriesIndicatorOpacity = useSeriesIndicatorOpacity(
+    resolvedSeriesOpacity,
+    isStatic || transitionsCfg.reveal === 0 ? 0 : SERIES_INDICATOR_FADE_MS,
+  );
 
   // After data clears, keep last snapshot until morphT finishes dropping (web parity).
   const { lineEngineData, candlesEngine, liveEngine } =
@@ -765,7 +787,8 @@ function useLiveChartController({
       if (
         referenceLineForm(l) !== "line" ||
         l.value === undefined ||
-        refLineCustom[i] || refLineOffAxisCustom[i]
+        refLineCustom[i] ||
+        refLineOffAxisCustom[i]
       ) {
         ys.push(-1);
         continue;
@@ -922,6 +945,7 @@ function useLiveChartController({
     thresholdCfg?.fill && thresholdSeriesHasPoints
       ? thresholdSeriesGeom.samples
       : undefined,
+    lineProp?.simplify,
   );
 
   // Area-dots fill shader color as a vec4 (channels 0..1), with the config
@@ -944,6 +968,7 @@ function useLiveChartController({
     effectivePadding,
     engine.edgeValue,
     badgeCfg?.followViewEdge ?? false,
+    dotCfg.trackWhileParked,
   );
 
   const momentumSV = useMomentum(engine, momentum);
@@ -963,7 +988,8 @@ function useLiveChartController({
   const displayCandleWidth = useCandleWidthLerp(
     candleWidth,
     transitionsCfg.candleLerpSpeed,
-    !isStatic && isCandle,
+    !isStatic,
+    isCandle,
   );
 
   // ── Overlay hooks ─────────────────────────────────────────────────────
@@ -1095,6 +1121,8 @@ function useLiveChartController({
       : 0,
     scrollActive,
     scrubCfg?.clampToPlot ?? false,
+    // Candle mode: snap the crosshair to candle centers (tick-to-tick).
+    scrubCfg?.snapToCandles ?? false,
   );
 
   // Capture only the shared value in the worklets below. Referencing
@@ -1315,34 +1343,31 @@ function useLiveChartController({
     timeScroll,
     badgeCfg?.followViewEdge ?? false,
   );
+  // A dot that tracks the true live point while parked is exempt from the
+  // scroll-back hide: it no longer marks an off-screen price, and it hides
+  // itself once the live point leaves the window (`useLiveDot`'s sentinel).
   const liveDotOpacity = useDerivedValue(
     () =>
       reveal.dotOpacity.value *
       (selectionDotDuringScrub && crosshairScrubActive.value ? 0 : 1) *
       liveIndicatorScrollOpacity(
-        hideLiveOnScrollBack,
+        hideLiveOnScrollBack && !dotTracksParked,
         engine.viewEnd.value,
       ) *
-      resolvedSeriesOpacity.value,
+      seriesIndicatorOpacity.value,
   );
   // Same scrolled-back gating for the value line: it would draw a dashed line
   // at the live value's Y — a price that isn't in the scrolled-back view.
   const valueLineOpacity = useDerivedValue(
     () =>
       reveal.lineOpacity.value *
-      liveIndicatorScrollOpacity(
-        hideLiveOnScrollBack,
-        engine.viewEnd.value,
-      ) *
+      liveIndicatorScrollOpacity(hideLiveOnScrollBack, engine.viewEnd.value) *
       resolvedSeriesOpacity.value,
   );
   const liveBadgeOpacity = useDerivedValue(
     () =>
       reveal.badgeOpacity.value *
-      liveIndicatorScrollOpacity(
-        hideLiveOnScrollBack,
-        engine.viewEnd.value,
-      ) *
+      liveIndicatorScrollOpacity(hideLiveOnScrollBack, engine.viewEnd.value) *
       resolvedSeriesOpacity.value,
   );
 
@@ -1396,6 +1421,7 @@ function useLiveChartController({
     valueLineCfg,
     pulseCfg,
     dotCfg,
+    dotTracksParked,
     dotOuterRadius,
     gridStyleCfg,
     degenCfg,
@@ -1525,8 +1551,7 @@ function ChartWithDegen({
   model: LiveChartModel;
   yAxisEntries: YAxisEntries | null;
 }) {
-  const { engine, dotX, dotY, momentumSV, degenCfg, onDegenShake, isStatic } =
-    model;
+  const { engine, dotX, dotY, momentumSV, degenCfg, onDegenShake } = model;
   const state = useDegen(
     engine,
     dotX,
@@ -1534,7 +1559,6 @@ function ChartWithDegen({
     momentumSV,
     degenCfg,
     onDegenShake,
-    isStatic,
   );
   return <ChartView model={model} yAxisEntries={yAxisEntries} degen={state} />;
 }
@@ -1767,6 +1791,42 @@ function ChartFillLayer({
   );
 }
 
+type CandlePaths = ReturnType<typeof useCandlePaths>;
+
+/** One batched candle pass: two body paths and two wick paths. */
+function CandlePathBatch({
+  paths,
+  wickWidth,
+  palette,
+}: {
+  paths: CandlePaths;
+  wickWidth: number;
+  palette: LiveChartPalette;
+}) {
+  return (
+    <>
+      <Path
+        path={paths.upWicksPath}
+        style="stroke"
+        strokeWidth={wickWidth}
+        color={palette.wickUp}
+      />
+      <Path
+        path={paths.downWicksPath}
+        style="stroke"
+        strokeWidth={wickWidth}
+        color={palette.wickDown}
+      />
+      <Path path={paths.upBodiesPath} style="fill" color={palette.candleUp} />
+      <Path
+        path={paths.downBodiesPath}
+        style="fill"
+        color={palette.candleDown}
+      />
+    </>
+  );
+}
+
 /**
  * Candle/volume paths are a mode-specific subsystem. Keeping their hooks in a
  * child means a line chart never registers the candle-width frame callback or
@@ -1788,15 +1848,10 @@ function ChartCandleLayer({ model }: { model: LiveChartModel }) {
     volumeOpacity,
     volumeUpColor,
     volumeDownColor,
+    scrubCfg,
+    crosshair,
   } = model;
-  const {
-    upBodiesPath,
-    downBodiesPath,
-    upWicksPath,
-    downWicksPath,
-    upBarsPath,
-    downBarsPath,
-  } = useCandlePaths(
+  const paths = useCandlePaths(
     engine,
     effectivePadding,
     candlesEngine,
@@ -1807,31 +1862,119 @@ function ChartCandleLayer({ model }: { model: LiveChartModel }) {
     volumeBandHeight,
     volumeCfg?.radius ?? 0,
   );
+  const focusOtherCandles = scrubCfg?.dimTarget === "otherCandles";
+  const candleDimOpacity = scrubCfg?.dimOpacity ?? 1;
+  const candleDimFadeMs = scrubCfg?.dimFadeMs ?? 0;
+  // Destructure the two SharedValues before entering worklets. Closing over the
+  // whole crosshair object would also serialize its RNGH gesture instances.
+  const scrubActive = crosshair.scrubActive;
+  // ChartCandleLayer is single-series only; useCrosshair always supplies this
+  // value (it is optional on the shared state type only for LiveChartSeries).
+  const scrubCandle = crosshair.scrubCandle!;
+  // Keep the last selection after scrubCandle clears so its clipped full-
+  // strength pass can cover the base batch until the release fade completes.
+  const lastScrubCandle = useSharedValue<CandlePoint | null>(null);
+  useAnimatedReaction(
+    () => (focusOtherCandles ? scrubCandle.get() : null),
+    (candle) => {
+      if (candle) lastScrubCandle.set(candle);
+    },
+  );
+  const inactiveCandleOpacity = useDerivedValue(() => {
+    const target =
+      focusOtherCandles && scrubActive.get() && scrubCandle.get()
+        ? candleDimOpacity
+        : 1;
+    return candleDimFadeMs > 0
+      ? withTiming(target, { duration: candleDimFadeMs })
+      : target;
+  }, [
+    focusOtherCandles,
+    scrubActive,
+    scrubCandle,
+    candleDimOpacity,
+    candleDimFadeMs,
+  ]);
+  const focusedCandleOpacity = useDerivedValue(() => {
+    const currentCandle = scrubCandle.get();
+    const focusCandle = currentCandle ?? lastScrubCandle.get();
+    if (!focusOtherCandles || !focusCandle) return 0;
+    return computeCandleFocusPassOpacity(
+      scrubActive.get(),
+      currentCandle !== null,
+      inactiveCandleOpacity.get(),
+    );
+  }, [
+    focusOtherCandles,
+    scrubActive,
+    scrubCandle,
+    lastScrubCandle,
+    inactiveCandleOpacity,
+  ]);
+  const focusedCandleClip = useDerivedValue(() => {
+    if (!focusOtherCandles) {
+      return HIDDEN_CANDLE_FOCUS_CLIP;
+    }
+    const focusCandle = scrubCandle.get() ?? lastScrubCandle.get();
+    return computeCandleFocusClip(
+      focusCandle,
+      effectivePadding,
+      engine.canvasWidth.get(),
+      engine.canvasHeight.get(),
+      engine.timestamp.get() - engine.displayWindow.get(),
+      engine.displayWindow.get(),
+      displayCandleWidth.get(),
+    );
+  }, [
+    focusOtherCandles,
+    scrubCandle,
+    lastScrubCandle,
+    effectivePadding,
+    engine.canvasWidth,
+    engine.canvasHeight,
+    engine.timestamp,
+    engine.displayWindow,
+    displayCandleWidth,
+  ]);
 
   return (
     <Group opacity={seriesOpacity}>
       <Group opacity={candleGroupOpacity}>
-        <Path
-          path={upWicksPath}
-          style="stroke"
-          strokeWidth={metricsCfg.candle.wickWidth}
-          color={palette.wickUp}
-        />
-        <Path
-          path={downWicksPath}
-          style="stroke"
-          strokeWidth={metricsCfg.candle.wickWidth}
-          color={palette.wickDown}
-        />
-        <Path path={upBodiesPath} style="fill" color={palette.candleUp} />
-        <Path path={downBodiesPath} style="fill" color={palette.candleDown} />
+        {focusOtherCandles ? (
+          <>
+            <Group opacity={inactiveCandleOpacity}>
+              <CandlePathBatch
+                paths={paths}
+                wickWidth={metricsCfg.candle.wickWidth}
+                palette={palette}
+              />
+            </Group>
+            <Group opacity={focusedCandleOpacity} clip={focusedCandleClip}>
+              <CandlePathBatch
+                paths={paths}
+                wickWidth={metricsCfg.candle.wickWidth}
+                palette={palette}
+              />
+            </Group>
+          </>
+        ) : (
+          <CandlePathBatch
+            paths={paths}
+            wickWidth={metricsCfg.candle.wickWidth}
+            palette={palette}
+          />
+        )}
       </Group>
 
       {volumeCfg && (
         <Group opacity={candleGroupOpacity}>
           <Group opacity={volumeOpacity}>
-            <Path path={upBarsPath} style="fill" color={volumeUpColor} />
-            <Path path={downBarsPath} style="fill" color={volumeDownColor} />
+            <Path path={paths.upBarsPath} style="fill" color={volumeUpColor} />
+            <Path
+              path={paths.downBarsPath}
+              style="fill"
+              color={volumeDownColor}
+            />
           </Group>
         </Group>
       )}
@@ -1893,6 +2036,7 @@ function ChartStack({
     liveDotOpacity,
     pulseCfg,
     dotCfg,
+    dotTracksParked,
     degenCfg,
     markersActive,
     markersSV,
@@ -2057,10 +2201,14 @@ function ChartStack({
             dotY={dotY}
             palette={palette}
             pulse={pulseCfg}
+            glow={dotCfg.glow}
             radius={dotCfg.radius}
             ring={dotCfg.ring}
             color={dotCfg.color}
             viewEnd={engine.viewEnd}
+            // A tracking dot marks the honest live position while parked, so
+            // its heartbeat keeps pulsing (useLiveDot tracks the true point).
+            pulseWhileParked={dotTracksParked}
           />
         </Group>
       )}
@@ -2204,6 +2352,10 @@ function ChartScrubLayer({
   // Skia tooltip is suppressed here while it's active — the line pill in line
   // mode, and the OHLC stack in candle mode (see the stack gate below).
   const customTooltipActive = renderTooltip != null;
+  // `otherCandles` is candle-only. If a consumer switches this chart to line
+  // mode without also rewriting its scrub config, preserve the standard line
+  // scrub (guide, selection dot, and trailing fade).
+  const dimsFuture = !isCandle || scrubCfg?.dimTarget === "future";
 
   if (!scrubCfg) return null;
 
@@ -2228,11 +2380,12 @@ function ChartScrubLayer({
           font={skiaFont}
           showTooltip={scrubCfg.tooltip && !customTooltipActive}
           lineTop={crosshair.tooltipLineTop}
-          selectionDot={selectionDot}
+          showLine={dimsFuture}
+          selectionDot={dimsFuture ? selectionDot : null}
           selectionY={crosshair.scrubDotY}
           scrubActive={crosshair.scrubActive}
           selectionColor={selectionColor}
-          dimOpacity={scrubCfg.dimOpacity}
+          dimOpacity={dimsFuture ? scrubCfg.dimOpacity : 1}
           liveDotExtent={liveDotExtent}
           crosshairLineColor={scrubCfg.crosshairLineColor}
           crosshairStrokeWidth={scrubCfg.crosshairStrokeWidth}
@@ -2241,7 +2394,9 @@ function ChartScrubLayer({
           crosshairFadeDistance={scrubCfg.crosshairFadeDistance}
           crosshairLineCap={scrubCfg.crosshairLineCap}
           crosshairDash={scrubCfg.crosshairDash}
-          crosshairDimColor={scrubCfg.crosshairDimColor}
+          crosshairDimColor={
+            dimsFuture ? scrubCfg.crosshairDimColor : undefined
+          }
           tooltipBackground={scrubCfg.tooltipBackground}
           tooltipColor={scrubCfg.tooltipColor}
           tooltipBorderColor={scrubCfg.tooltipBorderColor}

package/src/components/LiveChartSeries.tsx

@@ -50,7 +50,7 @@ import {
   resolveZoom,
 } from "../core/resolveConfig";
 import { useLiveChartSeriesEngine } from "../core/useLiveChartSeriesEngine";
-import { pulseRadialOutset } from "../draw/line";
+import { dotGlowRadialOutset, pulseRadialOutset } from "../draw/line";
 import { resolveChartLayout } from "../hooks/resolveChartLayout";
 import { useCanvasLayout } from "../hooks/useCanvasLayout";
 import { useChartReveal } from "../hooks/useChartReveal";
@@ -64,6 +64,10 @@ import { useMultiSeriesLinePaths } from "../hooks/useMultiSeriesLinePaths";
 import { usePanScroll } from "../hooks/usePanScroll";
 import { usePinchZoom } from "../hooks/usePinchZoom";
 import { useMultiSeriesReverseMorphInputs } from "../hooks/useReverseMorphEngineInputs";
+import {
+  SERIES_INDICATOR_FADE_MS,
+  useSeriesIndicatorOpacity,
+} from "../hooks/useSeriesIndicatorOpacity";
 import { useVisibleRange } from "../hooks/useVisibleRange";
 import { useXAxis } from "../hooks/useXAxis";
 import { useYAxis } from "../hooks/useYAxis";
@@ -246,9 +250,12 @@ function useLiveChartSeriesController({
   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).
-  // Used to keep the gutter labels clear of the haloed dot.
-  const dotOuterRadius = dotCfg.radius + (dotCfg.ring?.width ?? 0);
+  // Outer visible footprint of a dot, including its crisp ring and optional
+  // blurred glow. Used to keep gutter labels clear of every dot effect.
+  const dotOuterRadius = Math.max(
+    dotCfg.radius + (dotCfg.ring?.width ?? 0),
+    dotCfg.glow ? dotGlowRadialOutset(dotCfg.glow.radius, dotCfg.glow.blur) : 0,
+  );
   const legendCfg = resolveLegend(legendProp);
   const degenCfg = resolveDegen(degen);
   const metricsCfg = resolveMetrics(metrics);
@@ -341,6 +348,7 @@ function useLiveChartSeriesController({
     formatValue,
     currentValue: representativeValue,
     pulse: dotCfg.pulse,
+    dotGlow: dotCfg.glow,
     multiSeriesDotRadius: dotOuterRadius,
     multiSeriesValueLabel: dotCfg.valueLabel,
     multiSeriesMaxLabelWidth: maxSeriesLabelWidth,
@@ -367,6 +375,10 @@ function useLiveChartSeriesController({
     false,
     transitionsCfg.reveal,
   );
+  const seriesIndicatorOpacity = useSeriesIndicatorOpacity(
+    resolvedSeriesOpacity,
+    transitionsCfg.reveal === 0 ? 0 : SERIES_INDICATOR_FADE_MS,
+  );
 
   const effectiveSeries = useMultiSeriesReverseMorphInputs({
     series,
@@ -397,6 +409,7 @@ function useLiveChartSeriesController({
     engine,
     effectivePadding,
     activeSeriesCount,
+    lineProp?.simplify,
   );
 
   // Per-series colors and stroke styles, derived from the off-render snapshot
@@ -597,6 +610,7 @@ function useLiveChartSeriesController({
     // passthrough props the render needs
     series,
     seriesOpacity: resolvedSeriesOpacity,
+    seriesIndicatorOpacity,
     style,
     canvasMode,
     accessibilityLabel,
@@ -709,6 +723,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
     renderMarker,
     series,
     seriesOpacity,
+    seriesIndicatorOpacity,
     emptyText,
     loadingAxisLabels,
     metricsCfg,
@@ -798,7 +813,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
       )}
 
       {dotCfg.show && (
-        <Group opacity={seriesOpacity}>
+        <Group opacity={seriesIndicatorOpacity}>
           <Group opacity={reveal.dotOpacity}>
             <MultiSeriesDots
               engine={engine}
@@ -806,6 +821,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
               colors={lineColors}
               radius={dotCfg.radius}
               ring={dotCfg.ring}
+              glow={dotCfg.glow}
               ringColor={palette.badgeOuterBg}
               color={dotCfg.color}
               pulse={dotCfg.pulse}
@@ -953,7 +969,11 @@ function SeriesRefBadgeLayer({ model }: { model: LiveChartSeriesModel }) {
 }
 
 /** Owns the price/time projection worklets for the multi-series custom overlay. */
-function SeriesCustomConsumerOverlay({ model }: { model: LiveChartSeriesModel }) {
+function SeriesCustomConsumerOverlay({
+  model,
+}: {
+  model: LiveChartSeriesModel;
+}) {
   const { engine, effectivePadding, renderOverlay } = model;
   const overlayContext = useChartOverlayContext(engine, effectivePadding);
   return <ChartOverlayLayer render={renderOverlay!} context={overlayContext} />;
@@ -1146,12 +1166,10 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
                 dimOpacity={scrubCfg.dimOpacity}
                 liveDotExtent={liveDotExtent}
                 crosshairLineColor={
-                  seriesTooltipCfg?.guideColor ??
-                  scrubCfg.crosshairLineColor
+                  seriesTooltipCfg?.guideColor ?? scrubCfg.crosshairLineColor
                 }
                 crosshairStrokeWidth={
-                  seriesTooltipCfg?.guideWidth ??
-                  scrubCfg.crosshairStrokeWidth
+                  seriesTooltipCfg?.guideWidth ?? scrubCfg.crosshairStrokeWidth
                 }
                 crosshairOvershoot={scrubCfg.crosshairOvershoot}
                 crosshairFade={scrubCfg.crosshairFade}

package/src/components/MarkerOverlay.tsx

@@ -388,7 +388,11 @@ export function MarkerOverlay({
         lineData: lineData?.get(),
         lineLinear,
       });
-      clusterMarkers(ms, buf, { config: cluster });
+      clusterMarkers(ms, buf, {
+        config: cluster,
+        minY: 0,
+        maxY: engine.canvasHeight.get(),
+      });
       const atlasFrames = atlasFrameRef.current!;
       atlasFrames.tick = !atlasFrames.tick;
       const frame = atlasFrames.tick ? atlasFrames.a : atlasFrames.b;

package/src/components/MultiSeriesDots.tsx

@@ -1,8 +1,9 @@
-import { Circle, Group } from "@shopify/react-native-skia";
+import { BlurMask, Circle, Group } from "@shopify/react-native-skia";
 
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
 import type { ChartPadding } from "../draw/line";
 import type {
+  ResolvedDotGlowConfig,
   ResolvedDotRingConfig,
   ResolvedPulseConfig,
 } from "../core/resolveConfig";
@@ -18,6 +19,7 @@ function SeriesDotAtIndex({
   color,
   radius,
   ring,
+  glow = null,
   ringColor,
   pulse,
   viewEnd,
@@ -27,8 +29,10 @@ function SeriesDotAtIndex({
   padding: ChartPadding;
   color: string;
   radius: number;
-  /** Outer halo ring, or `null` for a flat circle. */
+  /** Crisp outer backing ring, or `null` for a flat circle. */
   ring: ResolvedDotRingConfig | null;
+  /** Optional soft static glow; unlike `pulse`, it has no animation clock. */
+  glow?: ResolvedDotGlowConfig | null;
   /** Fallback ring color when `ring.color` is unset (theme `badgeOuterBg`). */
   ringColor: string;
   pulse: ResolvedPulseConfig | null;
@@ -94,6 +98,17 @@ function SeriesDotAtIndex({
           opacity={pulseOpacity}
         />
       )}
+      {glow && (
+        <Circle
+          cx={dotX}
+          cy={dotY}
+          r={glow.radius}
+          color={glow.color ?? color}
+          opacity={glow.opacity}
+        >
+          <BlurMask blur={glow.blur} style="normal" />
+        </Circle>
+      )}
       {ring && (
         <Circle
           cx={dotX}
@@ -113,6 +128,7 @@ export function MultiSeriesDots({
   colors,
   radius,
   ring,
+  glow = null,
   ringColor,
   color,
   pulse,
@@ -123,8 +139,10 @@ export function MultiSeriesDots({
   padding: ChartPadding;
   colors: string[];
   radius: number;
-  /** Outer halo ring, or `null` for flat circles. */
+  /** Crisp outer backing ring, or `null` for flat circles. */
   ring: ResolvedDotRingConfig | null;
+  /** Optional soft static glow behind every series dot. */
+  glow?: ResolvedDotGlowConfig | null;
   /** Fallback ring color when `ring.color` is unset (theme `badgeOuterBg`). */
   ringColor: string;
   /** Fill color override; falls back to each series' line color. */
@@ -146,6 +164,7 @@ export function MultiSeriesDots({
           color={color ?? colors[i] ?? "#ffffff"}
           radius={radius}
           ring={ring}
+          glow={glow}
           ringColor={ringColor}
           pulse={pulse}
           viewEnd={viewEnd}

package/src/constants.ts

@@ -39,6 +39,13 @@ export const RETURN_TO_LIVE_MS = 450;
  */
 export const SCRUB_OVERLAY_FADE_MS = 150;
 
+/**
+ * Duration (ms) of the candle-focus opacity transition used by
+ * `scrub.dimTarget: "otherCandles"`. The selected candle remains fully opaque;
+ * the shared candle batch eases toward `dimOpacity` and back to full strength.
+ */
+export const SCRUB_CANDLE_DIM_FADE_MS = 60;
+
 /**
  * Base wave amplitude (px) of the breathing loading squiggle — it breathes
  * between `0.4×` and `1.0×` this. Overridable via `loading={{ amplitude }}`.