react-native-livechart 4.18.0 → 4.20.0

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 }}`.

package/src/core/resolveConfig.ts

@@ -18,6 +18,7 @@ import type {
   LoadingConfig,
   MarkerClusterConfig,
   DotConfig,
+  DotGlowConfig,
   DotRingConfig,
   MultiSeriesDotConfig,
   PulseConfig,
@@ -40,7 +41,6 @@ import type {
   YAxisConfig,
   ZoomConfig,
 } from "../types";
-
 import type { ComponentType, ReactElement } from "react";
 import type { SharedValue } from "react-native-reanimated";
 import type { ResolvedMarkerCluster } from "../math/markerCluster";
@@ -54,6 +54,7 @@ import {
   LOADING_WAVE_SPEED,
   MOTION_METRICS_DEFAULTS,
   RETURN_TO_LIVE_MS,
+  SCRUB_CANDLE_DIM_FADE_MS,
 } from "../constants";
 
 // ─── Resolved types (all fields required, no optionals) ──────────────────────
@@ -88,6 +89,8 @@ export interface ResolvedBadgeConfig {
 
 export interface ResolvedYAxisConfig {
   minGap: number;
+  /** Multiplier used to choose and align representable dynamic nice intervals. */
+  intervalScale: number;
   /** Fixed label count (≥ 2), or 0 for the dynamic nice-interval grid. */
   count: number;
   /** undefined → keep the default centered-gutter label placement. */
@@ -152,8 +155,12 @@ export interface ResolvedScrubConfig {
   tooltip: boolean;
   /** Opt-in per-series pill tooltip for LiveChartSeries; null keeps guide-only behavior. */
   seriesTooltip: ResolvedPerSeriesTooltipConfig | null;
-  /** Opacity of content right of the crosshair while scrubbing (dstOut fade). */
+  /** Content affected by dimOpacity while scrubbing. */
+  dimTarget: "future" | "otherCandles";
+  /** Opacity of the content selected by dimTarget while scrubbing. */
   dimOpacity: number;
+  /** Candle-focus dim transition duration in milliseconds. */
+  dimFadeMs: number;
   /** undefined → palette.crosshairLine */
   crosshairLineColor: string | undefined;
   /** Vertical crosshair line width in px. */
@@ -199,9 +206,7 @@ export interface ResolvedScrubConfig {
 export interface ResolvedPerSeriesTooltipConfig {
   alwaysShow: boolean;
   bucketSeconds: number | undefined;
-  formatSeriesValue:
-    | ((value: number, seriesId: string) => string)
-    | undefined;
+  formatSeriesValue: ((value: number, seriesId: string) => string) | undefined;
   formatTimeRange: ((from: number, to: number) => string) | undefined;
   maxLabelChars: number;
   guideColor: string | undefined;
@@ -483,6 +488,7 @@ export function resolveBadge(
 
 const Y_AXIS_DEFAULTS: ResolvedYAxisConfig = {
   minGap: 36,
+  intervalScale: 1,
   count: 0,
   labelRightMargin: undefined,
   gridEndGap: undefined,
@@ -500,7 +506,14 @@ export function resolveYAxis(
 ): ResolvedYAxisConfig | null {
   const resolved = resolveToggle(prop, Y_AXIS_DEFAULTS, false);
   if (resolved === null) return null;
-  return { ...resolved, count: Math.max(0, Math.floor(resolved.count)) };
+  return {
+    ...resolved,
+    count: Math.max(0, Math.floor(resolved.count)),
+    intervalScale:
+      Number.isFinite(resolved.intervalScale) && resolved.intervalScale > 0
+        ? resolved.intervalScale
+        : 1,
+  };
 }
 
 const VOLUME_DEFAULTS: ResolvedVolumeConfig = {
@@ -688,8 +701,7 @@ export function resolveAxisLabel(
 ): ResolvedAxisLabelConfig | null {
   const resolved = resolveToggle(prop, AXIS_LABEL_DEFAULTS, false);
   if (!resolved) return null;
-  const connectorProp =
-    typeof prop === "object" ? prop.connector : undefined;
+  const connectorProp = typeof prop === "object" ? prop.connector : undefined;
   return {
     ...resolved,
     connector: resolveConnector(
@@ -716,7 +728,9 @@ export function resolveXAxis(
 const SCRUB_DEFAULTS: ResolvedScrubConfig = {
   tooltip: true,
   seriesTooltip: null,
+  dimTarget: "future",
   dimOpacity: 0.3,
+  dimFadeMs: SCRUB_CANDLE_DIM_FADE_MS,
   crosshairLineColor: undefined,
   crosshairStrokeWidth: 1,
   crosshairOvershoot: 0,
@@ -770,11 +784,7 @@ const PER_SERIES_TOOLTIP_DEFAULTS: ResolvedPerSeriesTooltipConfig = {
 function resolvePerSeriesTooltip(
   prop: boolean | PerSeriesTooltipConfig | undefined,
 ): ResolvedPerSeriesTooltipConfig | null {
-  const resolved = resolveToggle(
-    prop,
-    PER_SERIES_TOOLTIP_DEFAULTS,
-    false,
-  );
+  const resolved = resolveToggle(prop, PER_SERIES_TOOLTIP_DEFAULTS, false);
   if (!resolved) return null;
   const dash = typeof prop === "object" ? prop.guideDashPattern : undefined;
   if (dash !== undefined) {
@@ -804,6 +814,19 @@ export function resolveScrub(
     const seriesTooltip =
       typeof prop === "object" ? prop.seriesTooltip : undefined;
     resolved.seriesTooltip = resolvePerSeriesTooltip(seriesTooltip);
+    // `resolveToggle` shallow-merges object props, so an explicitly undefined
+    // optional field replaces its default. Restore the public defaults before
+    // normalizing; otherwise the numeric clamps produce NaN and an undefined
+    // dimTarget selects neither candle scrub rendering path.
+    resolved.dimTarget = resolved.dimTarget ?? SCRUB_DEFAULTS.dimTarget;
+    resolved.dimOpacity = Math.max(
+      0,
+      Math.min(1, resolved.dimOpacity ?? SCRUB_DEFAULTS.dimOpacity),
+    );
+    resolved.dimFadeMs = Math.max(
+      0,
+      resolved.dimFadeMs ?? SCRUB_DEFAULTS.dimFadeMs,
+    );
     resolved.crosshairOvershoot = Math.max(0, resolved.crosshairOvershoot);
     resolved.crosshairFadeDistance = Math.max(
       0,
@@ -1181,7 +1204,39 @@ export function resolveTradeStream(
 
 // ─── Dot (shared) ─────────────────────────────────────────────────────────────
 
-/** Resolved halo ring. `color: undefined` means "use the theme `badgeOuterBg`". */
+/** Resolved static dot glow. `color: undefined` means "use the dot color". */
+export interface ResolvedDotGlowConfig {
+  color: string | undefined;
+  radius: number;
+  blur: number;
+  opacity: number;
+}
+
+const DOT_GLOW_DEFAULTS: ResolvedDotGlowConfig = {
+  color: undefined,
+  radius: 7,
+  blur: 5,
+  opacity: 0.18,
+};
+
+/** `undefined`/`false` → off; `true` → restrained defaults; object → merged. */
+export function resolveDotGlow(
+  prop: boolean | DotGlowConfig | undefined,
+): ResolvedDotGlowConfig | null {
+  if (!prop) return null;
+  const config = prop === true ? DOT_GLOW_DEFAULTS : prop;
+  return {
+    color: config.color,
+    radius: Math.max(0, config.radius ?? DOT_GLOW_DEFAULTS.radius),
+    blur: Math.max(0, config.blur ?? DOT_GLOW_DEFAULTS.blur),
+    opacity: Math.max(
+      0,
+      Math.min(1, config.opacity ?? DOT_GLOW_DEFAULTS.opacity),
+    ),
+  };
+}
+
+/** Resolved backing ring. `color: undefined` means "use the theme `badgeOuterBg`". */
 export interface ResolvedDotRingConfig {
   color: string | undefined;
   width: number;
@@ -1203,6 +1258,7 @@ export function resolveDotRing(
 export interface ResolvedDotConfig {
   radius: number;
   ring: ResolvedDotRingConfig | null;
+  glow: ResolvedDotGlowConfig | null;
   show: boolean;
   color: string | undefined;
   trackWhileParked: boolean;
@@ -1211,6 +1267,7 @@ export interface ResolvedDotConfig {
 const DOT_DEFAULTS: ResolvedDotConfig = {
   radius: 3.5,
   ring: RING_DEFAULTS,
+  glow: null,
   show: true,
   color: undefined,
   trackWhileParked: false,
@@ -1231,6 +1288,7 @@ export function resolveDot(
   return {
     radius: prop.radius ?? DOT_DEFAULTS.radius,
     ring: resolveDotRing(prop.ring),
+    glow: resolveDotGlow(prop.glow),
     show: prop.show ?? DOT_DEFAULTS.show,
     color: prop.color,
     trackWhileParked: prop.trackWhileParked ?? DOT_DEFAULTS.trackWhileParked,

package/src/core/useLiveChartEngine.ts

@@ -560,10 +560,15 @@ export function useLiveChartEngine(
 
   // `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).
