react-native-livechart 4.18.0 → 4.20.0

package/src/components/LiveChart.tsx

@@ -1,4 +1,12 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
@@ -11,7 +19,7 @@ import Animated, {
   withSequence,
   withTiming,
 } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
+import { scheduleOnRN, scheduleOnUI } from "react-native-worklets";
 
 /**
  * Single-series live chart. UX and prop vocabulary parallel Benji Taylor’s
@@ -69,7 +77,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 +100,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 { resetPinchZoom, 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 +141,8 @@ import {
   resolveTheme,
 } from "../theme";
 import type {
+  CandlePoint,
+  LiveChartHandle,
   LiveChartPalette,
   LiveChartPoint,
   LiveChartProps,
@@ -385,8 +401,12 @@ function useLiveChartController({
   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).
@@ -413,12 +433,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));
@@ -653,6 +675,7 @@ function useLiveChartController({
     formatValue,
     currentValue: valueLayoutSample,
     pulse: pulseConfig,
+    dotGlow: dotCfg.glow,
     volumeBandHeight,
   });
 
@@ -675,6 +698,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 } =
@@ -769,7 +796,8 @@ function useLiveChartController({
       if (
         referenceLineForm(l) !== "line" ||
         l.value === undefined ||
-        refLineCustom[i] || refLineOffAxisCustom[i]
+        refLineCustom[i] ||
+        refLineOffAxisCustom[i]
       ) {
         ys.push(-1);
         continue;
@@ -926,6 +954,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
@@ -968,7 +997,8 @@ function useLiveChartController({
   const displayCandleWidth = useCandleWidthLerp(
     candleWidth,
     transitionsCfg.candleLerpSpeed,
-    !isStatic && isCandle,
+    !isStatic,
+    isCandle,
   );
 
   // ── Overlay hooks ─────────────────────────────────────────────────────
@@ -1333,26 +1363,20 @@ function useLiveChartController({
         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,
   );
 
@@ -1536,8 +1560,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,
@@ -1545,7 +1568,6 @@ function ChartWithDegen({
     momentumSV,
     degenCfg,
     onDegenShake,
-    isStatic,
   );
   return <ChartView model={model} yAxisEntries={yAxisEntries} degen={state} />;
 }
@@ -1573,6 +1595,7 @@ function ChartWithYAxis({ model }: { model: LiveChartModel }) {
     yAxisCfg?.minGap ?? 36,
     metricsCfg.grid,
     yAxisCfg?.count ?? 0,
+    yAxisCfg?.intervalScale ?? 1,
   );
   if (model.degenCfg) {
     return <ChartWithDegen model={model} yAxisEntries={yAxisEntries} />;
@@ -1778,6 +1801,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
@@ -1799,15 +1858,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,
@@ -1818,31 +1872,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>
       )}
@@ -2069,6 +2211,7 @@ function ChartStack({
             dotY={dotY}
             palette={palette}
             pulse={pulseCfg}
+            glow={dotCfg.glow}
             radius={dotCfg.radius}
             ring={dotCfg.ring}
             color={dotCfg.color}
@@ -2219,6 +2362,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;
 
@@ -2243,11 +2390,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}
@@ -2256,7 +2404,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}
@@ -2771,13 +2921,23 @@ function ChartView({
   );
 }
 
-export function LiveChart(props: LiveChartProps) {
-  const model = useLiveChartController(props);
-  if (model.yAxisCfg) {
-    return <ChartWithYAxis model={model} />;
-  }
-  if (model.degenCfg) {
-    return <ChartWithDegen model={model} yAxisEntries={null} />;
-  }
-  return <ChartView model={model} yAxisEntries={null} degen={null} />;
-}
+export const LiveChart = forwardRef<LiveChartHandle, LiveChartProps>(
+  function LiveChart(props, ref) {
+    const model = useLiveChartController(props);
+    const { viewEnd, viewWindow } = model.engine;
+    useImperativeHandle(
+      ref,
+      () => ({
+        resetZoom: () => scheduleOnUI(resetPinchZoom, { viewEnd, viewWindow }),
+      }),
+      [viewEnd, viewWindow],
+    );
+    if (model.yAxisCfg) {
+      return <ChartWithYAxis model={model} />;
+    }
+    if (model.degenCfg) {
+      return <ChartWithDegen model={model} yAxisEntries={null} />;
+    }
+    return <ChartView model={model} yAxisEntries={null} degen={null} />;
+  },
+);

package/src/components/LiveChartSeries.tsx

@@ -5,7 +5,12 @@
  * @see https://github.com/benjitaylor/liveline
  */
 import { Canvas, Group, Rect } from "@shopify/react-native-skia";
