react-native-livechart 4.21.1 → 4.22.1

package/src/components/CustomThresholdBadgeOverlay.tsx

@@ -24,6 +24,7 @@ export function CustomThresholdBadgeOverlay({
   y,
   visible,
   position,
+  leftAnchorX,
 }: {
   element: React.ReactElement;
   engine: ChartEngineLayout;
@@ -31,6 +32,8 @@ export function CustomThresholdBadgeOverlay({
   y: SharedValue<number>;
   visible: SharedValue<boolean>;
   position: "left" | "right";
+  /** Optional first rendered X for a non-extended series badge. */
+  leftAnchorX?: SharedValue<number>;
 }) {
   const size = useSharedValue({ width: 0, height: 0 });
   const onLayout = (event: LayoutChangeEvent) => {
@@ -43,10 +46,14 @@ export function CustomThresholdBadgeOverlay({
     const yy = y.get();
     const measured = size.get();
     const show = visible.get() && canvasWidth > 0 && Number.isFinite(yy);
-    const translateX =
-      position === "right"
-        ? canvasWidth - padding.right - EDGE_INSET - measured.width
-        : EDGE_INSET;
+    let translateX = EDGE_INSET;
+    if (position === "right") {
+      translateX = canvasWidth - padding.right - EDGE_INSET - measured.width;
+    } else if (leftAnchorX) {
+      const minX = padding.left + EDGE_INSET;
+      const maxX = canvasWidth - padding.right - EDGE_INSET - measured.width;
+      translateX = Math.max(minX, Math.min(leftAnchorX.get(), maxX));
+    }
     return {
       opacity: show ? 1 : 0,
       transform: [

package/src/components/LiveChart.tsx

@@ -672,6 +672,7 @@ function useThresholdGeometryState({
       thresholdValue,
       thresholdSeriesSV,
       thresholdCfg?.extendToNow ?? true,
+      thresholdCfg?.extendToStart ?? true,
       thresholdCfg?.line?.labelAnchor ?? "last",
     ),
   };
@@ -681,6 +682,7 @@ function useThresholdShaderUniforms({
   engine,
   padding,
   samples,
+  clipLeftX,
   clipRightX,
   thresholdCfg,
   palette,
@@ -689,6 +691,7 @@ function useThresholdShaderUniforms({
   engine: ReturnType<typeof useLiveChartEngine>;
   padding: ChartPadding;
   samples: SharedValue<number[]>;
+  clipLeftX: SharedValue<number>;
   clipRightX: SharedValue<number>;
   thresholdCfg: ReturnType<typeof resolveThreshold>;
   palette: LiveChartPalette;
@@ -714,6 +717,7 @@ function useThresholdShaderUniforms({
       vectors?.strokeAbove ?? THRESHOLD_FALLBACK_COLOR,
       vectors?.strokeBelow ?? THRESHOLD_FALLBACK_COLOR,
       vectors?.strokeRest ?? THRESHOLD_FALLBACK_COLOR,
+      clipLeftX,
       clipRightX,
     ),
     thresholdFillUniforms: useThresholdSplitUniforms(
@@ -723,6 +727,7 @@ function useThresholdShaderUniforms({
       vectors?.fillAbove ?? THRESHOLD_FALLBACK_COLOR,
       vectors?.fillBelow ?? THRESHOLD_FALLBACK_COLOR,
       TRANSPARENT_VEC4,
+      clipLeftX,
       clipRightX,
     ),
   };
@@ -778,6 +783,10 @@ function useThresholdBadgeProjection({
     thresholdSeriesPts: thresholdIsSeries
       ? thresholdSeriesGeom.screenPts
       : undefined,
+    thresholdBadgeLeftAnchorX:
+      thresholdIsSeries && thresholdCfg?.extendToStart === false
+        ? thresholdSeriesGeom.clipLeftX
+        : undefined,
   };
 }
 
@@ -816,6 +825,7 @@ function useLiveChartThresholdModel({
     engine,
     padding,
     samples: thresholdSeriesGeom.samples,
+    clipLeftX: thresholdSeriesGeom.clipLeftX,
     clipRightX: thresholdSeriesGeom.clipRightX,
     thresholdCfg,
     palette,
@@ -1074,6 +1084,7 @@ function resolveLiveEngineModeInputs({
       thresholdInRange && thresholdIsSeries
         ? (thresholdSeriesSV ?? (thresholdCfg?.value as LiveChartPoint[]))
         : undefined,
+    thresholdRangeExtendToStart: thresholdCfg?.extendToStart ?? true,
     thresholdRangeExtendToNow: thresholdCfg?.extendToNow ?? true,
     candles: isCandle ? candlesEngine : candles,
     liveCandle: isCandle ? liveEngine : liveCandle,
@@ -1787,6 +1798,7 @@ function useLiveChartController({
     thresholdMarkerValue,
     thresholdCustomBadge,
     thresholdSeriesPts,
+    thresholdBadgeLeftAnchorX,
     thresholdFillLineY,
     thresholdFillSamples,
   } = useLiveChartThresholdModel({
@@ -2214,6 +2226,7 @@ function useLiveChartController({
     thresholdMarkerValue,
     thresholdCustomBadge,
     thresholdSeriesPts,
+    thresholdBadgeLeftAnchorX,
     badgeUsesRightGutter,
     // theme / layout / fonts
     palette,
@@ -3016,6 +3029,7 @@ function ChartStack({
     thresholdMarkerValue,
     thresholdCustomBadge,
     thresholdSeriesPts,
+    thresholdBadgeLeftAnchorX,
     formatValue,
     lineGroupOpacity,
     seriesOpacity,
@@ -3185,6 +3199,7 @@ function ChartStack({
           palette={palette}
           font={skiaFont}
           formatValue={formatValue}
+          leftAnchorX={thresholdBadgeLeftAnchorX}
         />
       )}
 
@@ -3767,6 +3782,7 @@ function ChartNativeOverlays({ model }: { model: LiveChartModel }) {
     thresholdCfg,
     thresholdMarkerLineY,
     thresholdBadgeVisible,
+    thresholdBadgeLeftAnchorX,
     markersActive,
     renderMarker,
     renderReferenceLine,
@@ -3803,6 +3819,7 @@ function ChartNativeOverlays({ model }: { model: LiveChartModel }) {
           y={thresholdMarkerLineY}
           visible={thresholdBadgeVisible}
           position={thresholdCfg.line.labelPosition}
+          leftAnchorX={thresholdBadgeLeftAnchorX}
         />
       ) : null}
       {hasAnnotations ? <ChartCustomAnnotations model={model} /> : null}

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,
   );

package/src/components/thresholdSplitShaderSource.ts

@@ -37,6 +37,9 @@ export function buildThresholdSplitShaderSource(sampleCount: number): string {
 // and glides with the window so features move fluidly, frame to frame.
 uniform float sampleLeft;
 uniform float sampleRight;
+// X where the threshold starts (extendToStart: false → the first point's
+// pixel-X, else a large negative sentinel). Fragments left of it use restColor.
+uniform float clipLeft;
 // X where the threshold ends (extendToNow: false → the last point's pixel-X,
 // else a huge sentinel). Fragments right of it paint restColor: the plain line
 // color for the stroke, transparent for the band.
@@ -51,7 +54,7 @@ ${lookup}
 }
 
 half4 main(vec2 xy) {
-  if (xy.x > clipRight) {
+  if (xy.x < clipLeft || xy.x > clipRight) {
     return half4(half3(restColor.rgb) * restColor.a, restColor.a);
   }
   float span = sampleRight - sampleLeft;

package/src/core/liveChartEngineTick.ts

@@ -61,6 +61,9 @@ export interface EngineTickInput {
    * but windowed each tick.
    */
   thresholdRangePoints?: LiveChartPoint[];
+  /** Whether {@link thresholdRangePoints} extends flat before its first point to
+   *  the visible window start (`threshold.extendToStart`). Default `true`. */
+  thresholdRangeExtendToStart?: boolean;
   /** Whether {@link thresholdRangePoints} extends flat past its last point to
    *  "now" (`threshold.extendToNow`). Default `true`. */
   thresholdRangeExtendToNow?: boolean;
@@ -367,6 +370,7 @@ export function tickLiveChartEngineFrame(
       thrPts,
       state.timestamp,
       state.displayWindow,
+      input.thresholdRangeExtendToStart ?? true,
       input.thresholdRangeExtendToNow ?? true,
       THRESHOLD_RANGE_SCRATCH,
     );

package/src/core/resolveConfig.ts

@@ -447,6 +447,8 @@ export interface ResolvedThresholdConfig {
   fillOpacity: number;
   /** Fold the threshold into the Y-axis range fit. */
   includeInRange: boolean;
+  /** Series forms: extend flat before the first point to the visible window's start. */
+  extendToStart: boolean;
   /** Series forms: extend flat past the last point to "now". */
   extendToNow: boolean;
   line: ResolvedThresholdLineConfig | null;
@@ -495,6 +497,7 @@ export function resolveThreshold(
       (typeof prop.fill === "object" ? prop.fill.opacity : undefined) ??
       THRESHOLD_FILL_OPACITY_DEFAULT,
     includeInRange: prop.includeInRange ?? false,
+    extendToStart: prop.extendToStart ?? true,
     extendToNow: prop.extendToNow ?? true,
     line: resolveThresholdLine(prop.line),
   };

package/src/core/useLiveChartEngine.ts

@@ -54,6 +54,9 @@ export interface EngineConfig {
    * `LiveChartPoint[]` form.
    */
   thresholdRangePoints?: SharedValue<LiveChartPoint[]> | LiveChartPoint[];
+  /** With {@link thresholdRangePoints}: whether the series extends flat before
+   *  its first point to the visible window start. Default `true`. */
+  thresholdRangeExtendToStart?: boolean;
   /** With {@link thresholdRangePoints}: whether the series extends flat past its
    *  last point to "now" (`threshold.extendToNow`). Default `true`. */
   thresholdRangeExtendToNow?: boolean;
@@ -217,6 +220,7 @@ export interface EngineFrameRefs {
   referenceValues?: SharedValue<number[] | undefined>;
   /** Series threshold folded into the range fit (`threshold.includeInRange`). */
   thresholdRangePoints?: SharedValue<LiveChartPoint[] | undefined>;
+  thresholdRangeExtendToStart?: SharedValue<boolean>;
   thresholdRangeExtendToNow?: SharedValue<boolean>;
   nonNegativeSV?: SharedValue<boolean>;
   maxValueSV?: SharedValue<number | undefined>;
@@ -353,6 +357,8 @@ export function applyLiveChartEngineFrame(
   input.referenceValue = sv.referenceValue.value;
   input.referenceValues = sv.referenceValues?.value;
   input.thresholdRangePoints = sv.thresholdRangePoints?.value;
+  input.thresholdRangeExtendToStart =
+    sv.thresholdRangeExtendToStart?.value ?? true;
   input.thresholdRangeExtendToNow = sv.thresholdRangeExtendToNow?.value ?? true;
   input.nonNegative = sv.nonNegativeSV?.value ?? false;
   input.maxValue = sv.maxValueSV?.value;
@@ -453,6 +459,9 @@ export function useLiveChartEngine(
   const thresholdRangeExtendToNow = useDerivedValue(
     () => config.thresholdRangeExtendToNow ?? true,
   );
+  const thresholdRangeExtendToStart = useDerivedValue(
+    () => config.thresholdRangeExtendToStart ?? true,
+  );
   const nonNegativeSV = useDerivedValue(() => config.nonNegative ?? false);
   const maxValueSV = useDerivedValue(() => config.maxValue);
   const nowOverrideSV = useDerivedValue(() => config.nowOverride);
@@ -559,6 +568,7 @@ export function useLiveChartEngine(
     referenceValue,
     referenceValues,
     thresholdRangePoints,
+    thresholdRangeExtendToStart,
     thresholdRangeExtendToNow,
     nonNegativeSV,
     maxValueSV,

package/src/hooks/useChartSkiaFont.ts

@@ -5,6 +5,7 @@ import {
   type SkFont,
   type SkFontMgr,
 } from "@shopify/react-native-skia";
+import { useMemo } from "react";
 
 import { resolveFontConfig } from "../core/resolveConfig";
 import type { FontConfig } from "../types";
@@ -15,7 +16,7 @@ import type { FontConfig } from "../types";
  * fonts per render, so a screen full of sparklines would otherwise re-match
  * the same `{family, size, weight}` dozens of times. `SkFont` instances are
  * immutable and safe to share across canvases. Custom `fontManager`s bypass
- * the cache (their identity isn't part of the key).
+ * this module-wide cache; their fonts are memoized per hook instead.
  */
 const systemFontCache = new Map<string, SkFont>();
 let systemFontMgr: SkFontMgr | null = null;
@@ -38,6 +39,8 @@ function matchSystemFont(
  * Resolves Skia text for charts: optional bundled `typeface` via `useFont`, otherwise
  * `matchFont` with optional custom `fontManager`. System-font matches are cached
  * module-wide, so many charts sharing a family/size/weight resolve it once.
+ * Custom-manager matches are reused while the manager and resolved inputs stay
+ * unchanged, even if the caller passes a new font config object each render.
  */
 export function useChartSkiaFont(
   fontProp: FontConfig | undefined,
@@ -49,12 +52,12 @@ export function useChartSkiaFont(
   const typefaceSource = fontProp?.typeface ?? null;
   const customFont = useFont(typefaceSource, fontSize);
 
-  const fallbackFont = fontProp?.fontManager
-    ? matchFont({ fontFamily, fontSize, fontWeight }, fontProp.fontManager)
-    : matchSystemFont(fontFamily, fontSize, fontWeight);
-
-  if (typefaceSource != null) {
-    return customFont ?? fallbackFont;
-  }
-  return fallbackFont;
+  const fontManager = fontProp?.fontManager;
+  return useMemo(() => {
+    // A loaded typeface needs no fallback, so avoid matching an unused font.
+    if (typefaceSource != null && customFont) return customFont;
+    return fontManager
+      ? matchFont({ fontFamily, fontSize, fontWeight }, fontManager)
+      : matchSystemFont(fontFamily, fontSize, fontWeight);
+  }, [typefaceSource, customFont, fontManager, fontFamily, fontSize, fontWeight]);
 }

package/src/hooks/useReferenceLineSeries.ts

@@ -34,6 +34,7 @@ export function useReferenceLineSeries(
   engine: ChartEngineLayout,
   padding: ChartPadding,
   points: LiveChartPoint[],
+  extendToStart: boolean,
   extendToNow: boolean,
 ): ReferenceLineSeriesGeometry {
   const cacheRef = useRef<{
@@ -57,6 +58,7 @@ export function useReferenceLineSeries(
       engine.canvasWidth.get(),
       engine.canvasHeight.get(),
       padding,
+      extendToStart,
       extendToNow,
       cache.tick ? cache.a : cache.b,
     );
@@ -86,6 +88,9 @@ export function useReferenceLineSeries(
   );
   const currentVisible = useDerivedValue(() => {
     if (points.length === 0) return false;
+    if (!extendToStart && points[0].time > engine.timestamp.get()) {
+      return false;
+    }
     if (!extendToNow && points[points.length - 1].time < engine.timestamp.get()) {
       return false;
     }

package/src/hooks/useThreshold.ts

@@ -22,6 +22,8 @@ export type ThresholdValue = SharedValue<number> | LiveChartPoint[];
 
 /** `clipRight` sentinel when the threshold extends to "now" (no forward cutoff). */
 export const THRESHOLD_NO_CLIP = 1e9;
+/** `clipLeft` sentinel when the threshold extends to the window start. */
+export const THRESHOLD_NO_CLIP_LEFT = -1e9;
 
 export interface ThresholdGeometry {
   /** Threshold pixel-Y within the canvas, or NaN before layout / degenerate range. */
@@ -104,6 +106,9 @@ export interface ThresholdSeriesGeometry {
    *  part of the threshold. (`visible` can still be true when that one endpoint
    *  is off-plot.) */
   badgeVisible: SharedValue<boolean>;
+  /** Pixel-X where the threshold starts: the first point's X with
+   *  `extendToStart` off, else {@link THRESHOLD_NO_CLIP_LEFT}. */
+  clipLeftX: SharedValue<number>;
   /** Pixel-X where the threshold ends: the last point's X with `extendToNow`
    *  off, else {@link THRESHOLD_NO_CLIP}. The shader paints its plain
    *  `restColor` right of it; the marker polyline stops there. */
@@ -119,7 +124,7 @@ const EMPTY_SAMPLES: number[] = new Array(THRESHOLD_SAMPLE_COUNT).fill(0);
  * `LiveChartPoint[]` `value` or a live `SharedValue<LiveChartPoint[]>` `series`
  * (which wins when both are given): the screen polyline (marker line +
  * fill-band bottom), the shader's pixel-Y `samples[]`, the configured endpoint
- * value/anchor for the badge, and the `extendToNow` cutoff X. The array buffers
+ * value/anchor for the badge, and the endpoint cutoff X values. The array buffers
  * ping-pong (Reanimated only re-notifies subscribers when the returned reference
  * changes). When the threshold is a constant `SharedValue<number>` every
  * worklet short-circuits cheaply and {@link useThreshold} drives the render
@@ -131,6 +136,7 @@ export function useThresholdSeries(
   value: ThresholdValue,
   series: SharedValue<LiveChartPoint[]> | null = null,
   extendToNow = true,
+  extendToStart = true,
   labelAnchor: "first" | "last" = "last",
 ): ThresholdSeriesGeometry {
   const cacheRef = useRef<{
@@ -176,6 +182,19 @@ export function useThresholdSeries(
     );
   });
 
+  const clipLeftX = useDerivedValue(() => {
+    if (extendToStart) return THRESHOLD_NO_CLIP_LEFT;
+    const pts = series ? series.get() : Array.isArray(value) ? value : null;
+    if (pts === null || pts.length === 0) return THRESHOLD_NO_CLIP_LEFT;
+    const win = engine.displayWindow.get();
+    const plotLeft = padding.left;
+    const plotRight = engine.canvasWidth.get() - padding.right;
+    if (!(win > 0) || plotRight <= plotLeft) return THRESHOLD_NO_CLIP_LEFT;
+    const winStart = engine.timestamp.get() - win;
+    const firstT = pts[0].time;
+    return plotLeft + ((firstT - winStart) / win) * (plotRight - plotLeft);
+  });
+
   const clipRightX = useDerivedValue(() => {
     if (extendToNow) return THRESHOLD_NO_CLIP;
     const pts = series ? series.get() : Array.isArray(value) ? value : null;
@@ -206,8 +225,9 @@ export function useThresholdSeries(
     if (n < 2) return EMPTY_PTS;
     const plotLeft = padding.left;
     const plotRight = engine.canvasWidth.get() - padding.right;
+    const startX = Math.max(plotLeft, clipLeftX.get());
     const endX = Math.min(plotRight, clipRightX.get());
-    if (endX <= plotLeft) return EMPTY_PTS;
+    if (endX <= startX) return EMPTY_PTS;
     const cache = cacheRef.current!;
     cache.ptsTick = !cache.ptsTick;
     const buf = cache.ptsTick ? cache.ptsA : cache.ptsB;
@@ -219,11 +239,11 @@ export function useThresholdSeries(
       plotRight,
       n,
     );
-    buf.push(plotLeft, sampleThresholdYAt(s, x0, x1, plotLeft));
+    buf.push(startX, sampleThresholdYAt(s, x0, x1, startX));
     const step = (x1 - x0) / (n - 1);
     for (let i = 0; i < n; i++) {
       const sx = x0 + step * i;
-      if (sx > plotLeft && sx < endX) buf.push(sx, s[i]);
+      if (sx > startX && sx < endX) buf.push(sx, s[i]);
     }
     buf.push(endX, sampleThresholdYAt(s, x0, x1, endX));
     return buf;
@@ -242,10 +262,13 @@ export function useThresholdSeries(
   const badgeValue = useDerivedValue(() => {
     const pts = series ? series.get() : Array.isArray(value) ? value : null;
     if (pts === null) return NaN;
-    const time =
-      labelAnchor === "first"
-        ? engine.timestamp.get() - engine.displayWindow.get()
-        : engine.timestamp.get();
+    let time = engine.timestamp.get();
+    if (labelAnchor === "first") {
+      time -= engine.displayWindow.get();
+      if (!extendToStart && pts.length > 0 && pts[0].time > time) {
+        time = pts[0].time;
+      }
+    }
     return interpolateAtTime(pts, time) ?? NaN;
   });
 
@@ -261,11 +284,11 @@ export function useThresholdSeries(
   );
 
   const badgeVisible = useDerivedValue(() => {
-    if (labelAnchor === "first") {
-      // If the non-extended series ended before this window, there is no left
-      // endpoint to label even though interpolation can still clamp a value.
-      if (screenPts.get().length < 4) return false;
-    } else if (!extendToNow) {
+    // There is no endpoint to label when the series does not intersect the
+    // effective [first point, last point] window, even though interpolation can
+    // still clamp a value outside it.
+    if (screenPts.get().length < 4) return false;
+    if (labelAnchor === "last" && !extendToNow) {
       // The threshold ends at its last point — no badge past it.
       const pts = series ? series.get() : Array.isArray(value) ? value : null;
       if (pts === null || pts.length === 0) return false;
@@ -286,6 +309,7 @@ export function useThresholdSeries(
     badgeValue,
     badgeLineY,
     badgeVisible,
+    clipLeftX,
     clipRightX,
   };
 }
@@ -295,8 +319,8 @@ export function useThresholdSeries(
  * uniforms (one `SharedValue` per paint — stroke vs. the alpha-reduced fill band).
  * The object is rebuilt each frame so the shader re-paints as `samples` advance;
  * `sampleLeft`/`sampleRight` are the gliding pixel-X span of the sample grid and
- * `clipRight`/`restColor` implement the `extendToNow: false` cutoff (plain line
- * color for the stroke, transparent for the band).
+ * `clipLeft`/`clipRight`/`restColor` implement the series endpoint cutoffs
+ * (plain line color for the stroke, transparent for the band).
  */
 export function useThresholdSplitUniforms(
   samples: SharedValue<number[]>,
@@ -305,6 +329,7 @@ export function useThresholdSplitUniforms(
   aboveColor: number[],
   belowColor: number[],
   restColor: number[],
+  clipLeftX: SharedValue<number>,
   clipRightX: SharedValue<number>,
 ): SharedValue<Uniforms> {
   return useDerivedValue<Uniforms>(() => {
@@ -319,6 +344,7 @@ export function useThresholdSplitUniforms(
     return {
       sampleLeft: x0,
       sampleRight: x1,
+      clipLeft: clipLeftX.get(),
       clipRight: clipRightX.get(),
       aboveColor,
       belowColor,

package/src/math/referenceLineSeries.ts

@@ -20,6 +20,7 @@ export function buildReferenceLineSeriesPoints(
   canvasWidth: number,
   canvasHeight: number,
   padding: ChartPadding,
+  extendToStart: boolean,
   extendToNow: boolean,
   out?: number[],
 ): number[] {
@@ -43,11 +44,15 @@ export function buildReferenceLineSeriesPoints(
   }
 
   const windowStart = now - windowSecs;
+  const firstTime = points[0].time;
   const lastTime = points[points.length - 1].time;
+  const startTime = extendToStart
+    ? windowStart
+    : Math.max(windowStart, firstTime);
   const endTime = extendToNow ? now : Math.min(now, lastTime);
-  if (endTime < windowStart) return result;
+  if (endTime < startTime) return result;
 
-  const startValue = interpolateAtTime(points, windowStart);
+  const startValue = interpolateAtTime(points, startTime);
   const endValue = interpolateAtTime(points, endTime);
   if (
     startValue === null ||
@@ -70,10 +75,10 @@ export function buildReferenceLineSeriesPoints(
       padding.bottom,
     );
 
-  result.push(plotLeft, toY(startValue));
+  result.push(toX(startTime), toY(startValue));
   for (let i = 0; i < points.length; i++) {
     const point = points[i];
-    if (point.time <= windowStart) continue;
+    if (point.time <= startTime) continue;
     if (point.time >= endTime) break;
     if (!Number.isFinite(point.time) || !Number.isFinite(point.value)) continue;
     result.push(toX(point.time), toY(point.value));

package/src/math/threshold.ts

@@ -237,8 +237,9 @@ export function thresholdDashPhase(
  * Min/max of a threshold series over the visible window `[now - windowSecs,
  * now]` — the values folded into the engine's Y-range fit when
  * `threshold.includeInRange` is set (like reference-line values). Uses the
- * clamped window-edge values plus every interior point; with `extendToNow` off,
- * the window end clamps to the series' last point (nothing projects forward).
+ * clamped window-edge values plus every interior point. With `extendToStart`
+ * off, the window start clamps to the series' first point; with `extendToNow`
+ * off, the window end clamps to its last point.
  * Writes `[min, max]` into `out` and returns it, or returns null when the
  * series is empty / entirely outside the effective window / non-finite.
  */
@@ -246,18 +247,24 @@ export function thresholdRangeMinMax(
   points: LiveChartPoint[],
   now: number,
   windowSecs: number,
+  extendToStart: boolean,
   extendToNow: boolean,
   out: [number, number],
 ): [number, number] | null {
   "worklet";
   if (points.length === 0 || !(windowSecs > 0)) return null;
-  const tStart = now - windowSecs;
+  let tStart = now - windowSecs;
   let tEnd = now;
+  if (!extendToStart) {
+    const firstT = points[0].time;
+    if (firstT > tStart) tStart = firstT;
+  }
   if (!extendToNow) {
     const lastT = points[points.length - 1].time;
     if (lastT < tStart) return null;
     if (lastT < tEnd) tEnd = lastT;
   }
+  if (tEnd < tStart) return null;
   let mn = interpolateAtTime(points, tStart)!;
   let mx = mn;
   const vEnd = interpolateAtTime(points, tEnd)!;

package/src/types.ts

@@ -74,10 +74,16 @@ export interface ReferenceLine {
   /**
    * Form B — a time-varying reference line. Points use unix-second timestamps
    * and should be sorted oldest to newest. The first value extends to the left
-   * edge; the last value extends to the live edge unless {@link extendToNow} is
-   * `false`. Supported by line and candle charts.
+   * edge unless {@link extendToStart} is `false`; the last value extends to the
+   * live edge unless {@link extendToNow} is `false`. Supported by line and
+   * candle charts.
    */
   series?: LiveChartPoint[];
+  /**
+   * Form B — extend the series' first value flat to the chart's left edge.
+   * Set `false` to start at the first point. Default `true`.
+   */
+  extendToStart?: boolean;
   /**
    * Form B — extend the series' last value flat to the chart's live edge.
    * Set `false` to stop at the last point. Default `true`.
@@ -493,8 +499,8 @@ export interface ThresholdConfig {
    * - **`LiveChartPoint[]`** — a *time-varying* threshold (e.g. a historical
    *   break-even that steps up as you average in). The stroke split, fill band
    *   and marker line follow the series point-for-point. The series clamps to its
-   *   first/last value outside its own time range, so a threshold whose last
-   *   point sits behind the live edge extends as a flat line to "now" (see
+   *   first/last value outside its own time range, so it extends flat to the
+   *   visible edges by default (see {@link extendToStart} and
    *   {@link extendToNow}). Flows in on re-render — pass a stable (memoized)
    *   array and reserve it for thresholds that change occasionally; for a
    *   threshold series that updates live, use {@link series} instead.
@@ -531,10 +537,19 @@ export interface ThresholdConfig {
    * Fold the threshold into the Y-axis range fit — like reference lines — so a
    * benchmark outside the data's own range stays on-plot instead of rendering
    * invisibly (marker off-plot, whole line one color). For a series, the values
-   * visible in the current window count (respecting {@link extendToNow}).
+   * visible in the current window count (respecting {@link extendToStart} and
+   * {@link extendToNow}).
    * Default `false` (range fits the data only).
    */
   includeInRange?: boolean;
+  /**
+   * Series forms only: extend the threshold **flat before its first point to the
+   * visible window's left edge**, carrying the first known benchmark backward.
+   * Set `false` when the benchmark did not exist yet (for example, a break-even
+   * before the first trade) — left of the first point the stroke keeps its plain
+   * line color and the band / marker do not begin. Default `true`.
+   */
+  extendToStart?: boolean;
   /**
    * Series forms only: extend the threshold **flat past its last point to
    * "now"**, carrying the last known benchmark forward. Set `false` for a