-  useFrameCallback((frameInfo) => {
+  const engineFrameCallback = useFrameCallback((frameInfo) => {
     "worklet";
     applyLiveChartEngineFrame(frameInfo, frameRefs, frameScratchRef.current!);
   }, !config.static);
+  useEffect(() => {
+    // Reanimated only seeds `isActive` from `autostart` on mount. Keep the
+    // imperative state aligned when a chart switches between static and live.
+    engineFrameCallback.setActive(!config.static);
+  }, [config.static, engineFrameCallback]);
 
   // When time-scroll is disabled while scrolled back, return the window to the
   // live edge. With a positive duration this glides: snapshot the frozen edge into

package/src/draw/candle.ts

@@ -22,6 +22,36 @@ export interface CandleGeometry {
   wicks: CandleWick[];
 }
 
+export interface CandleFocusClip {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** Stable off-canvas clip used when no candle is focused. */
+export const HIDDEN_CANDLE_FOCUS_CLIP: CandleFocusClip = {
+  x: -1,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+
+/**
+ * Keep the full-strength candle pass visible while a candle is selected and
+ * while the shared dimmed batch is still returning to full opacity. The latter
+ * prevents the selected candle from briefly dropping to the dim opacity when a
+ * scrub ends or moves into a gap.
+ */
+export function computeCandleFocusPassOpacity(
+  scrubActive: boolean,
+  hasScrubCandle: boolean,
+  inactiveCandleOpacity: number,
+): number {
+  "worklet";
+  return (scrubActive && hasScrubCandle) || inactiveCandleOpacity < 1 ? 1 : 0;
+}
+
 function candleTimeToX(
   t: number,
   padLeft: number,
@@ -44,6 +74,54 @@ function candleValueToY(
   return padTop + ((displayMax - v) / valRange) * chartH;
 }
 
+/**
+ * Return the visible screen-space time slot occupied by one candle bucket.
+ * The focus renderer clips the existing batched candle paths to this strip,
+ * repainting only the selected body and wick without building another SkPath.
+ */
+export function computeCandleFocusClip(
+  candle: CandlePoint | null,
+  padding: ChartPadding,
+  canvasW: number,
+  canvasH: number,
+  winStart: number,
+  windowSecs: number,
+  candleWidthSecs: number,
+): CandleFocusClip {
+  "worklet";
+  if (!candle || windowSecs <= 0 || candleWidthSecs <= 0) {
+    return HIDDEN_CANDLE_FOCUS_CLIP;
+  }
+
+  const chartLeft = padding.left;
+  const chartRight = canvasW - padding.right;
+  const chartTop = padding.top;
+  const chartBottom = canvasH - padding.bottom;
+  const chartW = chartRight - chartLeft;
+  const chartH = chartBottom - chartTop;
+  if (chartW <= 0 || chartH <= 0) return HIDDEN_CANDLE_FOCUS_CLIP;
+
+  const bucketLeft = candleTimeToX(
+    candle.time,
+    padding.left,
+    winStart,
+    windowSecs,
+    chartW,
+  );
+  const bucketRight = candleTimeToX(
+    candle.time + candleWidthSecs,
+    padding.left,
+    winStart,
+    windowSecs,
+    chartW,
+  );
+  const x = Math.max(chartLeft, bucketLeft);
+  const right = Math.min(chartRight, bucketRight);
+  if (right <= x) return HIDDEN_CANDLE_FOCUS_CLIP;
+
+  return { x, y: chartTop, width: right - x, height: chartH };
+}
+
 /** One candle → bodies/wicks; top-level worklet (no nested closures). */
 function appendCandleShapes(
   c: CandlePoint,

package/src/draw/grid.ts

@@ -89,6 +89,7 @@ export function pickInterval(
   prev: number,
 ): number {
   "worklet";
+  if (!Number.isFinite(valRange) || !Number.isFinite(pxPerUnit)) return 0;
   if (prev > 0) {
     const px = prev * pxPerUnit;
     if (px >= minGap * 0.5 && px <= minGap * 4) return prev;
@@ -103,6 +104,9 @@ export function pickInterval(
   for (let s = 0; s < divisorSets.length; s++) {
     const divs = divisorSets[s];
     let span = Math.pow(10, Math.ceil(Math.log10(valRange)));
+    // `10 ** ceil(log10(Number.MAX_VALUE))` overflows even though the input is
+    // finite. Starting from the range itself preserves a finite upper bound.
+    if (!Number.isFinite(span) && valRange > 0) span = valRange;
     let i = 0;
     while ((span / divs[i % 3]) * pxPerUnit >= minGap) {
       span /= divs[i % 3];
@@ -165,6 +169,7 @@ export function computeGridEntries(
   minGap = 36,
   grid: GridMetrics = GRID_METRICS_DEFAULTS,
   count = 0,
+  intervalScale = 1,
 ): { entries: YAxisEntry[]; interval: number } {
   "worklet";
   const chartH = canvasHeight - padTop - padBottom;
@@ -194,7 +199,29 @@ export function computeGridEntries(
 
   const pxPerUnit = chartH / valRange;
 
-  const coarse = pickInterval(valRange, pxPerUnit, minGap, prevInterval);
+  let appliedIntervalScale = intervalScale;
+  let scaledRange = valRange * appliedIntervalScale;
+  let pxPerScaledUnit = pxPerUnit / appliedIntervalScale;
+  // A positive finite multiplier can still overflow/underflow when combined
+  // with the live range. Fall back to source-unit interval selection so an
+  // unrepresentable display range cannot poison or freeze this UI worklet.
+  if (
+    !Number.isFinite(scaledRange) ||
+    scaledRange <= 0 ||
+    !Number.isFinite(pxPerScaledUnit) ||
+    pxPerScaledUnit <= 0
+  ) {
+    appliedIntervalScale = 1;
+    scaledRange = valRange;
+    pxPerScaledUnit = pxPerUnit;
+  }
+  const interval = pickInterval(
+    scaledRange,
+    pxPerScaledUnit,
+    minGap,
+    appliedIntervalScale === intervalScale ? prevInterval : 0,
+  );
+  const coarse = interval / appliedIntervalScale;
   const fine = coarse / 2;
   const finePx = fine * pxPerUnit;
   const fineTarget = fineLineTargetAlpha(finePx, minGap);
@@ -227,7 +254,10 @@ export function computeGridEntries(
       fromEdge >= fadeZone ? 1 : fromEdge <= 0 ? 0 : fromEdge / fadeZone;
 
     const target = (isCoarse ? 1 : fineTarget) * edgeAlpha;
-    const key = Math.round(val * 1e10);
+    // Snap to the exact fine-grid multiple. Unlike a fixed decimal precision,
+    // this keeps adjacent sub-1e-10 source values distinct while remaining
+    // stable when the same line is recomputed on later frames.
+    const key = Math.round(val / fine) * fine;
     targets[key] = target;
   }
 
@@ -265,12 +295,12 @@ export function computeGridEntries(
     const key = Number(allKeys[i]);
     const alpha = labelAlphas[key];
     if (alpha < 0.02) continue;
-    const val = key / 1e10;
+    const val = key;
     const y = gridValueToY(val, displayMax, valRange, padTop, chartH);
     /* istanbul ignore next -- vertical clip; y stays in-band when val comes from tracked keys */
     if (y < padTop - 10 || y > canvasHeight - padBottom + 10) continue;
     entries.push({ y, label: formatValue(val), alpha });
   }
 
-  return { entries, interval: coarse };
+  return { entries, interval };
 }

package/src/draw/line.ts

@@ -5,7 +5,7 @@ export {
   BADGE_MARGIN_RIGHT,
   BADGE_PILL_PAD_X,
   BADGE_PILL_PAD_Y,
-  BADGE_TAIL_LEN
+  BADGE_TAIL_LEN,
 } from "../constants";
 
 export interface ChartPadding {
@@ -113,7 +113,8 @@ export function resolveAutoRight(
   showTail = true,
   badgeMetrics: BadgeMetrics = BADGE_METRICS_DEFAULTS,
 ): number {
-  if (badge) return minPaddingRightForBadgeYAxisAlign(12, 49, showTail, badgeMetrics);
+  if (badge)
+    return minPaddingRightForBadgeYAxisAlign(12, 49, showTail, badgeMetrics);
   if (yAxis) return 44;
   return DEFAULT_PADDING.right;
 }
@@ -156,6 +157,15 @@ export function pulseRadialOutset(
   return Math.ceil(maxRadius + strokeWidth / 2);
 }
 
+/**
+ * Conservative canvas footprint for a blurred live-dot glow. Two blur radii
+ * retain the visible low-opacity falloff without over-inflating chart gutters.
+ * Keep this in sync with the `Circle` + `BlurMask` rendering in the dot overlays.
+ */
+export function dotGlowRadialOutset(radius: number, blur: number): number {
+  return Math.ceil(Math.max(0, radius) + Math.max(0, blur) * 2);
+}
+
 /** Extra space beyond label width so the pulse ring does not touch glyphs. */
 const PULSE_Y_AXIS_LABEL_GAP = 8;
 
@@ -283,15 +293,18 @@ export function buildLinePoints(
       );
     }
   } else {
-    // Min/max-per-pixel-column decimation: within each pixel column keep the
-    // lowest- and highest-value samples (emitted in their original time order)
-    // so the line's envelope and any volatility spikes survive at full vertical
-    // fidelity while the point count stays bounded by the canvas width.
+    // Min/max-per-pixel-width decimation: anchor buckets to absolute time, not
+    // the moving viewport origin. Existing samples then keep the same bucket as
+    // `now` advances, so interior history translates without being reshaped;
+    // only the buckets entering or leaving the viewport can change. Within each
+    // bucket keep the lowest- and highest-value samples (emitted in their
+    // original time order) so the line's envelope and volatility spikes survive
+    // at full vertical fidelity while the point count stays bounded by width.
     let curCol = -2147483648;
     let minIdx = startIdx;
     let maxIdx = startIdx;
     for (let i = startIdx; i < endIdx; i++) {
-      const col = ((data[i].time - winStart) * xScale) | 0;
+      const col = Math.floor(data[i].time * xScale);
       if (col !== curCol) {
         if (curCol !== -2147483648) {
           const a = minIdx <= maxIdx ? minIdx : maxIdx;

package/src/hooks/resolveChartLayout.ts

@@ -1,6 +1,7 @@
 import type { SkFont } from "@shopify/react-native-skia";
 import { measureFontTextWidth } from "../lib/measureFontTextWidth";
 import {
+  dotGlowRadialOutset,
   minPaddingRightForBadgeYAxisAlign,
   minPaddingRightForYAxisWithPulse,
   pulseRadialOutset,
@@ -46,6 +47,11 @@ export interface ChartLayoutConfig {
    * is not clipped. An explicit `insetsOverride` on a side wins over this floor.
    */
   pulse?: { maxRadius: number; strokeWidth: number } | null;
+  /**
+   * Static live-dot glow; floors auto-padding so its blurred falloff is not
+   * clipped. Explicit side insets still win.
+   */
+  dotGlow?: { radius: number; blur: number } | null;
   /**
    * When false and the badge uses the right gutter, omit the tail and
    * round-cap inset from the right padding.
@@ -120,24 +126,28 @@ export function resolveChartLayout(
     );
   }
 
+  const pulseOutset = config.pulse
+    ? pulseRadialOutset(config.pulse.maxRadius, config.pulse.strokeWidth)
+    : 0;
+  const glowOutset = config.dotGlow
+    ? dotGlowRadialOutset(config.dotGlow.radius, config.dotGlow.blur)
+    : 0;
+  const dotEffectOutset = Math.max(pulseOutset, glowOutset);
+
   // A right-gutter badge uses its pill layout instead of the bare centered label
-  // column, so the bare-axis pulse/label floor must not override badge sizing.
-  // The badge renders above the pulse; the general outlet floor below still
-  // prevents canvas-edge clipping.
+  // column, so the bare-axis effect/label floor must not override badge sizing.
+  // The badge renders above the dot effects; the general outlet floor below
+  // still prevents canvas-edge clipping.
   if (
-    config.pulse &&
+    dotEffectOutset > 0 &&
     config.yAxis &&
     !badgeUsesRightGutter &&
     config.insetsOverride?.right == null
   ) {
-    const outlet = pulseRadialOutset(
-      config.pulse.maxRadius,
-      config.pulse.strokeWidth,
-    );
     const labelW = measuredYAxisLabelWidth ?? 49;
     rightPad = Math.max(
       rightPad,
-      minPaddingRightForYAxisWithPulse(outlet, labelW),
+      minPaddingRightForYAxisWithPulse(dotEffectOutset, labelW),
     );
   }
 
@@ -160,12 +170,8 @@ export function resolveChartLayout(
   );
 
   let padding: ChartPadding = { ...base, right: rightPad, left: leftPad };
-  if (config.pulse) {
-    const outlet = pulseRadialOutset(
-      config.pulse.maxRadius,
-      config.pulse.strokeWidth,
-    );
-    // The pulse ring needs this much room or it clips at the canvas edge, so it
+  if (dotEffectOutset > 0) {
+    // The pulse/glow needs this much room or it clips at the canvas edge, so it
     // acts as a floor on the *auto* padding. An explicitly-provided inset always
     // wins, though — the caller opts into any clipping that causes (issue #128).
     // Every other auto-padding already respects an explicit inset (see the
@@ -173,10 +179,16 @@ export function resolveChartLayout(
     const ins = config.insetsOverride;
     padding = {
       ...padding,
-      right: ins?.right != null ? padding.right : Math.max(padding.right, outlet),
-      top: ins?.top != null ? padding.top : Math.max(padding.top, outlet),
+      right:
+        ins?.right != null
+          ? padding.right
+          : Math.max(padding.right, dotEffectOutset),
+      top:
+        ins?.top != null ? padding.top : Math.max(padding.top, dotEffectOutset),
       bottom:
-        ins?.bottom != null ? padding.bottom : Math.max(padding.bottom, outlet),
+        ins?.bottom != null
+          ? padding.bottom
+          : Math.max(padding.bottom, dotEffectOutset),
     };
   }
 

package/src/hooks/useCandlePaths.ts

@@ -1,4 +1,5 @@
 import { Skia } from "@shopify/react-native-skia";
+import { useEffect } from "react";
 import {
   useDerivedValue,
   useFrameCallback,
@@ -35,6 +36,8 @@ export function useCandleWidthLerp(
   candleLerpSpeed: number | undefined,
   /** Static charts run no loops: register without starting. */
   autostart: boolean,
+  /** Only advance the displayed width while candle mode is active. */
+  active: boolean,
 ): SharedValue<number> {
   const targetCandleWidth = useDerivedValue(() => candleWidthSecs);
   const displayCandleWidth = useSharedValue(candleWidthSecs);
@@ -46,8 +49,9 @@ export function useCandleWidthLerp(
     () => candleLerpSpeed ?? CANDLE_WIDTH_LERP_SPEED,
   );
 
-  useFrameCallback((frameInfo) => {
+  const widthFrameCallback = useFrameCallback((frameInfo) => {
     "worklet";
+    if (!active) return;
     const dt = frameInfo.timeSincePreviousFrame ?? MS_PER_FRAME_60FPS;
     displayCandleWidth.set(
       lerp(
@@ -58,6 +62,10 @@ export function useCandleWidthLerp(
       ),
     );
   }, autostart);
+  useEffect(() => {
+    // `autostart` is an initial seed in Reanimated, not a reactive switch.
+    widthFrameCallback.setActive(autostart);
+  }, [autostart, widthFrameCallback]);
 
   return displayCandleWidth;
 }