diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a4dada..d944876 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- **Time-varying reference lines.** `ReferenceLine.series` draws a historical
+  `LiveChartPoint[]` benchmark over line or candle charts, with the existing
+  color, dash, width, label, and range-fitting behavior. The final value extends
+  flat to the live edge by default; `extendToNow: false` stops at the last point.
 - **Custom threshold badges.** `LiveChart.renderThresholdBadge` replaces the
   built-in Skia threshold pill with any React Native element while the chart
   continues to position it from the live threshold value on the UI thread. Its
diff --git a/app/demo/candlestick.tsx b/app/demo/candlestick.tsx
index 3dc01e5..70a9a75 100644
--- a/app/demo/candlestick.tsx
+++ b/app/demo/candlestick.tsx
@@ -1,6 +1,10 @@
 import { useState } from "react";
-import type { CandlePoint } from "react-native-livechart";
-import { LiveChart } from "react-native-livechart";
+import {
+  LiveChart,
+  type CandlePoint,
+  type LiveChartPoint,
+  type ReferenceLine,
+} from "react-native-livechart";
 import { useSharedValue } from "react-native-reanimated";
 
 import { DemoScreen } from "../../demo-lib/DemoScreen";
@@ -75,6 +79,24 @@ const VOLUME_ROUND_OPTIONS: { value: number; label: string }[] = [
 /** Distinct violet bars so the volume color override reads as a feature. */
 const CUSTOM_VOLUME_COLORS = { upColor: "#8b5cf6", downColor: "#4c1d95" };
 
+/**
+ * Historical average-cost changes from a realistic averaging-in flow. Adjacent
+ * points around each fill make the cost basis step at that timestamp instead of
+ * drifting diagonally between fills.
+ */
+function buildAverageCostSeries(anchor: number): LiveChartPoint[] {
+  return [
+    { time: anchor - 3_600, value: 100.8 },
+    { time: anchor - 780.01, value: 100.8 },
+    { time: anchor - 780, value: 99.6 },
+    { time: anchor - 360.01, value: 99.6 },
+    { time: anchor - 360, value: 101.2 },
+    { time: anchor - 90.01, value: 101.2 },
+    { time: anchor - 90, value: 100.4 },
+    { time: anchor - 30, value: 100.4 },
+  ];
+}
+
 export default function CandlestickScreen() {
   const [tfLabel, setTfLabel] = useState<TimeframeLabel>("15m · 1m");
   const [stripCandles, setStripCandles] = useState(false);
@@ -86,6 +108,9 @@ export default function CandlestickScreen() {
   const [volumeRound, setVolumeRound] = useState(2);
   const [customVolumeColors, setCustomVolumeColors] = useState(false);
   const [snapToCandles, setSnapToCandles] = useState(false);
+  const [averageCost, setAverageCost] = useState(true);
+  const [extendAverageCost, setExtendAverageCost] = useState(true);
+  const [referenceAnchor] = useState(() => Date.now() / 1000);
 
   const tf = TIMEFRAMES.find((t) => t.label === tfLabel) ?? TIMEFRAMES[1];
   const candleWidthSecs = tf.candleWidthSecs;
@@ -111,11 +136,28 @@ export default function CandlestickScreen() {
     maxPoints: 10000,
   });
 
+  const referenceLines: ReferenceLine[] = averageCost
+    ? [
+        {
+          id: "average-cost",
+          series: buildAverageCostSeries(referenceAnchor),
+          extendToNow: extendAverageCost,
+          label: "Avg cost",
+          showValue: true,
+          labelPosition: "right",
+          color: "#f59e0b",
+          labelColor: "#b45309",
+          strokeWidth: 2,
+          intervals: [6, 4],
+        },
+      ]
+    : [];
+
   return (
     <DemoScreen
       title="Candlestick"
       docs="guides/candlestick"
-      description={`mode="candle" with ${candleWidthSecs}s OHLC buckets. Each candle aggregates many ticks, so it shows a real body + wick. Needs ≥2 committed candles before it draws.`}
+      description={`mode="candle" with ${candleWidthSecs}s OHLC buckets plus a historical average-cost reference series. Each candle aggregates many ticks, so it shows a real body + wick. Needs ≥2 committed candles before it draws.`}
       chart={
         <LiveChart
           data={data}
@@ -139,9 +181,25 @@ export default function CandlestickScreen() {
               : false
           }
           scrub={{ tooltip: true, snapToCandles }}
+          referenceLines={referenceLines}
         />
       }
     >
+      <ControlRow label="Reference series">
+        <ToggleChip
+          label="Historical average cost"
+          value={averageCost}
+          onChange={setAverageCost}
+        />
+        {averageCost ? (
+          <ToggleChip
+            label="Extend to live edge"
+            value={extendAverageCost}
+            onChange={setExtendAverageCost}
+          />
+        ) : null}
+      </ControlRow>
+
       <ChipRow
         label="Timeframe (window · candle)"
         options={TIMEFRAME_OPTIONS}
diff --git a/docs/api-reference/livechart.mdx b/docs/api-reference/livechart.mdx
index 0f80c26..b408f4d 100644
--- a/docs/api-reference/livechart.mdx
+++ b/docs/api-reference/livechart.mdx
@@ -258,8 +258,10 @@ provided; everything else has a default.
 </ParamField>
 
 <ParamField body="referenceLines" type="ReferenceLine[]">
-  Reference lines / bands (horizontal line, value band, or time band). Form-A lines
-  can be `draggable` (drag to set a price, with `snap` / `bounds` and `onChange` /
+  Reference lines / bands (horizontal line, time-varying `series`, value band, or
+  time band). Series lines work in both line and candle mode and extend their last
+  value to the live edge unless `extendToNow` is `false`. Form-A lines can be
+  `draggable` (drag to set a price, with `snap` / `bounds` and `onChange` /
   `onCommit` / `onDragIn` / `onDragOut` callbacks). See
   [Reference lines](/guides/reference-lines-and-bands).
 </ParamField>
diff --git a/docs/api-reference/types.mdx b/docs/api-reference/types.mdx
index 6fa0231..200268f 100644
--- a/docs/api-reference/types.mdx
+++ b/docs/api-reference/types.mdx
@@ -179,10 +179,13 @@ interface ReferenceLine {
   id?: string;                   // stable identity; supply when lines may reorder
   // Form A — horizontal line:
   value?: number;
-  // Form B — horizontal band:
+  // Form B — time-varying line (sorted unix-second points):
+  series?: LiveChartPoint[];
+  extendToNow?: boolean;         // flat-extend the last value to live; default true
+  // Form C — horizontal band:
   valueFrom?: number;
   valueTo?: number;
-  // Form C — vertical time band (unix seconds):
+  // Form D — vertical time band (unix seconds):
   from?: number;
   to?: number;
   // Shared:
@@ -192,8 +195,8 @@ interface ReferenceLine {
   color?: string;
   fillColor?: string;            // band fill; defaults to color, then palette refLine
   fillOpacity?: number;          // default 0.16
-  strokeOpacity?: number;        // line / band-border opacity; default 1
-  fullWidth?: boolean;           // span edge-to-edge through the Y-axis gutter (Form A/B);
+  strokeOpacity?: number;        // line / series / band-border opacity; default 1
+  fullWidth?: boolean;           // span edge-to-edge through the Y-axis gutter (Form A/C);
                                  //   label/badge stay in the plot. default false
   labelColor?: string;
   labelPosition?: "left" | "center" | "right";
diff --git a/docs/guides/candlestick.mdx b/docs/guides/candlestick.mdx
index 3415d8c..e29ca79 100644
--- a/docs/guides/candlestick.mdx
+++ b/docs/guides/candlestick.mdx
@@ -141,6 +141,31 @@ Configure colors, band height, rounding, and opacity with a
   by candle direction (up/down) unless you override `upColor` / `downColor`.
 </Note>
 
+## Historical reference series
+
+Overlay a changing average cost, VWAP, peg, or other historical benchmark with the
+[`referenceLines.series`](/guides/reference-lines-and-bands#time-varying-reference-line-series)
+form. It draws a Skia polyline over the candles using the same time and Y scales, supports the
+normal reference-line color, dash, width, and label fields, and extends its last value flat to
+the live edge by default.
+
+```tsx
+<LiveChart
+  mode="candle"
+  candles={candles}
+  liveCandle={liveCandle}
+  referenceLines={[
+    {
+      series: averageCostHistory,
+      label: "Avg cost",
+      showValue: true,
+      color: "#f59e0b",
+      strokeWidth: 2,
+    },
+  ]}
+/>
+```
+
 ## Scrubbing & the OHLC tooltip
 
 Pass `scrub` to enable the crosshair: the built-in tooltip shows the scrubbed candle's O/H/L/C
diff --git a/docs/guides/reference-lines-and-bands.mdx b/docs/guides/reference-lines-and-bands.mdx
index 174a01e..41900aa 100644
--- a/docs/guides/reference-lines-and-bands.mdx
+++ b/docs/guides/reference-lines-and-bands.mdx
@@ -1,7 +1,7 @@
 ---
 title: Reference lines & bands
 icon: "ruler-horizontal"
-description: "Draw horizontal lines, value/time bands, pill badges, and draggable working orders."
+description: "Draw horizontal or time-varying lines, value/time bands, pill badges, and draggable working orders."
 ---
 
 <Note>
@@ -16,9 +16,10 @@ description: "Draw horizontal lines, value/time bands, pill badges, and draggabl
   <video autoPlay loop muted playsInline controls poster="/media/reference-lines-and-bands.jpg" src="/media/reference-lines-and-bands.mp4" />
 </Frame>
 
-`referenceLines` accepts an array of `ReferenceLine`s in three mutually-exclusive forms:
+`referenceLines` accepts an array of `ReferenceLine`s in four mutually-exclusive forms:
 
 - **Horizontal line** at a `value`
+- **Time-varying line** following a `series`
 - **Horizontal band** between `valueFrom` and `valueTo`
 - **Vertical time band** between `from` and `to` (unix seconds)
 
@@ -48,6 +49,51 @@ range (`excludeFromRange`). Bands can use separate `fillColor` / `fillOpacity` a
 When the array can reorder (for example, a dynamic order book), give each line a unique `id`
 so its rendered identity follows that line instead of its array position.
 
+## Time-varying reference line (`series`)
+
+Use the `series` form for a historical benchmark that changes over time: average cost after
+multiple fills, VWAP, a moving target, or a peg. It is especially useful over candlesticks, where
+threshold split coloring does not apply.
+
+```tsx
+import type { LiveChartPoint, ReferenceLine } from "react-native-livechart";
+
+const averageCost: LiveChartPoint[] = [
+  { time: 1_700_000_000, value: 101.2 },
+  { time: 1_700_000_900, value: 99.8 },
+  { time: 1_700_001_800, value: 100.4 },
+];
+
+const referenceLines: ReferenceLine[] = [
+  {
+    series: averageCost,
+    label: "Avg cost",
+    showValue: true,
+    color: "#f59e0b",
+    strokeWidth: 2,
+    intervals: [6, 4],
+  },
+];
+
+<LiveChart
+  mode="candle"
+  candles={candles}
+  liveCandle={liveCandle}
+  referenceLines={referenceLines}
+/>
+```
+
+Points use unix-second timestamps and must be sorted oldest to newest. The first value extends
+to the window's left edge, and the last value extends flat to the live edge. Set
+`extendToNow: false` to stop the path and its label at the final point. A series contributes its
+minimum and maximum to automatic Y-range fitting unless `excludeFromRange` is set.
+
+The series form supports the shared line presentation fields: `color`, `strokeOpacity`,
+`strokeWidth`, `intervals`, `label`, `labelColor`, `labelPosition`, `showValue`, and
+`excludeFromRange`.
+Working-order fields (`badge`, `draggable`, drag callbacks) and custom tag renderers remain for
+single-value Form-A lines.
+
 ## Full-width lines (`fullWidth`)
 
 By default a line/band stops at the plot's right edge. Set `fullWidth: true` to span it
diff --git a/packages/react-native-livechart/src/components/ReferenceLineOverlay.tsx b/packages/react-native-livechart/src/components/ReferenceLineOverlay.tsx
index 5d26a95..0132716 100644
--- a/packages/react-native-livechart/src/components/ReferenceLineOverlay.tsx
+++ b/packages/react-native-livechart/src/components/ReferenceLineOverlay.tsx
@@ -20,6 +20,7 @@ import {
 import { MONO_FONT_FAMILY } from "../lib/monoFontFamily";
 import { referenceLineForm, resolveReferenceBadge } from "../math/referenceLines";
 import type { FontConfig, LiveChartPalette, ReferenceLine } from "../types";
+import { ReferenceLineSeriesOverlay } from "./ReferenceLineSeriesOverlay";
 
 /** Translucent fill alpha for value / time bands. */
 const BAND_FILL_OPACITY = 0.16;
@@ -33,9 +34,10 @@ const CONNECTOR_GAP = 4;
 const BADGE_EDGE_INSET = 2;
 
 /**
- * Renders one reference line or band into the chart canvas. Handles all three
- * `ReferenceLine` forms (horizontal line, horizontal value band, vertical time
- * band) plus the Form-A pill badge (in-range tag + off-screen chevron pin).
+ * Renders one reference line or band into the chart canvas. Handles all four
+ * `ReferenceLine` forms (horizontal line, time-varying line, horizontal value
+ * band, vertical time band) plus the Form-A pill badge (in-range tag +
+ * off-screen chevron pin).
  * Self-contained so callers can `.map()` over a variable-length array.
  */
 type ReferenceLineOverlayProps = {
@@ -94,7 +96,28 @@ type ReferenceLineOverlayProps = {
   gridEndGap?: number;
 };
 
-export function ReferenceLineOverlay({
+/**
+ * Dispatch to the series or scalar/band renderer without mixing their hook
+ * lifecycles. A stable `id` may therefore switch forms safely across renders.
+ */
+export function ReferenceLineOverlay(props: ReferenceLineOverlayProps) {
+  if (referenceLineForm(props.line) === "series") {
+    return (
+      <ReferenceLineSeriesOverlay
+        engine={props.engine}
+        padding={props.padding}
+        line={props.line}
+        palette={props.palette}
+        formatValue={props.formatValue}
+        font={props.font}
+        badgeLayer={props.badgeLayer ?? false}
+      />
+    );
+  }
+  return <ReferenceLineStaticOverlay {...props} />;
+}
+
+function ReferenceLineStaticOverlay({
   engine,
   padding,
   line,
diff --git a/packages/react-native-livechart/src/components/ReferenceLineSeriesOverlay.tsx b/packages/react-native-livechart/src/components/ReferenceLineSeriesOverlay.tsx
new file mode 100644
index 0000000..794e435
--- /dev/null
+++ b/packages/react-native-livechart/src/components/ReferenceLineSeriesOverlay.tsx
@@ -0,0 +1,141 @@
+import {
+  DashPathEffect,
+  Group,
+  Path,
+  Text as SkiaText,
+  type SkFont,
+} from "@shopify/react-native-skia";
+import { useDerivedValue } from "react-native-reanimated";
+
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import type { ChartPadding } from "../draw/line";
+import { usePathBuilder } from "../hooks/usePathBuilder";
+import { useReferenceLineSeries } from "../hooks/useReferenceLineSeries";
+import { measureFontTextWidth } from "../lib/measureFontTextWidth";
+import { thresholdDashPhase } from "../math/threshold";
+import type { LiveChartPalette, ReferenceLine } from "../types";
+
+/**
+ * Draws Form-B `ReferenceLine.series` geometry. The base pass is a clipped Skia
+ * polyline behind the chart; the badge pass is the live-edge label above the
+ * chart fade, matching the existing two-pass reference-line layering.
+ */
+export function ReferenceLineSeriesOverlay({
+  engine,
+  padding,
+  line,
+  palette,
+  formatValue,
+  font,
+  badgeLayer,
+}: {
+  engine: ChartEngineLayout;
+  padding: ChartPadding;
+  line: ReferenceLine;
+  palette: LiveChartPalette;
+  formatValue: (value: number) => string;
+  font: SkFont;
+  badgeLayer: boolean;
+}) {
+  const points = line.series ?? [];
+  const extendToNow = line.extendToNow ?? true;
+  const geometry = useReferenceLineSeries(
+    engine,
+    padding,
+    points,
+    extendToNow,
+  );
+  const color = line.color ?? palette.refLine;
+  const labelColor = line.labelColor ?? line.color ?? palette.refLabel;
+  const strokeOpacity = Math.max(0, Math.min(1, line.strokeOpacity ?? 1));
+  const strokeWidth = line.strokeWidth ?? 1;
+  const intervals = line.intervals ?? [4, 4];
+  const dashCycle = intervals[0] + intervals[1];
+
+  const builder = usePathBuilder();
+  const path = useDerivedValue(() => {
+    const b = builder.value;
+    const screen = geometry.screenPts.get();
+    if (geometry.visible.get() && screen.length >= 4) {
+      b.moveTo(screen[0], screen[1]);
+      for (let i = 2; i < screen.length; i += 2) {
+        b.lineTo(screen[i], screen[i + 1]);
+      }
+    }
+    return b.detach();
+  });
+  const pathOpacity = useDerivedValue(() =>
+    geometry.visible.get() ? strokeOpacity : 0,
+  );
+  const dashPhase = useDerivedValue(() =>
+    thresholdDashPhase(
+      engine.timestamp.get(),
+      engine.displayWindow.get(),
+      padding.left,
+      engine.canvasWidth.get() - padding.right,
+      dashCycle,
+    ),
+  );
+  const plotClip = useDerivedValue(() => ({
+    x: padding.left,
+    y: padding.top,
+    width: Math.max(0, engine.canvasWidth.get() - padding.left - padding.right),
+    height: Math.max(
+      0,
+      engine.canvasHeight.get() - padding.top - padding.bottom,
+    ),
+  }));
+
+  const metrics = font.getMetrics();
+  const baselineOffset = (metrics.ascent + metrics.descent) / 2;
+  const labelText = useDerivedValue(() => {
+    const value = formatValue(geometry.currentValue.get());
+    if (line.label) return line.showValue ? `${line.label} ${value}` : line.label;
+    return value;
+  });
+  const labelX = useDerivedValue(() => {
+    const left = padding.left;
+    const right = engine.canvasWidth.get() - padding.right;
+    const position = line.labelPosition ?? "right";
+    if (position === "left") return left + 4;
+    if (position === "center") {
+      return (left + right) / 2 - measureFontTextWidth(font, labelText.get()) / 2;
+    }
+    return right + 4;
+  });
+  const labelY = useDerivedValue(
+    () => geometry.currentY.get() - baselineOffset,
+  );
+  const labelOpacity = useDerivedValue(() =>
+    geometry.currentVisible.get() ? 1 : 0,
+  );
+
+  if (badgeLayer) {
+    return (
+      <Group opacity={labelOpacity}>
+        <SkiaText
+          x={labelX}
+          y={labelY}
+          text={labelText}
+          font={font}
+          color={labelColor}
+        />
+      </Group>
+    );
+  }
+
+  return (
+    <Group clip={plotClip} opacity={pathOpacity}>
+      <Path
+        path={path}
+        style="stroke"
+        strokeWidth={strokeWidth}
+        strokeCap="round"
+        strokeJoin="round"
+        color={color}
+      >
+        <DashPathEffect intervals={intervals} phase={dashPhase} />
+      </Path>
+    </Group>
+  );
+}
diff --git a/packages/react-native-livechart/src/hooks/useReferenceLine.ts b/packages/react-native-livechart/src/hooks/useReferenceLine.ts
index 00cd333..06b04bf 100644
--- a/packages/react-native-livechart/src/hooks/useReferenceLine.ts
+++ b/packages/react-native-livechart/src/hooks/useReferenceLine.ts
@@ -279,9 +279,10 @@ export function computeReferenceBadgeRect(
 
 /**
  * Derives screen-space layout for a single reference line or band. Supports all
- * three `ReferenceLine` forms (horizontal line, horizontal value band, vertical
- * time band) plus the pill badge for a Form-A value (in-range tag + off-screen
- * chevron pin).
+ * three scalar/band `ReferenceLine` forms (horizontal line, horizontal value
+ * band, vertical time band) plus the pill badge for a Form-A value (in-range tag
+ * + off-screen chevron pin). The series form is handled by
+ * `ReferenceLineSeriesOverlay`.
  */
 export function useReferenceLine(
   engine: ChartEngineLayout,
@@ -344,7 +345,7 @@ export function useReferenceLine(
     const fm = font.getMetrics();
     const baselineOffset = (fm.ascent + fm.descent) / 2;
 
-    // ── Form C — vertical time band (independent of the value range) ─────────
+    // ── Form D — vertical time band (independent of the value range) ─────────
     if (form === "time-band") {
       if (line.from === undefined || line.to === undefined) return INVISIBLE;
       const now = engine.timestamp.value;
@@ -392,7 +393,7 @@ export function useReferenceLine(
     if (valRange <= 0) return INVISIBLE;
     const toY = (v: number) => chartTop + ((dMax - v) / valRange) * chartH;
 
-    // ── Form B — horizontal value band ───────────────────────────────────────
+    // ── Form C — horizontal value band ───────────────────────────────────────
     if (form === "value-band") {
       if (line.valueFrom === undefined || line.valueTo === undefined) {
         return INVISIBLE;
diff --git a/packages/react-native-livechart/src/hooks/useReferenceLineSeries.ts b/packages/react-native-livechart/src/hooks/useReferenceLineSeries.ts
new file mode 100644
index 0000000..c85f7da
--- /dev/null
+++ b/packages/react-native-livechart/src/hooks/useReferenceLineSeries.ts
@@ -0,0 +1,101 @@
+import { useRef } from "react";
+import { useDerivedValue, type SharedValue } from "react-native-reanimated";
+
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import type { ChartPadding } from "../draw/line";
+import { interpolateAtTime } from "../math/interpolate";
+import { buildReferenceLineSeriesPoints } from "../math/referenceLineSeries";
+import {
+  thresholdLineY,
+  thresholdSeriesVisible,
+  thresholdVisible,
+} from "../math/threshold";
+import type { LiveChartPoint } from "../types";
+
+export interface ReferenceLineSeriesGeometry {
+  /** Visible series polyline as `[x, y, …]` screen coordinates. */
+  screenPts: SharedValue<number[]>;
+  /** Whether any series segment crosses the visible plot. */
+  visible: SharedValue<boolean>;
+  /** Series value at the chart's current right edge. */
+  currentValue: SharedValue<number>;
+  /** Canvas Y coordinate of {@link currentValue}. */
+  currentY: SharedValue<number>;
+  /** Whether the current-value label belongs inside the visible plot. */
+  currentVisible: SharedValue<boolean>;
+}
+
+/**
+ * UI-thread geometry for a static historical reference-line series. Point
+ * buffers ping-pong so Reanimated observes a changed array reference each frame
+ * without allocating new intermediate arrays.
+ */
+export function useReferenceLineSeries(
+  engine: ChartEngineLayout,
+  padding: ChartPadding,
+  points: LiveChartPoint[],
+  extendToNow: boolean,
+): ReferenceLineSeriesGeometry {
+  const cacheRef = useRef<{
+    a: number[];
+    b: number[];
+    tick: boolean;
+  } | null>(null);
+  if (cacheRef.current === null) {
+    cacheRef.current = { a: [], b: [], tick: false };
+  }
+
+  const screenPts = useDerivedValue(() => {
+    const cache = cacheRef.current!;
+    cache.tick = !cache.tick;
+    return buildReferenceLineSeriesPoints(
+      points,
+      engine.timestamp.get(),
+      engine.displayWindow.get(),
+      engine.displayMin.get(),
+      engine.displayMax.get(),
+      engine.canvasWidth.get(),
+      engine.canvasHeight.get(),
+      padding,
+      extendToNow,
+      cache.tick ? cache.a : cache.b,
+    );
+  });
+
+  const visible = useDerivedValue(() =>
+    thresholdSeriesVisible(
+      screenPts.get(),
+      engine.canvasHeight.get(),
+      padding.top,
+      padding.bottom,
+    ),
+  );
+
+  const currentValue = useDerivedValue(
+    () => interpolateAtTime(points, engine.timestamp.get()) ?? NaN,
+  );
+  const currentY = useDerivedValue(() =>
+    thresholdLineY(
+      currentValue.get(),
+      engine.displayMin.get(),
+      engine.displayMax.get(),
+      engine.canvasHeight.get(),
+      padding.top,
+      padding.bottom,
+    ),
+  );
+  const currentVisible = useDerivedValue(() => {
+    if (points.length === 0) return false;
+    if (!extendToNow && points[points.length - 1].time < engine.timestamp.get()) {
+      return false;
+    }
+    return thresholdVisible(
+      currentY.get(),
+      engine.canvasHeight.get(),
+      padding.top,
+      padding.bottom,
+    );
+  });
+
+  return { screenPts, visible, currentValue, currentY, currentVisible };
+}
diff --git a/packages/react-native-livechart/src/math/referenceLineSeries.ts b/packages/react-native-livechart/src/math/referenceLineSeries.ts
new file mode 100644
index 0000000..de07cbc
--- /dev/null
+++ b/packages/react-native-livechart/src/math/referenceLineSeries.ts
@@ -0,0 +1,83 @@
+import type { ChartPadding } from "../draw/line";
+import type { LiveChartPoint } from "../types";
+import { interpolateAtTime } from "./interpolate";
+import { thresholdLineY } from "./threshold";
+
+/**
+ * Project a historical reference-line series into screen-space `[x, y, …]`
+ * points for the visible time window. Window-edge values are interpolated so
+ * the path enters and leaves the plot cleanly. The series clamps to its first
+ * value on the left and, by default, to its last value at the live edge.
+ *
+ * Worklet-safe. When `out` is supplied it is cleared and reused.
+ */
+export function buildReferenceLineSeriesPoints(
+  points: LiveChartPoint[],
+  now: number,
+  windowSecs: number,
+  displayMin: number,
+  displayMax: number,
+  canvasWidth: number,
+  canvasHeight: number,
+  padding: ChartPadding,
+  extendToNow: boolean,
+  out?: number[],
+): number[] {
+  "worklet";
+  const result = out ?? [];
+  result.length = 0;
+
+  const plotLeft = padding.left;
+  const plotRight = canvasWidth - padding.right;
+  const plotWidth = plotRight - plotLeft;
+  const plotHeight = canvasHeight - padding.top - padding.bottom;
+  const valueRange = displayMax - displayMin;
+  if (
+    points.length === 0 ||
+    !(windowSecs > 0) ||
+    plotWidth <= 0 ||
+    plotHeight <= 0 ||
+    !(valueRange > 0)
+  ) {
+    return result;
+  }
+
+  const windowStart = now - windowSecs;
+  const lastTime = points[points.length - 1].time;
+  const endTime = extendToNow ? now : Math.min(now, lastTime);
+  if (endTime < windowStart) return result;
+
+  const startValue = interpolateAtTime(points, windowStart);
+  const endValue = interpolateAtTime(points, endTime);
+  if (
+    startValue === null ||
+    endValue === null ||
+    !Number.isFinite(startValue) ||
+    !Number.isFinite(endValue)
+  ) {
+    return result;
+  }
+
+  const toX = (time: number) =>
+    plotLeft + ((time - windowStart) / windowSecs) * plotWidth;
+  const toY = (value: number) =>
+    thresholdLineY(
+      value,
+      displayMin,
+      displayMax,
+      canvasHeight,
+      padding.top,
+      padding.bottom,
+    );
+
+  result.push(plotLeft, toY(startValue));
+  for (let i = 0; i < points.length; i++) {
+    const point = points[i];
+    if (point.time <= windowStart) continue;
+    if (point.time >= endTime) break;
+    if (!Number.isFinite(point.time) || !Number.isFinite(point.value)) continue;
+    result.push(toX(point.time), toY(point.value));
+  }
+  result.push(toX(endTime), toY(endValue));
+  return result;
+}
diff --git a/packages/react-native-livechart/src/math/referenceLines.ts b/packages/react-native-livechart/src/math/referenceLines.ts
index 30d8ccb..360ea57 100644
--- a/packages/react-native-livechart/src/math/referenceLines.ts
+++ b/packages/react-native-livechart/src/math/referenceLines.ts
@@ -4,16 +4,22 @@ import type {
   ReferenceLineBadgeConfig,
 } from "../types";
 
-/** Which of the three reference-line forms a `ReferenceLine` resolves to. */
-export type ReferenceLineForm = "line" | "value-band" | "time-band" | "none";
+/** Which of the four reference-line forms a `ReferenceLine` resolves to. */
+export type ReferenceLineForm =
+  | "line"
+  | "series"
+  | "value-band"
+  | "time-band"
+  | "none";
 
 /**
- * Classify a `ReferenceLine` into one of its three forms, applying the
- * documented precedence A (line) > B (value band) > C (time band).
+ * Classify a `ReferenceLine` into one of its four forms, applying the
+ * documented precedence A (line) > B (series) > C (value band) > D (time band).
  */
 export function referenceLineForm(rl: ReferenceLine): ReferenceLineForm {
   "worklet";
   if (rl.value !== undefined) return "line";
+  if (rl.series !== undefined) return "series";
   if (rl.valueFrom !== undefined && rl.valueTo !== undefined) {
     return "value-band";
   }
@@ -24,7 +30,7 @@ export function referenceLineForm(rl: ReferenceLine): ReferenceLineForm {
 /**
  * Gather every Y value a set of reference lines should contribute to the
  * axis-range computation. Lines flagged `excludeFromRange` are skipped, as are
- * time bands (Form C) which constrain time, not value.
+ * time bands (Form D) which constrain time, not value.
  */
 export function collectReferenceValues(lines: ReferenceLine[]): number[] {
   const out: number[] = [];
@@ -35,6 +41,22 @@ export function collectReferenceValues(lines: ReferenceLine[]): number[] {
       case "line":
         out.push(rl.value as number);
         break;
+      case "series": {
+        const points = rl.series;
+        if (!points || points.length === 0) break;
+        let min = Infinity;
+        let max = -Infinity;
+        for (let j = 0; j < points.length; j++) {
+          const value = points[j].value;
+          if (!Number.isFinite(value)) continue;
+          if (value < min) min = value;
+          if (value > max) max = value;
+        }
+        // Only the extrema are needed by the engine, avoiding a per-frame scan
+        // through the full historical annotation series.
+        if (min !== Infinity) out.push(min, max);
+        break;
+      }
       case "value-band":
         out.push(rl.valueFrom as number, rl.valueTo as number);
         break;
@@ -56,7 +78,13 @@ export function referenceLineReactKeys(
   const occurrences = new Map<string, number>();
   const keys: string[] = [];
   for (const line of lines) {
-    const base = line.id ?? stableReferenceLineSignature(line);
+    // A series' samples are render data, not identity. Omitting their contents
+    // keeps a growing historical series from remounting its overlay every render.
+    const base =
+      line.id ??
+      stableReferenceLineSignature(
+        line.series === undefined ? line : { ...line, series: "series" },
+      );
     const occurrence = occurrences.get(base) ?? 0;
     occurrences.set(base, occurrence + 1);
     keys.push(`${base}:${occurrence}`);
diff --git a/packages/react-native-livechart/src/types.ts b/packages/react-native-livechart/src/types.ts
index fbe8156..838691b 100644
--- a/packages/react-native-livechart/src/types.ts
+++ b/packages/react-native-livechart/src/types.ts
@@ -56,11 +56,12 @@ export type CanvasMode = "transparent" | "opaque";
 export type BadgeVariant = "default" | "minimal";
 
 /**
- * A reference line or band drawn into the chart. Three mutually-exclusive forms,
- * with precedence A > B > C when fields from more than one are present:
+ * A reference line or band drawn into the chart. Four mutually-exclusive forms,
+ * with precedence A > B > C > D when fields from more than one are present:
  * - **Form A** — horizontal line at `value`.
- * - **Form B** — horizontal band between `valueFrom` and `valueTo`.
- * - **Form C** — vertical time band between `from` and `to` (unix seconds).
+ * - **Form B** — time-varying line following `series`.
+ * - **Form C** — horizontal band between `valueFrom` and `valueTo`.
+ * - **Form D** — vertical time band between `from` and `to` (unix seconds).
  */
 export interface ReferenceLine {
   /**
@@ -70,13 +71,25 @@ export interface ReferenceLine {
   id?: string;
   /** Form A — the Y-axis value where the horizontal line is drawn. */
   value?: number;
-  /** Form B — horizontal band lower Y bound (paired with `valueTo`). */
+  /**
+   * 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.
+   */
+  series?: LiveChartPoint[];
+  /**
+   * Form B — extend the series' last value flat to the chart's live edge.
+   * Set `false` to stop at the last point. Default `true`.
+   */
+  extendToNow?: boolean;
+  /** Form C — horizontal band lower Y bound (paired with `valueTo`). */
   valueFrom?: number;
-  /** Form B — horizontal band upper Y bound (paired with `valueFrom`). */
+  /** Form C — horizontal band upper Y bound (paired with `valueFrom`). */
   valueTo?: number;
-  /** Form C — vertical time-band start, unix seconds (paired with `to`). */
+  /** Form D — vertical time-band start, unix seconds (paired with `to`). */
   from?: number;
-  /** Form C — vertical time-band end, unix seconds (paired with `from`). */
+  /** Form D — vertical time-band end, unix seconds (paired with `from`). */
   to?: number;
   /** Optional right-gutter label (e.g. `"Entry"`). */
   label?: string;
@@ -86,7 +99,7 @@ export interface ReferenceLine {
    * (top/bottom for value bands, left/right for time bands); omit for no border.
    */
   strokeWidth?: number;
-  /** Dash pattern as `[dashLength, gapLength]` in pixels (line stroke + band border). */
+  /** Dash pattern as `[dashLength, gapLength]` in pixels (line/series stroke + band border). */
   intervals?: [number, number];
   /**
    * Span the **full chart width** — edge to edge through the Y-axis gutter, not
@@ -94,19 +107,19 @@ export interface ReferenceLine {
    * value on the axis (like a price tag). Only the line/band extends; any
    * `label`/`badge` stays anchored inside the plot. For a Form-A line with a
    * `badge`, the full-width line replaces the dashed connector. No effect on a
-   * vertical time band. Default `false` (stops at the plot edge). Form A / B.
+   * vertical time band. Default `false` (stops at the plot edge). Form A / C.
    */
   fullWidth?: boolean;
   /** Line / band color override. Defaults to palette `refLine`. */
   color?: string;
   /**
    * Band fill color override. Defaults to {@link color}, then palette `refLine`.
-   * Form B / C only.
+   * Form C / D only.
    */
   fillColor?: string;
   /** Fill opacity for a value / time band (0–1). Default `0.16`. */
   fillOpacity?: number;
-  /** Opacity for the line or band border stroke (0–1). Default `1`. */
+  /** Opacity for the line, series, or band border stroke (0–1). Default `1`. */
   strokeOpacity?: number;
   /** Label text color. Defaults to `color`, then palette `refLabel`. */
   labelColor?: string;
@@ -116,7 +129,7 @@ export interface ReferenceLine {
    * (default `"left"`).
    */
   labelPosition?: "left" | "center" | "right";
-  /** Append the formatted `value` to the label (Form A only). Default `false`. */
+  /** Append the formatted value to the label (Form A/B). Default `false`. */
   showValue?: boolean;
   /**
    * Exclude this line's value(s) from the Y-axis range computation, so it may sit
@@ -2352,7 +2365,7 @@ export interface LiveChartCoreProps {
    * `render`). Default off.
    */
   bottomLabel?: boolean | AxisLabelConfig;
-  /** Reference lines / bands drawn into the chart. Supports all three `ReferenceLine` forms. */
+  /** Reference lines / bands drawn into the chart. Supports all four `ReferenceLine` forms. */
   referenceLines?: ReferenceLine[];
   /** Per-instance grid-line styling. Pass an object to override color / width / dash / opacity. */
   gridStyle?: GridStyleConfig;
diff --git a/packages/react-native-livechart/tests/LiveChart.test.tsx b/packages/react-native-livechart/tests/LiveChart.test.tsx
index fad637a..921d3b8 100644
--- a/packages/react-native-livechart/tests/LiveChart.test.tsx
+++ b/packages/react-native-livechart/tests/LiveChart.test.tsx
@@ -1124,6 +1124,30 @@ describe("LiveChart", () => {
     });
   });
 
+  it("draws a historical reference-line series over candle mode", async () => {
+    await layoutFirst(
+      await render(
+        <CandleHarness
+          nowOverride={1_700_000_120}
+          timeWindow={180}
+          referenceLines={[
+            {
+              series: [
+                { time: 1_699_999_940, value: 49 },
+                { time: 1_700_000_000, value: 51 },
+                { time: 1_700_000_060, value: 52 },
+              ],
+              label: "Average cost",
+              showValue: true,
+              color: "#f59e0b",
+              strokeWidth: 2,
+            },
+          ]}
+        />,
+      ),
+    );
+  });
+
   it("keeps the candle-width loop started when switching from line mode", async () => {
     const widthLerpSpy = jest.spyOn(candlePathHooks, "useCandleWidthLerp");
     const screen = await render(
diff --git a/packages/react-native-livechart/tests/components/overlays.test.tsx b/packages/react-native-livechart/tests/components/overlays.test.tsx
index 394c8b7..ae45392 100644
--- a/packages/react-native-livechart/tests/components/overlays.test.tsx
+++ b/packages/react-native-livechart/tests/components/overlays.test.tsx
@@ -1256,6 +1256,20 @@ describe("ReferenceLineOverlay", () => {
     renderLine({ value: 5, label: "mid" });
   });
 
+  it("renders a time-varying reference series (Form B)", () => {
+    renderLine({
+      series: [
+        { time: 1700000000 - 60, value: 4 },
+        { time: 1700000000 - 30, value: 6 },
+        { time: 1700000000 - 10, value: 5 },
+      ],
+      label: "VWAP",
+      showValue: true,
+      color: "#f59e0b",
+      strokeWidth: 2,
+    });
+  });
+
   it("clips a plain line to the right-anchored Y-axis column", async () => {
     const makeBuilder = Skia.PathBuilder.Make as jest.Mock;
     const resultIndex = makeBuilder.mock.results.length;
@@ -1294,7 +1308,7 @@ describe("ReferenceLineOverlay", () => {
     renderLine({ value: 5, badge: true, fullWidth: true });
   });
 
-  it("renders a horizontal value band (Form B)", () => {
+  it("renders a horizontal value band (Form C)", () => {
     renderLine({ valueFrom: 2, valueTo: 8, color: "#fbbf24", label: "band" });
   });
 
@@ -1308,7 +1322,7 @@ describe("ReferenceLineOverlay", () => {
     });
   });
 
-  it("renders a vertical time band (Form C)", () => {
+  it("renders a vertical time band (Form D)", () => {
     renderLine({
       from: 1700000000 - 20,
       to: 1700000000 - 5,
diff --git a/packages/react-native-livechart/tests/hooks/useReferenceLine.test.tsx b/packages/react-native-livechart/tests/hooks/useReferenceLine.test.tsx
index 42aecbc..342dc8c 100644
--- a/packages/react-native-livechart/tests/hooks/useReferenceLine.test.tsx
+++ b/packages/react-native-livechart/tests/hooks/useReferenceLine.test.tsx
@@ -318,7 +318,7 @@ describe("useReferenceLine", () => {
     expect(result.current.value.x1).toBe(DEFAULT_PADDING.left);
   });
 
-  // ── Form B — value band ─────────────────────────────────────────────────────
+  // ── Form C — value band ─────────────────────────────────────────────────────
 
   it("renders a value band with top above bottom", async () => {
     const { result } = await renderHook(() =>
@@ -380,7 +380,7 @@ describe("useReferenceLine", () => {
     expect(result.current.value.visible).toBe(false);
   });
 
-  // ── Form C — time band ──────────────────────────────────────────────────────
+  // ── Form D — time band ──────────────────────────────────────────────────────
 
   it("renders a time band spanning part of the window", async () => {
     // timestamp=0, window=30 → winStart=-30
diff --git a/packages/react-native-livechart/tests/math/referenceLineSeries.test.ts b/packages/react-native-livechart/tests/math/referenceLineSeries.test.ts
new file mode 100644
index 0000000..ec7ae12
--- /dev/null
+++ b/packages/react-native-livechart/tests/math/referenceLineSeries.test.ts
@@ -0,0 +1,85 @@
+import { DEFAULT_PADDING } from "../../src/draw/line";
+import { buildReferenceLineSeriesPoints } from "../../src/math/referenceLineSeries";
+
+const NOW = 100;
+const WINDOW = 40;
+const WIDTH = 220;
+const HEIGHT = 140;
+
+describe("buildReferenceLineSeriesPoints", () => {
+  const points = [
+    { time: 50, value: 4 },
+    { time: 70, value: 6 },
+    { time: 90, value: 8 },
+  ];
+
+  it("interpolates the window edge and extends the last value to now", () => {
+    const result = buildReferenceLineSeriesPoints(
+      points,
+      NOW,
+      WINDOW,
+      0,
+      10,
+      WIDTH,
+      HEIGHT,
+      DEFAULT_PADDING,
+      true,
+    );
+    const plotRight = WIDTH - DEFAULT_PADDING.right;
+    expect(result[0]).toBe(DEFAULT_PADDING.left);
+    expect(result[result.length - 2]).toBe(plotRight);
+    expect(result).toHaveLength(8);
+  });
+
+  it("stops at the final point when extendToNow is false", () => {
+    const result = buildReferenceLineSeriesPoints(
+      points,
+      NOW,
+      WINDOW,
+      0,
+      10,
+      WIDTH,
+      HEIGHT,
+      DEFAULT_PADDING,
+      false,
+    );
+    const plotWidth = WIDTH - DEFAULT_PADDING.left - DEFAULT_PADDING.right;
+    const expectedEndX = DEFAULT_PADDING.left + (30 / WINDOW) * plotWidth;
+    expect(result[result.length - 2]).toBeCloseTo(expectedEndX);
+  });
+
+  it("returns empty geometry when an ended series is left of the window", () => {
+    expect(
+      buildReferenceLineSeriesPoints(
+        [{ time: 20, value: 5 }],
+        NOW,
+        WINDOW,
+        0,
+        10,
+        WIDTH,
+        HEIGHT,
+        DEFAULT_PADDING,
+        false,
+      ),
+    ).toEqual([]);
+  });
+
+  it("reuses and clears the supplied output buffer", () => {
+    const out = [999, 999];
+    expect(
+      buildReferenceLineSeriesPoints(
+        points,
+        NOW,
+        WINDOW,
+        0,
+        10,
+        WIDTH,
+        HEIGHT,
+        DEFAULT_PADDING,
+        true,
+        out,
+      ),
+    ).toBe(out);
+    expect(out).not.toContain(999);
+  });
+});
diff --git a/packages/react-native-livechart/tests/math/referenceLines.test.ts b/packages/react-native-livechart/tests/math/referenceLines.test.ts
index 5f80d16..e28ef49 100644
--- a/packages/react-native-livechart/tests/math/referenceLines.test.ts
+++ b/packages/react-native-livechart/tests/math/referenceLines.test.ts
@@ -184,11 +184,17 @@ describe("referenceLineForm", () => {
     expect(referenceLineForm({ value: 5 })).toBe("line");
   });
 
-  it("classifies a Form-B value band", () => {
+  it("classifies a Form-B series", () => {
+    expect(referenceLineForm({ series: [{ time: 1, value: 5 }] })).toBe(
+      "series",
+    );
+  });
+
+  it("classifies a Form-C value band", () => {
     expect(referenceLineForm({ valueFrom: 1, valueTo: 2 })).toBe("value-band");
   });
 
-  it("classifies a Form-C time band", () => {
+  it("classifies a Form-D time band", () => {
     expect(referenceLineForm({ from: 100, to: 200 })).toBe("time-band");
   });
 
@@ -201,10 +207,26 @@ describe("referenceLineForm", () => {
     expect(referenceLineForm({ from: 1 })).toBe("none");
   });
 
-  it("applies precedence A > B > C", () => {
+  it("applies precedence A > B > C > D", () => {
     expect(
-      referenceLineForm({ value: 5, valueFrom: 1, valueTo: 2, from: 3, to: 4 }),
+      referenceLineForm({
+        value: 5,
+        series: [{ time: 1, value: 2 }],
+        valueFrom: 1,
+        valueTo: 2,
+        from: 3,
+        to: 4,
+      }),
     ).toBe("line");
+    expect(
+      referenceLineForm({
+        series: [{ time: 1, value: 2 }],
+        valueFrom: 1,
+        valueTo: 2,
+        from: 3,
+        to: 4,
+      }),
+    ).toBe("series");
     expect(referenceLineForm({ valueFrom: 1, valueTo: 2, from: 3, to: 4 })).toBe(
       "value-band",
     );
@@ -231,6 +253,21 @@ describe("collectReferenceValues", () => {
     ).toEqual([7]);
   });
 
+  it("folds only a series' finite extrema into the range", () => {
+    expect(
+      collectReferenceValues([
+        {
+          series: [
+            { time: 1, value: 7 },
+            { time: 2, value: Number.NaN },
+            { time: 3, value: 2 },
+            { time: 4, value: 9 },
+          ],
+        },
+      ]),
+    ).toEqual([2, 9]);
+  });
+
   it("ignores form-less entries", () => {
     expect(collectReferenceValues([{}, { valueFrom: 1 }])).toEqual([]);
   });
@@ -260,6 +297,22 @@ describe("referenceLineReactKeys", () => {
       "{badge:true,label:\"Target\",value:10}:1",
     ]);
   });
+
+  it("keeps a series fallback key stable when its samples grow", () => {
+    const before = referenceLineReactKeys([
+      { series: [{ time: 1, value: 10 }], label: "VWAP" },
+    ]);
+    const after = referenceLineReactKeys([
+      {
+        series: [
+          { time: 1, value: 10 },
+          { time: 2, value: 11 },
+        ],
+        label: "VWAP",
+      },
+    ]);
+    expect(after).toEqual(before);
+  });
 });
 
 describe("classifyReferenceEdge", () => {