react-native-livechart 1.0.0 → 2.0.0

package/src/components/CrosshairLine.tsx

@@ -15,6 +15,7 @@ export function CrosshairLine({
   padding,
   palette,
   dimOpacity = 0.3,
+  liveDotExtent = 0,
   crosshairLineColor,
   crosshairDimColor,
 }: {
@@ -25,30 +26,49 @@ export function CrosshairLine({
   palette: LiveChartPalette;
   /** Opacity of content right of the crosshair (dstOut fade). Default 0.3. */
   dimOpacity?: number;
+  /** How far the live series dots extend past the plot's right edge. The dim
+   *  region extends by this much so it fully covers the dots — centered on that
+   *  edge, otherwise only half-dimmed — while leaving the value/Y-axis labels
+   *  the gutter reserves beyond them bright. Default 0. */
+  liveDotExtent?: number;
   crosshairLineColor?: string;
   crosshairDimColor?: string;
 }) {
-  const p1 = useDerivedValue(() => ({
-    x: scrubX.value,
-    y: padding.top,
-  }));
-  const p2 = useDerivedValue(() => ({
-    x: scrubX.value,
-    y: engine.canvasHeight.value - padding.bottom,
-  }));
+  // Explicit dependency arrays: with React Compiler enabled, Reanimated's
+  // auto-detected worklet dependencies can change array size between renders
+  // (e.g. when `liveDotExtent` flips 0 → the live-dot extent), which trips
+  // React's "final argument changed size between renders" error. Listing the
+  // captured plain values keeps the dependency array a constant size. SharedValue
+  // reads stay reactive regardless of this list.
+  const p1 = useDerivedValue(
+    () => ({
+      x: scrubX.value,
+      y: padding.top,
+    }),
+    [scrubX, padding.top],
+  );
+  const p2 = useDerivedValue(
+    () => ({
+      x: scrubX.value,
+      y: engine.canvasHeight.value - padding.bottom,
+    }),
+    [scrubX, engine.canvasHeight, padding.bottom],
+  );
 
   const dimWidth = useDerivedValue(() => {
-    const rightEdge = engine.canvasWidth.value - padding.right;
+    const rightEdge = engine.canvasWidth.value - padding.right + liveDotExtent;
     return Math.max(0, rightEdge - scrubX.value);
-  });
+  }, [engine.canvasWidth, padding.right, liveDotExtent, scrubX]);
   const dimHeight = useDerivedValue(
     () => engine.canvasHeight.value - padding.top - padding.bottom,
+    [engine.canvasHeight, padding.top, padding.bottom],
   );
 
   // dstOut erase color: alpha = fraction of trailing content to remove, ramped
   // by the crosshair fade-in. RGB is irrelevant for dstOut.
   const dimErase = useDerivedValue(
     () => `rgba(0,0,0,${(1 - dimOpacity) * crosshairOpacity.value})`,
+    [dimOpacity, crosshairOpacity],
   );
 
   return (

package/src/components/CrosshairOverlay.tsx

@@ -26,6 +26,7 @@ export function CrosshairOverlay({
   showTooltip = true,
   children,
   dimOpacity = 0.3,
+  liveDotExtent = 0,
   crosshairLineColor,
   crosshairDimColor,
   tooltipBackground,
@@ -46,27 +47,46 @@ export function CrosshairOverlay({
   children?: ReactNode;
   /** Opacity of content right of the crosshair (dstOut fade). Default 0.3. */
   dimOpacity?: number;
+  /** How far the live dot (and its pulse ring) extends past the plot's right
+   *  edge. The dim region extends by this much so it fully covers the live
+   *  indicator — which is centered on that edge and would otherwise be only
+   *  half-dimmed — while stopping short of the Y-axis labels the gutter
+   *  reserves beyond it. Default 0. */
+  liveDotExtent?: number;
   crosshairLineColor?: string;
   crosshairDimColor?: string;
   tooltipBackground?: string;
   tooltipColor?: string;
   tooltipBorderColor?: string;
 }) {
-  const p1 = useDerivedValue(() => ({
-    x: scrubX.value,
-    y: padding.top,
-  }));
-  const p2 = useDerivedValue(() => ({
-    x: scrubX.value,
-    y: engine.canvasHeight.value - padding.bottom,
-  }));
+  // Explicit dependency arrays: with React Compiler enabled, Reanimated's
+  // auto-detected worklet dependencies can change array size between renders
+  // (e.g. when `liveDotExtent` flips 0 → the live-dot extent), which trips
+  // React's "final argument changed size between renders" error. Listing the
+  // captured plain values keeps the dependency array a constant size. SharedValue
+  // reads stay reactive regardless of this list.
+  const p1 = useDerivedValue(
+    () => ({
+      x: scrubX.value,
+      y: padding.top,
+    }),
+    [scrubX, padding.top],
+  );
+  const p2 = useDerivedValue(
+    () => ({
+      x: scrubX.value,
+      y: engine.canvasHeight.value - padding.bottom,
+    }),
+    [scrubX, engine.canvasHeight, padding.bottom],
+  );
 
   const dimWidth = useDerivedValue(() => {
-    const rightEdge = engine.canvasWidth.value - padding.right;
+    const rightEdge = engine.canvasWidth.value - padding.right + liveDotExtent;
     return Math.max(0, rightEdge - scrubX.value);
-  });
+  }, [engine.canvasWidth, padding.right, liveDotExtent, scrubX]);
   const dimHeight = useDerivedValue(
     () => engine.canvasHeight.value - padding.top - padding.bottom,
+    [engine.canvasHeight, padding.top, padding.bottom],
   );
 
   const tipX = useDerivedValue(() => tooltipLayout.value.x);
@@ -85,6 +105,7 @@ export function CrosshairOverlay({
   // ramped by the crosshair fade-in. Color RGB is irrelevant for dstOut.
   const dimErase = useDerivedValue(
     () => `rgba(0,0,0,${(1 - dimOpacity) * crosshairOpacity.value})`,
+    [dimOpacity, crosshairOpacity],
   );
 
   return (

package/src/components/DotOverlay.tsx

@@ -1,17 +1,19 @@
 import { Circle, Group } from "@shopify/react-native-skia";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
-import type { ResolvedPulseConfig } from "../core/resolveConfig";
+import type {
+  ResolvedDotRingConfig,
+  ResolvedPulseConfig,
+} from "../core/resolveConfig";
 import type { LiveChartPalette } from "../types";
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 
 const MIN_PULSE_RADIUS = 9;
-const DOT_OUTER_RADIUS = 6.5;
-const DOT_INNER_RADIUS = 3.5;
 
 /**
- * Live dot + expanding pulse ring. Peak ring size uses `pulse.maxRadius` and
- * `pulse.strokeWidth`; chart padding reserves the same outer extent via
- * `pulseRadialOutset` in `draw/line.ts` (see `resolveChartLayout`).
+ * Live dot + expanding pulse ring. The dot is a color-filled circle of `radius`
+ * with an optional contrasting outer `ring` (halo). Peak pulse size uses
+ * `pulse.maxRadius` / `pulse.strokeWidth`; chart padding reserves the same outer
+ * extent via `pulseRadialOutset` in `draw/line.ts` (see `resolveChartLayout`).
  */
 export function DotOverlay({
   dotX,
@@ -19,13 +21,24 @@ export function DotOverlay({
   palette,
   engine,
   pulse,
+  radius,
+  ring,
+  color,
 }: {
   dotX: SharedValue<number>;
   dotY: SharedValue<number>;
   palette: LiveChartPalette;
   engine: ChartEngineLayout;
   pulse: ResolvedPulseConfig | null;
+  /** Radius of the color-filled dot in pixels. */
+  radius: number;
+  /** Outer halo ring, or `null` for a flat dot. */
+  ring: ResolvedDotRingConfig | null;
+  /** Dot (and pulse) fill color; falls back to the chart line color. */
+  color: string | undefined;
 }) {
+  const dotColor = color ?? palette.line;
+
   const pulseRadius = useDerivedValue(() => {
     if (!pulse) return 0;
     const nowMs = engine.timestamp.value * 1000;
@@ -49,21 +62,23 @@ export function DotOverlay({
           cx={dotX}
           cy={dotY}
           r={pulseRadius}
-          color={palette.line}
+          color={dotColor}
           style="stroke"
           strokeWidth={pulse.strokeWidth}
           opacity={pulseOpacity}
         />
       )}
 
-      <Circle
-        cx={dotX}
-        cy={dotY}
-        r={DOT_OUTER_RADIUS}
-        color={palette.badgeOuterBg}
-      />
+      {ring && (
+        <Circle
+          cx={dotX}
+          cy={dotY}
+          r={radius + ring.width}
+          color={ring.color ?? palette.badgeOuterBg}
+        />
+      )}
 
-      <Circle cx={dotX} cy={dotY} r={DOT_INNER_RADIUS} color={palette.line} />
+      <Circle cx={dotX} cy={dotY} r={radius} color={dotColor} />
     </Group>
   );
 }

package/src/components/LiveChart.tsx

@@ -21,9 +21,11 @@ import { DEFAULT_ACCENT_COLOR } from "../constants";
 import {
   resolveBadge,
   resolveDegen,
+  resolveDot,
   resolveGradient,
   resolveGridStyle,
   resolveLeftEdgeFade,
+  resolveMetrics,
   resolvePulse,
   resolveScrub,
   resolveTradeStream,
@@ -32,6 +34,7 @@ import {
   resolveYAxis,
 } from "../core/resolveConfig";
 import { useLiveChartEngine } from "../core/useLiveChartEngine";
+import { pulseRadialOutset } from "../draw/line";
 import { resolveChartLayout } from "../hooks/resolveChartLayout";
 import { useBadge } from "../hooks/useBadge";
 import { useCandlePaths } from "../hooks/useCandlePaths";
@@ -126,12 +129,14 @@ function useLiveChartController({
   badge = true,
   momentum = true,
   pulse = true,
+  dot,
   valueLine = true,
   showValue = false,
   valueMomentumColor = false,
   referenceLines,
   gridStyle,
   palette: paletteOverride,
+  metrics,
   scrub = true,
   tradeStream,
   degen,
@@ -158,9 +163,13 @@ function useLiveChartController({
   const gradientCfg = isCandle ? null : resolveGradient(gradient);
   const valueLineCfg = resolveValueLine(valueLine);
   const pulseCfg = resolvePulse(pulse);
+  const dotCfg = resolveDot(dot);
+  // Outer footprint of the dot (color-filled radius plus the halo ring).
+  const dotOuterRadius = dotCfg.radius + (dotCfg.ring?.width ?? 0);
   const gridStyleCfg = resolveGridStyle(gridStyle);
   const degenCfg = resolveDegen(degen);
   const tradeStreamResolved = resolveTradeStream(tradeStream);
+  const metricsCfg = resolveMetrics(metrics);
 
   const allRefLines = referenceLines ?? [];
   const refValues = collectReferenceValues(allRefLines);
@@ -221,6 +230,7 @@ function useLiveChartController({
     insetsOverride: insets,
     yAxis: yAxisCfg !== null,
     badge: badgeCfg !== null,
+    badgeMetrics: metricsCfg.badge,
     badgeUsesRightGutter,
     badgeShowTail: badgeCfg?.tail ?? true,
     xAxis: xAxisCfg !== null,
@@ -260,6 +270,7 @@ function useLiveChartController({
     timeWindow,
     paused,
     smoothing,
+    adaptiveSpeedBoost: metricsCfg.motion.adaptiveSpeedBoost,
     exaggerate,
     referenceValues: refValues,
     nonNegative,
@@ -294,6 +305,7 @@ function useLiveChartController({
       isCandle ? liveEngine : liveCandle,
       candleWidth,
       isCandle,
+      metricsCfg.candle,
     );
   const { dotX, dotY } = useLiveDot(engine, effectivePadding);
 
@@ -319,6 +331,7 @@ function useLiveChartController({
     formatValue,
     skiaFont,
     yAxisCfg?.minGap ?? 36,
+    metricsCfg.grid,
   );
 
   const { xAxisEntries } = useXAxis(
@@ -339,6 +352,8 @@ function useLiveChartController({
     momentumSV,
     badgeCfg?.position ?? "right",
     badgeCfg?.background,
+    metricsCfg.badge,
+    metricsCfg.motion.badgeColorSpeed,
   );
 
   // Scrub/crosshair must see the same stash-backed candles as the engine.
@@ -361,6 +376,7 @@ function useLiveChartController({
     scrubCfg !== null,
     onScrub,
     candleOpts,
+    scrubCfg?.panGestureDelay ?? 0,
   );
 
   const markersActive = markers != null;
@@ -414,10 +430,13 @@ function useLiveChartController({
     gradientCfg,
     valueLineCfg,
     pulseCfg,
+    dotCfg,
+    dotOuterRadius,
     gridStyleCfg,
     degenCfg,
     tradeStreamResolved,
     leftEdgeFadeCfg,
+    metricsCfg,
     allRefLines,
     badgeUsesRightGutter,
     // theme / layout / fonts
@@ -498,15 +517,16 @@ function ChartStack({ model }: { model: LiveChartModel }) {
     downBodiesPath,
     xAxisCfg,
     xAxisEntries,
-    badgeData,
     dotX,
     pulseCfg,
+    dotCfg,
     degenCfg,
     degenPack,
     degenPackRevision,
     markersActive,
     markersSV,
     emptyText,
+    metricsCfg,
   } = model;
 
   return (
@@ -522,6 +542,7 @@ function ChartStack({ model }: { model: LiveChartModel }) {
             font={skiaFont}
             badge={badgeUsesRightGutter}
             badgeTail={badgeCfg?.tail ?? true}
+            badgeMetrics={metricsCfg.badge}
             gridStyle={gridStyleCfg}
           />
         </Group>
@@ -611,23 +632,23 @@ function ChartStack({ model }: { model: LiveChartModel }) {
         />
       )}
 
-      {/* Badge and live dot */}
-      {badgeCfg && (
-        <Group opacity={reveal.badgeOpacity}>
-          <BadgeOverlay badge={badgeData} font={skiaFont} />
+      {/* Live dot — the badge is drawn later (after the scrub layer) so the
+          scrub dim never clips the live-price badge's left edge. */}
+      {dotCfg.show && (
+        <Group opacity={reveal.dotOpacity}>
+          <DotOverlay
+            dotX={dotX}
+            dotY={dotY}
+            palette={palette}
+            engine={engine}
+            pulse={pulseCfg}
+            radius={dotCfg.radius}
+            ring={dotCfg.ring}
+            color={dotCfg.color}
+          />
         </Group>
       )}
 
-      <Group opacity={reveal.dotOpacity}>
-        <DotOverlay
-          dotX={dotX}
-          dotY={dotY}
-          palette={palette}
-          engine={engine}
-          pulse={pulseCfg}
-        />
-      </Group>
-
       {degenCfg && (
         <Group opacity={reveal.dotOpacity}>
           <DegenParticlesOverlay
@@ -669,6 +690,8 @@ function ChartStack({ model }: { model: LiveChartModel }) {
         strokeWidth={strokeWidth}
         badge={badgeCfg !== null}
         badgeTail={badgeCfg?.tail ?? true}
+        badgeMetrics={metricsCfg.badge}
+        emptyMetrics={metricsCfg.emptyState}
       />
     </Group>
   );
@@ -688,10 +711,20 @@ function ChartScrubLayer({ model }: { model: LiveChartModel }) {
     reveal,
     crosshair,
     isCandle,
+    pulseCfg,
+    dotOuterRadius,
   } = model;
 
   if (!tradeStreamResolved && !scrubCfg) return null;
 
+  // Extend the scrub dim past the plot's right edge to fully cover the live dot
+  // (with its halo) and pulse ring, all centered on that edge. The gutter
+  // reserves an 8px gap beyond this for the Y-axis labels, so they stay readable.
+  const liveDotExtent = Math.max(
+    dotOuterRadius,
+    pulseCfg ? pulseRadialOutset(pulseCfg.maxRadius, pulseCfg.strokeWidth) : 0,
+  );
+
   return (
     <Group transform={degenShakeTransform}>
       {tradeStreamResolved && (
@@ -716,6 +749,7 @@ function ChartScrubLayer({ model }: { model: LiveChartModel }) {
           font={skiaFont}
           showTooltip={scrubCfg.tooltip}
           dimOpacity={scrubCfg.dimOpacity}
+          liveDotExtent={liveDotExtent}
           crosshairLineColor={scrubCfg.crosshairLineColor}
           crosshairDimColor={scrubCfg.crosshairDimColor}
           tooltipBackground={scrubCfg.tooltipBackground}
@@ -774,6 +808,20 @@ function ChartValueOverlay({ model }: { model: LiveChartModel }) {
   );
 }
 
+/** Live-price badge, drawn above the scrub dim so the dim never clips its left
+ *  edge. Shares the degen shake transform so it tracks the shaken stack. */
+function ChartBadgeLayer({ model }: { model: LiveChartModel }) {
+  const { badgeCfg, badgeData, skiaFont, reveal, degenShakeTransform } = model;
+  if (!badgeCfg) return null;
+  return (
+    <Group transform={degenShakeTransform}>
+      <Group opacity={reveal.badgeOpacity}>
+        <BadgeOverlay badge={badgeData} font={skiaFont} />
+      </Group>
+    </Group>
+  );
+}
+
 export function LiveChart(props: LiveChartProps) {
   const model = useLiveChartController(props);
   const {
@@ -814,6 +862,10 @@ export function LiveChart(props: LiveChartProps) {
           <ChartValueOverlay model={model} />
 
           <ChartScrubLayer model={model} />
+
+          {/* 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} />
         </Canvas>
       </View>
     </GestureDetector>

package/src/components/LiveChartSeries.tsx

@@ -28,12 +28,14 @@ import {
   resolveGridStyle,
   resolveLeftEdgeFade,
   resolveLegend,
+  resolveMetrics,
   resolveMultiSeriesDot,
   resolveScrub,
   resolveXAxis,
   resolveYAxis,
 } from "../core/resolveConfig";
 import { useLiveChartSeriesEngine } from "../core/useLiveChartSeriesEngine";
+import { pulseRadialOutset } from "../draw/line";
 import { resolveChartLayout } from "../hooks/resolveChartLayout";
 import { useCanvasLayout } from "../hooks/useCanvasLayout";
 import { useChartReveal } from "../hooks/useChartReveal";
@@ -122,7 +124,8 @@ function useLiveChartSeriesController({
   referenceLines,
   gridStyle,
   palette: paletteOverride,
-  scrub = false,
+  metrics,
+  scrub = true,
   onScrub,
   onSeriesToggle,
   dot: dotProp,
@@ -143,8 +146,12 @@ function useLiveChartSeriesController({
   const scrubEnabled = scrubCfg !== null;
   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);
   const legendCfg = resolveLegend(legendProp);
   const degenCfg = resolveDegen(degen);
+  const metricsCfg = resolveMetrics(metrics);
 
   const allRefLines = referenceLines ?? [];
   const refValues = collectReferenceValues(allRefLines);
@@ -190,7 +197,7 @@ function useLiveChartSeriesController({
     : 0;
 
   const seriesLabelInset = dotCfg.valueLabel
-    ? dotCfg.radius + 8 + maxSeriesLabelWidth + 8
+    ? dotOuterRadius + 8 + maxSeriesLabelWidth + 8
     : 0;
 
   const representativeValue =
@@ -204,12 +211,13 @@ function useLiveChartSeriesController({
     insetsOverride: insets,
     yAxis: yAxisCfg !== null,
     badge: false,
+    badgeMetrics: metricsCfg.badge,
     xAxis: xAxisCfg !== null,
     font: skiaFont,
     formatValue,
     currentValue: representativeValue,
     pulse: dotCfg.pulse,
-    multiSeriesDotRadius: dotCfg.radius,
+    multiSeriesDotRadius: dotOuterRadius,
     multiSeriesValueLabel: dotCfg.valueLabel,
     multiSeriesMaxLabelWidth: maxSeriesLabelWidth,
   });
@@ -236,6 +244,7 @@ function useLiveChartSeriesController({
     timeWindow,
     paused,
     smoothing,
+    adaptiveSpeedBoost: metricsCfg.motion.adaptiveSpeedBoost,
     exaggerate,
     referenceValues: refValues,
     nonNegative,
@@ -282,6 +291,7 @@ function useLiveChartSeriesController({
     formatValue,
     skiaFont,
     yAxisCfg?.minGap ?? 36,
+    metricsCfg.grid,
   );
 
   const { xAxisEntries } = useXAxis(
@@ -296,6 +306,7 @@ function useLiveChartSeriesController({
     effectivePadding,
     scrubEnabled,
     onScrub,
+    scrubCfg?.panGestureDelay ?? 0,
   );
 
   // `projected` is used internally by the hit-test gesture; the overlay
@@ -331,8 +342,10 @@ function useLiveChartSeriesController({
     scrubCfg,
     gridStyleCfg,
     dotCfg,
+    dotOuterRadius,
     legendCfg,
     degenCfg,
+    metricsCfg,
     allRefLines,
     leftEdgeFadeCfg,
     // theme / layout / fonts
@@ -396,6 +409,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
     markersSV,
     series,
     emptyText,
+    metricsCfg,
   } = model;
 
   return (
@@ -462,28 +476,25 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
         />
       )}
 
-      <Group opacity={reveal.dotOpacity}>
-        <MultiSeriesDots
-          engine={engine}
-          padding={effectivePadding}
-          colors={lineColors}
-          radius={dotCfg.radius}
-          pulse={dotCfg.pulse}
-        />
-      </Group>
-
-      {dotCfg.valueLabel && (
+      {dotCfg.show && (
         <Group opacity={reveal.dotOpacity}>
-          <MultiSeriesValueLabels
+          <MultiSeriesDots
             engine={engine}
             padding={effectivePadding}
             colors={lineColors}
-            font={skiaFont}
-            dotRadius={dotCfg.radius}
+            radius={dotCfg.radius}
+            ring={dotCfg.ring}
+            ringColor={palette.badgeOuterBg}
+            color={dotCfg.color}
+            pulse={dotCfg.pulse}
           />
         </Group>
       )}
 
+      {/* Value labels are drawn later (after the crosshair layer) so the scrub
+          dim — which now covers the dots + pulse rings — never clips them.
+          They track each series' live value, not the scrub point. */}
+
       {degenCfg && (
         <Group opacity={reveal.dotOpacity}>
           <DegenParticlesOverlay
@@ -523,11 +534,42 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
         emptyText={emptyText}
         strokeWidth={strokeWidth}
         badge={false}
+        emptyMetrics={metricsCfg.emptyState}
       />
     </Group>
   );
 }
 
+/** Per-series live-value labels, drawn above the scrub dim so the dim (which
+ *  covers the dots + pulse rings) never clips them. Keeps the degen shake
+ *  transform so they track the shaken stack. */
+function SeriesValueLabelLayer({ model }: { model: LiveChartSeriesModel }) {
+  const {
+    dotCfg,
+    dotOuterRadius,
+    engine,
+    effectivePadding,
+    lineColors,
+    skiaFont,
+    reveal,
+    degenShakeTransform,
+  } = model;
+  if (!dotCfg.valueLabel) return null;
+  return (
+    <Group transform={degenShakeTransform}>
+      <Group opacity={reveal.dotOpacity}>
+        <MultiSeriesValueLabels
+          engine={engine}
+          padding={effectivePadding}
+          colors={lineColors}
+          font={skiaFont}
+          dotRadius={dotOuterRadius}
+        />
+      </Group>
+    </Group>
+  );
+}
+
 export function LiveChartSeries(props: LiveChartSeriesProps) {
   const model = useLiveChartSeriesController(props);
   const {
@@ -547,8 +589,20 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
     scrubCfg,
     crosshair,
     palette,
+    dotCfg,
+    dotOuterRadius,
   } = model;
 
+  // Extend the scrub dim past the plot's right edge to fully cover the series
+  // dots (with their halo) and pulse rings, all centered on that edge. The
+  // gutter reserves room beyond this for the value/Y-axis labels, drawn on top.
+  const liveDotExtent = Math.max(
+    dotOuterRadius,
+    dotCfg.pulse
+      ? pulseRadialOutset(dotCfg.pulse.maxRadius, dotCfg.pulse.strokeWidth)
+      : 0,
+  );
+
   const legend =
     legendCfg.position === "top" || legendCfg.position === "bottom" ? (
       <SeriesToggleChips
@@ -594,10 +648,15 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
                 padding={effectivePadding}
                 palette={palette}
                 dimOpacity={scrubCfg.dimOpacity}
+                liveDotExtent={liveDotExtent}
                 crosshairLineColor={scrubCfg.crosshairLineColor}
                 crosshairDimColor={scrubCfg.crosshairDimColor}
               />
             )}
+
+            {/* Per-series value labels on top of the scrub dim so the dim never
+                clips them (they track each series' live value, not the scrub). */}
+            <SeriesValueLabelLayer model={model} />
           </Canvas>
         </View>
       </GestureDetector>