-import { useLayoutEffect, useState } from "react";
+import {
+  forwardRef,
+  useImperativeHandle,
+  useLayoutEffect,
+  useState,
+} from "react";
 import { StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
@@ -16,7 +21,7 @@ import Animated, {
   withTiming,
   type SharedValue,
 } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
+import { scheduleOnRN, scheduleOnUI } from "react-native-worklets";
 import {
   DEFAULT_ACCENT_COLOR,
   HOLD_TO_SCRUB_MS,
@@ -50,7 +55,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";
@@ -62,8 +67,12 @@ import { useMarkers } from "../hooks/useMarkers";
 import { useMultiSeriesDegen } from "../hooks/useMultiSeriesDegen";
 import { useMultiSeriesLinePaths } from "../hooks/useMultiSeriesLinePaths";
 import { usePanScroll } from "../hooks/usePanScroll";
-import { usePinchZoom } from "../hooks/usePinchZoom";
+import { resetPinchZoom, 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";
@@ -82,7 +91,12 @@ import {
   leftEdgeFadeColorsFromBgRgb,
   resolveTheme,
 } from "../theme";
-import type { LiveChartSeriesProps, Marker, SeriesConfig } from "../types";
+import type {
+  LiveChartHandle,
+  LiveChartSeriesProps,
+  Marker,
+  SeriesConfig,
+} from "../types";
 import { AxisLabelOverlay } from "./AxisLabelOverlay";
 import { ChartOverlayLayer } from "./ChartOverlayLayer";
 import {
@@ -246,9 +260,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 +358,7 @@ function useLiveChartSeriesController({
     formatValue,
     currentValue: representativeValue,
     pulse: dotCfg.pulse,
+    dotGlow: dotCfg.glow,
     multiSeriesDotRadius: dotOuterRadius,
     multiSeriesValueLabel: dotCfg.valueLabel,
     multiSeriesMaxLabelWidth: maxSeriesLabelWidth,
@@ -367,6 +385,10 @@ function useLiveChartSeriesController({
     false,
     transitionsCfg.reveal,
   );
+  const seriesIndicatorOpacity = useSeriesIndicatorOpacity(
+    resolvedSeriesOpacity,
+    transitionsCfg.reveal === 0 ? 0 : SERIES_INDICATOR_FADE_MS,
+  );
 
   const effectiveSeries = useMultiSeriesReverseMorphInputs({
     series,
@@ -397,6 +419,7 @@ function useLiveChartSeriesController({
     engine,
     effectivePadding,
     activeSeriesCount,
+    lineProp?.simplify,
   );
 
   // Per-series colors and stroke styles, derived from the off-render snapshot
@@ -437,6 +460,7 @@ function useLiveChartSeriesController({
     yAxisCfg?.minGap ?? 36,
     metricsCfg.grid,
     yAxisCfg?.count ?? 0,
+    yAxisCfg?.intervalScale ?? 1,
   );
 
   const { xAxisEntries } = useXAxis(
@@ -597,6 +621,7 @@ function useLiveChartSeriesController({
     // passthrough props the render needs
     series,
     seriesOpacity: resolvedSeriesOpacity,
+    seriesIndicatorOpacity,
     style,
     canvasMode,
     accessibilityLabel,
@@ -709,6 +734,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
     renderMarker,
     series,
     seriesOpacity,
+    seriesIndicatorOpacity,
     emptyText,
     loadingAxisLabels,
     metricsCfg,
@@ -798,7 +824,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
       )}
 
       {dotCfg.show && (
-        <Group opacity={seriesOpacity}>
+        <Group opacity={seriesIndicatorOpacity}>
           <Group opacity={reveal.dotOpacity}>
             <MultiSeriesDots
               engine={engine}
@@ -806,6 +832,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 +980,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} />;
@@ -1006,8 +1037,19 @@ function SeriesTooltipLayer({
   );
 }
 
-export function LiveChartSeries(props: LiveChartSeriesProps) {
+export const LiveChartSeries = forwardRef<
+  LiveChartHandle,
+  LiveChartSeriesProps
+>(function LiveChartSeries(props, ref) {
   const model = useLiveChartSeriesController(props);
+  const { viewEnd, viewWindow } = model.engine;
+  useImperativeHandle(
+    ref,
+    () => ({
+      resetZoom: () => scheduleOnUI(resetPinchZoom, { viewEnd, viewWindow }),
+    }),
+    [viewEnd, viewWindow],
+  );
   const {
     rootGesture,
     backgroundColor,
@@ -1146,12 +1188,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}
@@ -1255,4 +1295,4 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
       {legendCfg.position === "bottom" ? legend : null}
     </View>
   );
-}
+});