react-native-livechart 4.17.0 → 4.19.0

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) ──────────────────────
@@ -152,8 +153,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. */
@@ -192,14 +197,14 @@ export interface ResolvedScrubConfig {
   hideOverlaysOnScrub: boolean;
   /** Reject outside plain-scrub starts and clamp active scrub X to the plot. */
   clampToPlot: boolean;
+  /** Candle mode: quantize the scrub X to the hovered candle's center. */
+  snapToCandles: boolean;
 }
 
 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;
@@ -686,8 +691,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(
@@ -714,7 +718,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,
@@ -734,6 +740,7 @@ const SCRUB_DEFAULTS: ResolvedScrubConfig = {
   panGestureDelay: 0,
   hideOverlaysOnScrub: false,
   clampToPlot: false,
+  snapToCandles: false,
 };
 
 const PER_SERIES_TOOLTIP_DEFAULTS: ResolvedPerSeriesTooltipConfig = {
@@ -767,11 +774,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) {
@@ -801,6 +804,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,
@@ -1178,7 +1194,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;
@@ -1200,15 +1248,19 @@ export function resolveDotRing(
 export interface ResolvedDotConfig {
   radius: number;
   ring: ResolvedDotRingConfig | null;
+  glow: ResolvedDotGlowConfig | null;
   show: boolean;
   color: string | undefined;
+  trackWhileParked: boolean;
 }
 
 const DOT_DEFAULTS: ResolvedDotConfig = {
   radius: 3.5,
   ring: RING_DEFAULTS,
+  glow: null,
   show: true,
   color: undefined,
+  trackWhileParked: false,
 };
 
 /**
@@ -1226,8 +1278,10 @@ 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/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 {
@@ -27,8 +27,8 @@ export const DEFAULT_PADDING: ChartPadding = {
  * The pill body starts `tl` px to the right of the gutter left edge (= dot x),
  * so the tail spans the gap between the dot and the pill body.
  *
- * When `showTail` is false the tail spike is omitted and only the round cap
- * radius is returned, letting callers shrink the right gutter.
+ * When `showTail` is false there is no tail geometry at all, so the pill body
+ * starts flush at the gutter left edge (+ dotGap) and no cap inset is reserved.
  */
 export function badgeTailAndCap(
   fontSize: number,
@@ -36,8 +36,9 @@ export function badgeTailAndCap(
   badge: BadgeMetrics = BADGE_METRICS_DEFAULTS,
 ): number {
   "worklet";
+  if (!showTail) return 0;
   const pillH = fontSize + badge.padY * 2;
-  return (showTail ? badge.tailLength : 0) + pillH / 2;
+  return badge.tailLength + pillH / 2;
 }
 
 /**
@@ -112,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;
 }
@@ -155,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;
 
@@ -282,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/crosshairShared.ts

@@ -4,6 +4,7 @@ import type { DerivedValue, SharedValue } from "react-native-reanimated";
 import { measureFontTextWidth } from "../lib/measureFontTextWidth";
 import { type ChartPadding } from "../draw/line";
 import { interpolateAtTime } from "../math/interpolate";
+import { pickCandleAtTime } from "../math/pickCandle";
 import type { CandlePoint } from "../types";
 
 const TOOLTIP_PAD_X = 8;
@@ -290,6 +291,36 @@ export function computeScrubTime(
   return winStart + fraction * windowSecs;
 }
 
+/**
+ * Quantizes a scrub X to the center of the candle whose time bucket contains
+ * it (`scrub.snapToCandles`) — the inverse of {@link computeScrubTime}
+ * followed by the forward mapping of the picked candle's center. Returns the
+ * raw X unchanged when the position falls in a gap between candles or when
+ * the plot has no horizontal extent / time window yet.
+ */
+export function snapScrubXToCandleCenter(
+  x: number,
+  candles: CandlePoint[],
+  liveCandle: CandlePoint | null,
+  candleWidthSecs: number,
+  padding: ChartPadding,
+  canvasWidth: number,
+  timestamp: number,
+  windowSecs: number,
+): number {
+  "worklet";
+  const chartW = canvasWidth - padding.left - padding.right;
+  if (chartW <= 0 || windowSecs <= 0) return x;
+  const winStart = timestamp - windowSecs;
+  const t = winStart + ((x - padding.left) / chartW) * windowSecs;
+  const candle = pickCandleAtTime(candles, liveCandle, t, candleWidthSecs);
+  if (!candle) return x;
+  return (
+    padding.left +
+    ((candle.time + candleWidthSecs / 2 - winStart) / windowSecs) * chartW
+  );
+}
+
 /**
  * Crosshair opacity: fades 1→0 over `fadeDistance` px as the crosshair
  * approaches the live dot at the right chart edge. A zero distance removes

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,7 +47,15 @@ export interface ChartLayoutConfig {
    * is not clipped. An explicit `insetsOverride` on a side wins over this floor.
    */
   pulse?: { maxRadius: number; strokeWidth: number } | null;
-  /** When false and badge uses the right gutter, omit BADGE_TAIL_LEN from the right padding. */
+  /**
+   * 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.
+   */
   badgeShowTail?: boolean;
   /** Multi-series dot radius — used to add spacing between dots and Y-axis labels. */
   multiSeriesDotRadius?: number;
@@ -117,15 +126,28 @@ export function resolveChartLayout(
     );
   }
 
-  if (config.pulse && config.yAxis && config.insetsOverride?.right == null) {
-    const outlet = pulseRadialOutset(
-      config.pulse.maxRadius,
-      config.pulse.strokeWidth,
-    );
+  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 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 (
+    dotEffectOutset > 0 &&
+    config.yAxis &&
+    !badgeUsesRightGutter &&
+    config.insetsOverride?.right == null
+  ) {
     const labelW = measuredYAxisLabelWidth ?? 49;
     rightPad = Math.max(
       rightPad,
-      minPaddingRightForYAxisWithPulse(outlet, labelW),
+      minPaddingRightForYAxisWithPulse(dotEffectOutset, labelW),
     );
   }
 
@@ -148,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
@@ -161,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;
 }

package/src/hooks/useChartPaths.ts

@@ -7,6 +7,10 @@ import type {
   SingleEngineState,
 } from "../core/useLiveChartEngine";
 import { buildLinePoints, type ChartPadding } from "../draw/line";
+import {
+  makeLineSimplifyScratch,
+  simplifyLinePoints,
+} from "../math/simplify";
 import { drawSpline, makeSplineScratch } from "../math/spline";
 import { sampleThresholdYAt, thresholdSampleSpanX } from "../math/threshold";
 import { blendPtsY, squigglifyPts } from "../math/squiggly";
@@ -52,6 +56,8 @@ export function useChartPaths(
    *  `samples[]` (so band geometry matches the shader exactly). Takes precedence
    *  over `thresholdY`, the constant (horizontal) case. */
   thresholdSamples?: SharedValue<number[]>,
+  /** Screen-space path simplification tolerance in pixels. `0` disables it. */
+  simplifyTolerance = 0,
 ) {
   const lineBuilder = usePathBuilder();
   const fillBuilder = usePathBuilder();
@@ -61,24 +67,28 @@ export function useChartPaths(
     emptyPath: SkPath;
     ptsA: number[];
     ptsB: number[];
+    rawPts: number[];
     ptsTick: boolean;
     squigglePts: number[];
     morphA: number[];
     morphB: number[];
     morphTick: boolean;
     scratch: ReturnType<typeof makeSplineScratch>;
+    simplifyScratch: ReturnType<typeof makeLineSimplifyScratch>;
   } | null>(null);
   if (cacheRef.current === null) {
     cacheRef.current = {
       emptyPath: Skia.Path.Make(),
       ptsA: [] as number[],
       ptsB: [] as number[],
+      rawPts: [] as number[],
       ptsTick: false,
       squigglePts: [] as number[],
       morphA: [] as number[],
       morphB: [] as number[],
       morphTick: false,
       scratch: makeSplineScratch(),
+      simplifyScratch: makeLineSimplifyScratch(),
     };
   }
 
@@ -94,32 +104,52 @@ export function useChartPaths(
       engine.edgeValue.get(),
       engine.viewEnd.get(),
     );
+    const simplify =
+      Number.isFinite(simplifyTolerance) && simplifyTolerance > 0
+        ? simplifyTolerance
+        : 0;
+    const now = engine.timestamp.get();
+    const windowSecs = engine.displayWindow.get();
+    const canvasWidth = engine.canvasWidth.get();
     const realPts = buildLinePoints(
       engine.data.get(),
       tipValue,
-      engine.timestamp.get(),
-      engine.displayWindow.get(),
+      now,
+      windowSecs,
       engine.displayMin.get(),
       engine.displayMax.get(),
-      engine.canvasWidth.get(),
+      canvasWidth,
       engine.canvasHeight.get(),
       padding,
-      buf,
+      simplify > 0 ? cache.rawPts : buf,
       // Only a live-following chart may extend the line to the right edge; a
       // parked (scrolled-back / overscrolled) window ends at its last real
       // point rather than fabricating a flat line into dataless space.
       engine.viewEnd.get() != null,
     );
+    const chartWidth = canvasWidth - padding.left - padding.right;
+    const absoluteXOffset =
+      windowSecs > 0 ? (now - windowSecs) * (chartWidth / windowSecs) : 0;
+    const renderPts =
+      simplify > 0
+        ? simplifyLinePoints(
+            realPts,
+            simplify,
+            buf,
+            cache.simplifyScratch,
+            absoluteXOffset,
+          )
+        : realPts;
 
     // Skip blending when fully revealed or no morphT provided
     const t = morphT?.get() ?? 1;
-    if (t >= 1 || realPts.length === 0) return realPts;
+    if (t >= 1 || renderPts.length === 0) return renderPts;
 
     // Compute squiggly Y values at the same X positions as the real line
     const centerY =
       (engine.canvasHeight.get() - padding.bottom + padding.top) / 2;
     const squigglyPts = squigglifyPts(
-      realPts,
+      renderPts,
       engine.timestamp.get(),
       centerY,
       squiggleAmplitude,
@@ -131,7 +161,7 @@ export function useChartPaths(
     cache.morphTick = !cache.morphTick;
     return blendPtsY(
       squigglyPts,
-      realPts,
+      renderPts,
       t,
       padding,
       engine.canvasWidth.get(),