react-native-livechart 4.21.0 → 4.22.0

package/src/components/MarkerOverlay.tsx

@@ -30,6 +30,7 @@ import {
   isConnectorMarker,
   markerAppearanceSig,
   type AtlasCell,
+  type MarkerAtlasPalette,
 } from "../draw/markerAtlas";
 import {
   markersSignature,
@@ -45,6 +46,7 @@ import type {
   LiveChartPalette,
   LiveChartPoint,
   Marker,
+  MarkerGroupBadge,
   MarkerRenderContext,
   SeriesConfig,
 } from "../types";
@@ -85,7 +87,12 @@ function pushGroupCountBadge(
   const bg = cells[groupBgSig(repColor)];
   if (bg) {
     transforms.push(
-      Skia.RSXform(invScale * mul, 0, cx - (bg.w * mul) / 2, cy - (bg.h * mul) / 2),
+      Skia.RSXform(
+        invScale * mul,
+        0,
+        cx - (bg.w * mul) / 2,
+        cy - (bg.h * mul) / 2,
+      ),
     );
     sprites.push(bg.rect);
   }
@@ -219,18 +226,7 @@ function ConnectorGlyph({
  *
  * Glyph precedence per marker: `image` → `icon` (text) → built-in `kind` shape.
  */
-export function MarkerOverlay({
-  markers,
-  engine,
-  padding,
-  palette,
-  font,
-  series,
-  lineData,
-  lineLinear,
-  renderMarker,
-  cluster,
-}: {
+type MarkerOverlayProps = {
   markers: SharedValue<Marker[]>;
   engine: ChartEngineLayout;
   padding: ChartPadding;
@@ -250,9 +246,24 @@ export function MarkerOverlay({
   renderMarker?: (marker: Marker, ctx: MarkerRenderContext) => unknown;
   /** Collision config; `"stacked"` fans/collapses co-located markers. */
   cluster: ResolvedMarkerCluster;
-}) {
+};
+
+function useMarkerOverlayModel({
+  markers,
+  engine,
+  padding,
+  palette,
+  font,
+  series,
+  lineData,
+  lineLinear,
+  renderMarker,
+  cluster,
+}: MarkerOverlayProps) {
   // Seed from the current markers at mount; the reaction below keeps it in sync.
-  const [snapshot, setSnapshot] = useState<Marker[]>(() => markers.get().slice());
+  const [snapshot, setSnapshot] = useState<Marker[]>(() =>
+    markers.get().slice(),
+  );
 
   // Read the `markers` prop from closure rather than a SharedValue passed
   // through `scheduleOnRN` (which loses `.get()`); mirrors the data model.
@@ -295,44 +306,85 @@ export function MarkerOverlay({
     return o;
   }, [customKey]);
 
-  // Rebuild the atlas image only when the set of distinct appearances or the
-  // theme/font changes — never per frame. `markersSignature` already drives the
-  // snapshot, so this useMemo re-runs at most at the snapshot cadence.
-  const appearanceKey = useMemo(() => {
-    const sigs = new Set<string>();
-    for (let i = 0; i < snapshot.length; i++) {
-      const m = snapshot[i];
-      if (!isConnectorMarker(m) && !customIds[m.id])
-        sigs.add(markerAppearanceSig(m));
-    }
-    return Array.from(sigs).sort().join("\x1e");
-  }, [snapshot, customIds]);
-  // Cells bake in resolved colors; include the palette fields they depend on.
-  const paletteKey = `${palette.bgRgb.join(",")}|${palette.line}|${palette.refLine}|${palette.dotUp}|${palette.refLabel}`;
   // Rasterize at the screen's device-pixel ratio so sprites stay crisp on
   // retina canvases instead of being upscaled from a logical-sized texture.
   const dpr = PixelRatio.get();
   const clusterStacked = cluster.mode === "stacked";
+  const [paletteBgR, paletteBgG, paletteBgB] = palette.bgRgb;
+  const paletteLine = palette.line;
+  const paletteRefLine = palette.refLine;
+  const paletteDotUp = palette.dotUp;
+  const paletteRefLabel = palette.refLabel;
+  const atlasPalette = useMemo<MarkerAtlasPalette>(
+    () => ({
+      bgRgb: [paletteBgR, paletteBgG, paletteBgB],
+      line: paletteLine,
+      refLine: paletteRefLine,
+      dotUp: paletteDotUp,
+      refLabel: paletteRefLabel,
+    }),
+    [
+      paletteBgR,
+      paletteBgG,
+      paletteBgB,
+      paletteLine,
+      paletteRefLine,
+      paletteDotUp,
+      paletteRefLabel,
+    ],
+  );
   // A dedicated group badge (object form) bakes one extra atlas cell; its image
   // identity + styling drive the rebuild key alongside the marker appearances.
   const groupBadgeCfg =
     typeof cluster.groupBadge === "object" ? cluster.groupBadge : undefined;
+  const hasGroupBadge = groupBadgeCfg !== undefined;
   const groupBadgeImage = groupBadgeCfg?.image;
-  const groupBadgeKey = groupBadgeCfg
-    ? `${groupBadgeCfg.icon ?? ""}|${groupBadgeCfg.color ?? ""}|${groupBadgeCfg.pill ? 1 : 0}|${groupBadgeCfg.size ?? ""}|${groupBadgeCfg.letterSpacing ?? ""}`
-    : "";
+  const groupBadgeIcon = groupBadgeCfg?.icon;
+  const groupBadgeColor = groupBadgeCfg?.color;
+  const groupBadgePill = groupBadgeCfg?.pill;
+  const groupBadgeSize = groupBadgeCfg?.size;
+  const groupBadgeLetterSpacing = groupBadgeCfg?.letterSpacing;
+  const atlasGroupBadge = useMemo<MarkerGroupBadge | undefined>(
+    () =>
+      hasGroupBadge
+        ? {
+            image: groupBadgeImage,
+            icon: groupBadgeIcon,
+            color: groupBadgeColor,
+            pill: groupBadgePill,
+            size: groupBadgeSize,
+            letterSpacing: groupBadgeLetterSpacing,
+          }
+        : undefined,
+    [
+      hasGroupBadge,
+      groupBadgeImage,
+      groupBadgeIcon,
+      groupBadgeColor,
+      groupBadgePill,
+      groupBadgeSize,
+      groupBadgeLetterSpacing,
+    ],
+  );
   const atlas = useMemo(
     () =>
       buildMarkerAtlas(
         snapshot.filter((m) => !customIds[m.id]),
-        palette,
+        atlasPalette,
         font,
         dpr,
         clusterStacked,
-        groupBadgeCfg,
+        atlasGroupBadge,
       ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- appearanceKey/paletteKey/groupBadgeKey capture the inputs that change cell pixels
-    [appearanceKey, paletteKey, font, dpr, clusterStacked, groupBadgeKey, groupBadgeImage],
+    [
+      snapshot,
+      customIds,
+      atlasPalette,
+      font,
+      dpr,
+      clusterStacked,
+      atlasGroupBadge,
+    ],
   );
   const cells: Record<string, AtlasCell> = atlas.cells;
   const atlasImage = atlas.image;
@@ -367,133 +419,133 @@ export function MarkerOverlay({
   // Single per-frame worklet: project all markers, then emit a transform +
   // source rect for each visible atlas marker. Three mappers total regardless
   // of marker count (this + the two thin readers below).
-  const atlasData = useDerivedValue(
-    () => {
-      const ms = markers.get();
-      const proj = projRef.current!;
-      proj.tick = !proj.tick;
-      const buf = proj.tick ? proj.a : proj.b;
-      projectMarkers(ms, buf, {
-        canvasWidth: engine.canvasWidth.get(),
-        canvasHeight: engine.canvasHeight.get(),
-        padTop: padding.top,
-        padBottom: padding.bottom,
-        padLeft: padding.left,
-        padRight: padding.right,
-        timestamp: engine.timestamp.get(),
-        displayWindow: engine.displayWindow.get(),
-        displayMin: engine.displayMin.get(),
-        displayMax: engine.displayMax.get(),
-        series: series?.get(),
-        lineData: lineData?.get(),
-        lineLinear,
-      });
-      clusterMarkers(ms, buf, {
-        config: cluster,
-        minY: 0,
-        maxY: engine.canvasHeight.get(),
-      });
-      const atlasFrames = atlasFrameRef.current!;
-      atlasFrames.tick = !atlasFrames.tick;
-      const frame = atlasFrames.tick ? atlasFrames.a : atlasFrames.b;
-      const transforms = frame.transforms;
-      const sprites = frame.sprites;
-      transforms.length = 0;
-      sprites.length = 0;
-      for (let i = 0; i < ms.length; i++) {
-        const pt = buf[i];
-        // Collapsed-cluster members fold into their representative's badge.
-        if (!pt.visible || pt.hidden) continue;
-        const m = ms[i];
-        if (isConnectorMarker(m)) continue;
-        // Custom-rendered markers are floated as RN views, not drawn here.
-        if (customIds[m.id]) continue;
-        // Collapsed cluster. By default a round count badge; with
-        // `groupBadge: "marker"` the representative marker's own glyph, or with a
-        // `MarkerGroupBadge` object a dedicated baked badge — either optionally
-        // carrying a corner count, all within this one `drawAtlas`.
-        if (pt.isGrouped) {
-          const repColor = m.color ?? defaultMarkerColor(m.kind, palette);
-          const gb = cluster.groupBadge;
-          // Pick the non-count glyph cell: a dedicated group badge (object form)
-          // or the representative marker's own appearance.
-          const glyphCell =
-            typeof gb === "object" && gb !== null
-              ? cells[GROUP_BADGE_SIG]
-              : gb === "marker"
-                ? cells[markerAppearanceSig(m)]
-                : undefined;
-          if (glyphCell) {
-            transforms.push(
-              Skia.RSXform(
-                invScale,
-                0,
-                pt.x - glyphCell.w / 2,
-                pt.y - glyphCell.h / 2,
-              ),
+  const atlasData = useDerivedValue(() => {
+    const ms = markers.get();
+    const proj = projRef.current!;
+    proj.tick = !proj.tick;
+    const buf = proj.tick ? proj.a : proj.b;
+    projectMarkers(ms, buf, {
+      canvasWidth: engine.canvasWidth.get(),
+      canvasHeight: engine.canvasHeight.get(),
+      padTop: padding.top,
+      padBottom: padding.bottom,
+      padLeft: padding.left,
+      padRight: padding.right,
+      timestamp: engine.timestamp.get(),
+      displayWindow: engine.displayWindow.get(),
+      displayMin: engine.displayMin.get(),
+      displayMax: engine.displayMax.get(),
+      series: series?.get(),
+      lineData: lineData?.get(),
+      lineLinear,
+    });
+    clusterMarkers(ms, buf, {
+      config: cluster,
+      minY: 0,
+      maxY: engine.canvasHeight.get(),
+    });
+    const atlasFrames = atlasFrameRef.current!;
+    atlasFrames.tick = !atlasFrames.tick;
+    const frame = atlasFrames.tick ? atlasFrames.a : atlasFrames.b;
+    const transforms = frame.transforms;
+    const sprites = frame.sprites;
+    transforms.length = 0;
+    sprites.length = 0;
+    for (let i = 0; i < ms.length; i++) {
+      const pt = buf[i];
+      // Collapsed-cluster members fold into their representative's badge.
+      if (!pt.visible || pt.hidden) continue;
+      const m = ms[i];
+      if (isConnectorMarker(m)) continue;
+      // Custom-rendered markers are floated as RN views, not drawn here.
+      if (customIds[m.id]) continue;
+      // Collapsed cluster. By default a round count badge; with
+      // `groupBadge: "marker"` the representative marker's own glyph, or with a
+      // `MarkerGroupBadge` object a dedicated baked badge — either optionally
+      // carrying a corner count, all within this one `drawAtlas`.
+      if (pt.isGrouped) {
+        const repColor = m.color ?? defaultMarkerColor(m.kind, palette);
+        const gb = cluster.groupBadge;
+        // Pick the non-count glyph cell: a dedicated group badge (object form)
+        // or the representative marker's own appearance.
+        const glyphCell =
+          typeof gb === "object" && gb !== null
+            ? cells[GROUP_BADGE_SIG]
+            : gb === "marker"
+              ? cells[markerAppearanceSig(m)]
+              : undefined;
+        if (glyphCell) {
+          transforms.push(
+            Skia.RSXform(
+              invScale,
+              0,
+              pt.x - glyphCell.w / 2,
+              pt.y - glyphCell.h / 2,
+            ),
+          );
+          sprites.push(glyphCell.rect);
+          if (cluster.showGroupCount) {
+            pushGroupCountBadge(
+              transforms,
+              sprites,
+              cells,
+              digitWidths,
+              invScale,
+              pt.x + (glyphCell.w / 2) * GROUP_CORNER_INSET,
+              pt.y - (glyphCell.h / 2) * GROUP_CORNER_INSET,
+              repColor,
+              pt.groupCount,
+              GROUP_CORNER_SCALE,
+              groupBadgeCfg?.letterSpacing ?? 0,
             );
-            sprites.push(glyphCell.rect);
-            if (cluster.showGroupCount) {
-              pushGroupCountBadge(
-                transforms,
-                sprites,
-                cells,
-                digitWidths,
-                invScale,
-                pt.x + (glyphCell.w / 2) * GROUP_CORNER_INSET,
-                pt.y - (glyphCell.h / 2) * GROUP_CORNER_INSET,
-                repColor,
-                pt.groupCount,
-                GROUP_CORNER_SCALE,
-                groupBadgeCfg?.letterSpacing ?? 0,
-              );
-            }
-            continue;
           }
-          // Default — or fall back here when a non-count badge has no baked cell
-          // (e.g. an empty group-badge config): the round count badge.
-          pushGroupCountBadge(
-            transforms,
-            sprites,
-            cells,
-            digitWidths,
-            invScale,
-            pt.x,
-            pt.y,
-            repColor,
-            pt.groupCount,
-            1,
-            groupBadgeCfg?.letterSpacing ?? 0,
-          );
           continue;
         }
-        const cell = cells[markerAppearanceSig(m)];
-        if (!cell) continue;
-        // Center the cell on the projected point. The cell's source rect is in
-        // device pixels, so scale by 1/dpr to land it at its logical size.
-        transforms.push(
-          Skia.RSXform(invScale, 0, pt.x - cell.w / 2, pt.y - cell.h / 2),
+        // Default — or fall back here when a non-count badge has no baked cell
+        // (e.g. an empty group-badge config): the round count badge.
+        pushGroupCountBadge(
+          transforms,
+          sprites,
+          cells,
+          digitWidths,
+          invScale,
+          pt.x,
+          pt.y,
+          repColor,
+          pt.groupCount,
+          1,
+          groupBadgeCfg?.letterSpacing ?? 0,
         );
-        sprites.push(cell.rect);
+        continue;
       }
-      return frame;
-    },
-    [
-      cells,
-      customIds,
-      invScale,
-      digitWidths,
-      markers,
-      engine,
-      padding,
-      palette,
-      series,
-      lineData,
-      lineLinear,
-      cluster,
-    ],
+      const cell = cells[markerAppearanceSig(m)];
+      if (!cell) continue;
+      // Center the cell on the projected point. The cell's source rect is in
+      // device pixels, so scale by 1/dpr to land it at its logical size.
+      transforms.push(
+        Skia.RSXform(invScale, 0, pt.x - cell.w / 2, pt.y - cell.h / 2),
+      );
+      sprites.push(cell.rect);
+    }
+    return frame;
+  }, [
+    cells,
+    customIds,
+    invScale,
+    digitWidths,
+    markers,
+    engine,
+    padding,
+    palette,
+    series,
+    lineData,
+    lineLinear,
+    cluster,
+  ]);
+  const transforms = useDerivedValue(
+    () => atlasData.get().transforms,
+    [atlasData],
   );
-  const transforms = useDerivedValue(() => atlasData.get().transforms, [atlasData]);
   const sprites = useDerivedValue(() => atlasData.get().sprites, [atlasData]);
 
   const axisY = useDerivedValue(
@@ -502,6 +554,13 @@ export function MarkerOverlay({
 
   const connectors = snapshot.filter(isConnectorMarker);
 
+  return { atlasImage, sprites, transforms, connectors, axisY };
+}
+
+export function MarkerOverlay(props: MarkerOverlayProps) {
+  const { engine, padding, palette, series, lineData, lineLinear } = props;
+  const { atlasImage, sprites, transforms, connectors, axisY } =
+    useMarkerOverlayModel(props);
   return (
     <Group>
       {atlasImage && (

package/src/components/ReferenceLineOverlay.tsx

@@ -18,7 +18,10 @@ import {
   type ReferenceLineLayout,
 } from "../hooks/useReferenceLine";
 import { MONO_FONT_FAMILY } from "../lib/monoFontFamily";
-import { referenceLineForm, resolveReferenceBadge } from "../math/referenceLines";
+import {
+  referenceLineForm,
+  resolveReferenceBadge,
+} from "../math/referenceLines";
 import type { FontConfig, LiveChartPalette, ReferenceLine } from "../types";
 import { ReferenceLineSeriesOverlay } from "./ReferenceLineSeriesOverlay";
 
@@ -65,7 +68,7 @@ type ReferenceLineOverlayProps = {
    * this line — used when a custom `renderReferenceLine` element owns the tag.
    * The line / band stroke and a badged line's dashed connector still draw. No
    * effect on the base pass.
-  */
+   */
   suppressTag?: boolean;
   /**
    * Suppress the built-in tag only while the line is off-axis. Used by
@@ -117,6 +120,52 @@ export function ReferenceLineOverlay(props: ReferenceLineOverlayProps) {
   return <ReferenceLineStaticOverlay {...props} />;
 }
 
+function resolveStaticReferenceLineAppearance(
+  line: ReferenceLine,
+  palette: LiveChartPalette,
+  fontProp: FontConfig | undefined,
+) {
+  const form = referenceLineForm(line);
+  const isBand = form === "value-band" || form === "time-band";
+  const color = line.color ?? palette.refLine;
+  const badge = resolveReferenceBadge(line);
+  const badgeHasFontOverride =
+    badge != null &&
+    (badge.fontSize != null ||
+      badge.fontFamily != null ||
+      badge.fontWeight != null);
+
+  return {
+    form,
+    isBand,
+    color,
+    fillColor: line.fillColor ?? color,
+    strokeOpacity: Math.max(0, Math.min(1, line.strokeOpacity ?? 1)),
+    badge,
+    badgeHasFontOverride,
+    badgeFontConfig: badgeHasFontOverride
+      ? {
+          ...fontProp,
+          fontFamily: badge?.fontFamily ?? fontProp?.fontFamily,
+          fontSize: badge?.fontSize ?? fontProp?.fontSize,
+          fontWeight: badge?.fontWeight ?? fontProp?.fontWeight,
+        }
+      : fontProp,
+    labelColor:
+      badge?.textColor ?? line.labelColor ?? line.color ?? palette.refLabel,
+    strokeWidth: line.strokeWidth ?? 1,
+    intervals: line.intervals ?? [4, 4],
+    bandFillOpacity: line.fillOpacity ?? BAND_FILL_OPACITY,
+    hasBandBorder: isBand && line.strokeWidth !== undefined,
+    badgeBackground: badge?.background ?? palette.tooltipBg,
+    badgeBorderColor: badge?.borderColor ?? color,
+    badgeBorderWidth: badge?.borderWidth ?? 1,
+    badgeRadius: badge?.radius ?? BADGE_PILL_RADIUS,
+    badgeOffsetX: badge?.offsetX ?? 0,
+    badgeOffsetY: badge?.offsetY ?? 0,
+  };
+}
+
 function ReferenceLineStaticOverlay({
   engine,
   padding,
@@ -136,33 +185,30 @@ function ReferenceLineStaticOverlay({
   labelRightMargin,
   gridEndGap,
 }: ReferenceLineOverlayProps) {
-  const form = referenceLineForm(line);
-  const isBand = form === "value-band" || form === "time-band";
+  const {
+    form,
+    isBand,
+    color,
+    fillColor,
+    strokeOpacity,
+    badge,
+    badgeHasFontOverride,
+    badgeFontConfig,
+    labelColor,
+    strokeWidth,
+    intervals,
+    bandFillOpacity,
+    hasBandBorder,
+    badgeBackground,
+    badgeBorderColor,
+    badgeBorderWidth,
+    badgeRadius,
+    badgeOffsetX,
+    badgeOffsetY,
+  } = resolveStaticReferenceLineAppearance(line, palette, fontProp);
 
-  const color = line.color ?? palette.refLine;
-  const fillColor = line.fillColor ?? color;
-  const strokeOpacity = Math.max(0, Math.min(1, line.strokeOpacity ?? 1));
-
-  // Resolved badge appearance (badge config → fallback flat fields → theme).
-  const badge = resolveReferenceBadge(line);
-
-  // Per-badge font (size/family/weight) override; reuses the chart `font` when no
-  // badge font knob is set, so plain lines and gutter labels are unchanged. The
-  // built font drives pill measurement (via useReferenceLine) and the badge text.
-  const badgeHasFontOverride =
-    badge != null &&
-    (badge.fontSize != null ||
-      badge.fontFamily != null ||
-      badge.fontWeight != null);
   const badgeFontOverride = useChartSkiaFont(
-    badgeHasFontOverride
-      ? {
-          ...fontProp,
-          fontFamily: badge?.fontFamily ?? fontProp?.fontFamily,
-          fontSize: badge?.fontSize ?? fontProp?.fontSize,
-          fontWeight: badge?.fontWeight ?? fontProp?.fontWeight,
-        }
-      : fontProp,
+    badgeFontConfig,
     MONO_FONT_FAMILY,
     palette.labelFontSize,
   );
@@ -182,27 +228,6 @@ function ReferenceLineStaticOverlay({
     font,
   );
 
-  const labelColor =
-    badge?.textColor ?? line.labelColor ?? line.color ?? palette.refLabel;
-  const strokeWidth = line.strokeWidth ?? 1;
-  const intervals = line.intervals ?? [4, 4];
-
-  // Band fill + optional dashed border (border only when strokeWidth is set).
-  const bandFillOpacity = line.fillOpacity ?? BAND_FILL_OPACITY;
-  const hasBandBorder = isBand && line.strokeWidth !== undefined;
-
-  const badgeBackground = badge?.background ?? palette.tooltipBg;
-  const badgeBorderColor = badge?.borderColor ?? color;
-  const badgeBorderWidth = badge?.borderWidth ?? 1;
-  const badgeRadius = badge?.radius ?? BADGE_PILL_RADIUS;
-  // Nudge the whole badge (connector + pill + chevron + icon + label) off its anchor.
-  const badgeOffsetX = badge?.offsetX ?? 0;
-  const badgeOffsetY = badge?.offsetY ?? 0;
-  const badgeTransform =
-    badgeOffsetX !== 0 || badgeOffsetY !== 0
-      ? [{ translateX: badgeOffsetX }, { translateY: badgeOffsetY }]
-      : undefined;
-
   if (!badgeLayer) {
     return (
       <ReferenceLineBasePass
@@ -412,7 +437,7 @@ function ReferenceLineBadgePass({
       const customTagActive =
         suppressTag || (suppressTagWhenOffAxis && l.offAxis);
       const customWidth = customTagActive
-        ? customTagWidths?.get()[index] ?? 0
+        ? (customTagWidths?.get()[index] ?? 0)
         : 0;
       if (customWidth > 0) {
         if (badgePosition === "left") {
@@ -466,7 +491,9 @@ function ReferenceLineBadgePass({
     const grouped = groupHidden ? groupHidden.get()[index] === true : false;
     const customTagActive =
       suppressTag || (suppressTagWhenOffAxis && l.offAxis);
-    return !customTagActive && !grouped && l.visible && l.label.length > 0 ? 1 : 0;
+    return !customTagActive && !grouped && l.visible && l.label.length > 0
+      ? 1
+      : 0;
   });
   const iconOpacity = useDerivedValue(() => {
     const l = layout.get();

package/src/components/ReferenceLineSeriesOverlay.tsx

@@ -38,11 +38,13 @@ export function ReferenceLineSeriesOverlay({
   badgeLayer: boolean;
 }) {
   const points = line.series ?? [];
+  const extendToStart = line.extendToStart ?? true;
   const extendToNow = line.extendToNow ?? true;
   const geometry = useReferenceLineSeries(
     engine,
     padding,
     points,
+    extendToStart,
     extendToNow,
   );
   const color = line.color ?? palette.refLine;

package/src/components/ThresholdLineOverlay.tsx

@@ -36,6 +36,8 @@ interface ThresholdMarkerProps {
   /** When set, draw the marker as this time-varying threshold polyline (`[x, y, …]`)
    *  instead of a horizontal line at `lineY`. */
   seriesPts?: SharedValue<number[]>;
+  /** Optional first rendered X for a non-extended series badge. */
+  leftAnchorX?: SharedValue<number>;
 }
 
 /**
@@ -126,6 +128,7 @@ export function ThresholdBadgeOverlay({
   palette,
   font,
   formatValue,
+  leftAnchorX,
 }: ThresholdMarkerProps) {
   const { label, labelPosition, showValue } = cfg;
   const badgeBackground = palette.tooltipBg;
@@ -155,12 +158,19 @@ export function ThresholdBadgeOverlay({
   const pillW = useDerivedValue(
     () => measureFontTextWidth(font, labelText.get()) + BADGE_PAD_X * 2,
   );
-  // Left: flush to the canvas edge. Right: flush to the right plot edge.
-  const pillX = useDerivedValue(() =>
-    labelPosition === "right"
-      ? engine.canvasWidth.get() - padding.right - BADGE_EDGE_INSET - pillW.get()
-      : BADGE_EDGE_INSET,
-  );
+  // A non-extended series' left badge follows its first rendered point, while
+  // staying fully inside the plot near the live edge. Other left badges retain
+  // the legacy canvas-edge position.
+  const pillX = useDerivedValue(() => {
+    if (labelPosition === "right") {
+      return engine.canvasWidth.get() - padding.right - BADGE_EDGE_INSET - pillW.get();
+    }
+    if (!leftAnchorX) return BADGE_EDGE_INSET;
+    const minX = padding.left + BADGE_EDGE_INSET;
+    const maxX =
+      engine.canvasWidth.get() - padding.right - BADGE_EDGE_INSET - pillW.get();
+    return Math.max(minX, Math.min(leftAnchorX.get(), maxX));
+  });
   const pillY = useDerivedValue(
     () => lineY.get() - baselineOffset + fontAscent - BADGE_PAD_Y,
   );