solid-recharts 0.1.0

package/src/cartesian/ReferenceDot.tsx

@@ -0,0 +1,286 @@
+// Ported from recharts 3.8.1 src/cartesian/ReferenceDot.tsx (commit 7a23854).
+//
+// Draws a circle at a DATA coordinate (x, y), mapped to pixels through the
+// cartesian scale spine (CartesianScaleHelperImpl over the x/y RechartsScales).
+//
+// Solid deviations (documented):
+//  - resolveDefaultProps → `merge`; useEffect add/remove → createEffect + onCleanup.
+//  - The registered settings carry a generated `id` (proxy-safe removal).
+//  - Mouse handlers are wrapped props-first (`(dotProps, e)`) on the default dot
+//    via adaptEventHandlers (recharts does this inside Dot; the port's Dot
+//    forwards raw delegated handlers).
+//  - PERMANENT-N/A (by design, NOT deferred): the custom-element `shape` branch
+//    (React.cloneElement — use the render-function form);
+//    `children` is not rendered (CartesianLabelContext).
+import { createEffect, createMemo, merge, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { Layer } from "../container/Layer";
+import { Dot, type DotProps } from "../shape/Dot";
+import {
+  CartesianLabelContextProvider,
+  CartesianLabelFromLabelProp,
+  type ImplicitLabelType,
+} from "../component/Label";
+import { isNumOrStr } from "../util/DataUtils";
+import { IfOverflow } from "../util/IfOverflow";
+import type { ReferenceDotSettings } from "../state/referenceElementsSlice";
+import { useAppSelector, useAppStore } from "../state/hooks";
+import { selectAxisScale } from "../state/selectors/axisSelectors";
+import { useIsPanorama } from "../context/PanoramaContext";
+import { useClipPathId } from "../container/ClipPathProvider";
+import { svgPropertiesAndEventsKeepCase } from "../util/svgPropertiesAndEvents";
+import { adaptEventHandlers } from "../util/adaptEventHandlers";
+import { useUniqueId } from "../util/useUniqueId";
+import type { AxisId } from "../state/cartesianAxisSlice";
+import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
+import { ZIndexLayer } from "../zIndex/ZIndexLayer";
+import { Coordinate } from "../util/types";
+import { CartesianScaleHelperImpl } from "../util/scale/CartesianScaleHelper";
+import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+
+type ReferenceCoordinateValue = number | string;
+
+/**
+ * ReferenceDot mouse handlers are called props-first: `(dotProps, event)` (recharts parity).
+ * The event's `currentTarget` is the rendered `<circle>`, so the event satisfies
+ * `SVGMousePointer` and can be passed to {@link getRelativeCoordinate} directly.
+ */
+export type ReferenceDotEventHandler = (
+  dotProps: DotProps,
+  event: MouseEvent & { currentTarget: SVGCircleElement },
+) => void;
+
+/** Touch variant of {@link ReferenceDotEventHandler} — also called props-first. */
+export type ReferenceDotTouchEventHandler = (
+  dotProps: DotProps,
+  event: TouchEvent & { currentTarget: SVGCircleElement },
+) => void;
+
+export interface ReferenceDotProps<
+  XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
+  YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
+> {
+  /** The radius of the dot in pixels. @defaultValue 10 */
+  r?: number;
+  /** The x-coordinate (data space) of the center of the dot. */
+  x?: XValueType;
+  /** The y-coordinate (data space) of the center of the dot. */
+  y?: YValueType;
+  /** The id of the corresponding y-axis. @defaultValue 0 */
+  yAxisId?: AxisId;
+  /** The id of the corresponding x-axis. @defaultValue 0 */
+  xAxisId?: AxisId;
+  /** Defines how to draw the dot when it overflows the plot area. @defaultValue 'discard' */
+  ifOverflow?: IfOverflow;
+  /** Custom render function for the dot shape. */
+  shape?: (props: DotProps) => JSX.Element;
+  /** A single label rendered around the dot. @defaultValue false */
+  label?: ImplicitLabelType;
+  /** Stacking order within the chart's z-index system. @defaultValue DefaultZIndexes.scatter */
+  zIndex?: number;
+  class?: string;
+  children?: JSX.Element;
+  /** The customized event handler of click on the dot. */
+  onClick?: ReferenceDotEventHandler;
+  /** The customized event handler of mousedown on the dot. */
+  onMouseDown?: ReferenceDotEventHandler;
+  /** The customized event handler of mouseup on the dot. */
+  onMouseUp?: ReferenceDotEventHandler;
+  /** The customized event handler of mouseover on the dot. */
+  onMouseOver?: ReferenceDotEventHandler;
+  /** The customized event handler of mouseout on the dot. */
+  onMouseOut?: ReferenceDotEventHandler;
+  /** The customized event handler of mouseenter on the dot. */
+  onMouseEnter?: ReferenceDotEventHandler;
+  /** The customized event handler of mousemove on the dot. */
+  onMouseMove?: ReferenceDotEventHandler;
+  /** The customized event handler of mouseleave on the dot. */
+  onMouseLeave?: ReferenceDotEventHandler;
+  /** The customized event handler of touchstart on the dot. */
+  onTouchStart?: ReferenceDotTouchEventHandler;
+  /** The customized event handler of touchmove on the dot. */
+  onTouchMove?: ReferenceDotTouchEventHandler;
+  /** The customized event handler of touchend on the dot. */
+  onTouchEnd?: ReferenceDotTouchEventHandler;
+}
+
+export type Props<
+  XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
+  YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
+> = Omit<
+  DotProps,
+  | "cx"
+  | "cy"
+  | "clipDot"
+  | "class"
+  // Redeclared above with the recharts props-first `(dotProps, event)` signature.
+  | "onClick"
+  | "onMouseDown"
+  | "onMouseUp"
+  | "onMouseOver"
+  | "onMouseOut"
+  | "onMouseEnter"
+  | "onMouseMove"
+  | "onMouseLeave"
+  | "onTouchStart"
+  | "onTouchMove"
+  | "onTouchEnd"
+> &
+  ReferenceDotProps<XValueType, YValueType>;
+
+function ReportReferenceDot(props: ReferenceDotSettings): JSX.Element {
+  const store = useAppStore();
+  let prev: ReferenceDotSettings | null = null;
+
+  createEffect(
+    (): ReferenceDotSettings => ({
+      id: props.id,
+      xAxisId: props.xAxisId,
+      yAxisId: props.yAxisId,
+      ifOverflow: props.ifOverflow,
+      x: props.x,
+      y: props.y,
+      r: props.r,
+    }),
+    (settings) => {
+      if (store == null) {
+        return;
+      }
+      if (prev === null) {
+        store.actions.referenceElements.addDot(settings);
+      } else if (prev !== settings) {
+        store.actions.referenceElements.removeDot(prev);
+        store.actions.referenceElements.addDot(settings);
+      }
+      prev = settings;
+    },
+  );
+
+  unregisterOnCleanup(() => {
+    if (prev && store != null) {
+      store.actions.referenceElements.removeDot(prev);
+      prev = null;
+    }
+  });
+
+  return null;
+}
+
+const renderDot = (option: Props["shape"], props: DotProps): JSX.Element => {
+  if (typeof option === "function") {
+    return option(props);
+  }
+  // recharts' Dot rewraps its event handlers props-first via adaptEventHandlers
+  // (a user's onClick is called `(dotProps, event)`); the port's Dot forwards raw
+  // delegated handlers, so the wrapping happens here on the default-dot branch
+  // (a custom `shape` receives the raw props, as in recharts).
+  const dotProps: DotProps = { ...props, class: "recharts-reference-dot-dot" };
+  return (
+    <Dot {...dotProps} {...(adaptEventHandlers(dotProps) ?? {})} cx={props.cx} cy={props.cy} />
+  );
+};
+
+const referenceDotDefaultProps = {
+  ifOverflow: "discard",
+  xAxisId: 0,
+  yAxisId: 0,
+  r: 10,
+  fill: "#fff",
+  stroke: "#ccc",
+  fillOpacity: 1,
+  strokeWidth: 1,
+  label: false,
+} as const satisfies Partial<Props>;
+
+function ReferenceDotImpl(props: Props): JSX.Element {
+  const merged = merge(referenceDotDefaultProps, props);
+  const clipPathId = useClipPathId();
+  const isPanorama = useIsPanorama();
+  const xAxisScale = useAppSelector((s) => selectAxisScale(s, "xAxis", merged.xAxisId, isPanorama));
+  const yAxisScale = useAppSelector((s) => selectAxisScale(s, "yAxis", merged.yAxisId, isPanorama));
+
+  const coordinate = createMemo<Coordinate | null>(() => {
+    const xv = merged.x;
+    const yv = merged.y;
+    const xs = xAxisScale();
+    const ys = yAxisScale();
+    if (!isNumOrStr(xv) || !isNumOrStr(yv) || xs == null || ys == null) {
+      return null;
+    }
+    const scales = new CartesianScaleHelperImpl({ x: xs, y: ys });
+    const result = scales.map({ x: xv, y: yv }, { position: "middle" });
+    if (merged.ifOverflow === "discard" && !scales.isInRange(result)) {
+      return null;
+    }
+    return result;
+  });
+
+  // The memo returns the dot PROPS (or null) — all reactive prop reads (the svg
+  // spread) happen in this tracking scope, so the Show callback has no untracked
+  // reads beyond the (static) shape.
+  const dotProps = createMemo<DotProps | null>(() => {
+    const c = coordinate();
+    if (!c) {
+      return null;
+    }
+    const clipPath = merged.ifOverflow === "hidden" ? `url(#${clipPathId})` : undefined;
+    return {
+      clipPath,
+      ...svgPropertiesAndEventsKeepCase({ ...merged }),
+      cx: c.x,
+      cy: c.y,
+      r: merged.r,
+    };
+  });
+
+  return (
+    <Show when={dotProps()}>
+      {(p) => (
+        <ZIndexLayer zIndex={merged.zIndex ?? DefaultZIndexes.scatter}>
+          <Layer class="recharts-reference-dot">
+            {renderDot(merged.shape, p())}
+            <CartesianLabelContextProvider
+              x={(p().cx ?? 0) - merged.r}
+              y={(p().cy ?? 0) - merged.r}
+              width={2 * merged.r}
+              height={2 * merged.r}
+              upperWidth={2 * merged.r}
+              lowerWidth={2 * merged.r}
+            >
+              <CartesianLabelFromLabelProp label={merged.label} />
+            </CartesianLabelContextProvider>
+          </Layer>
+        </ZIndexLayer>
+      )}
+    </Show>
+  );
+}
+
+/**
+ * Draws a circle on the chart at a data coordinate (the cartesian-aware version
+ * of {@link Dot}). ReferenceDot maps the provided data coordinates to pixels
+ * through the chart's scales.
+ */
+export function ReferenceDot<
+  XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
+  YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
+>(props: Props<XValueType, YValueType>): JSX.Element {
+  const merged = merge(referenceDotDefaultProps, props);
+  const id = useUniqueId("recharts-reference-dot");
+  return (
+    <>
+      <ReportReferenceDot
+        id={id}
+        y={merged.y}
+        x={merged.x}
+        r={merged.r}
+        yAxisId={merged.yAxisId}
+        xAxisId={merged.xAxisId}
+        ifOverflow={merged.ifOverflow}
+      />
+      <ReferenceDotImpl {...props} />
+    </>
+  );
+}
+
+ReferenceDot.displayName = "ReferenceDot";

package/src/cartesian/ReferenceLine.tsx

@@ -0,0 +1,414 @@
+// Ported from recharts 3.8.1 src/cartesian/ReferenceLine.tsx (commit 7a23854).
+//
+// Draws a horizontal/vertical/diagonal line at a DATA coordinate, mapped to
+// pixels through the cartesian scale spine (selectAxisScale → RechartsScale).
+//
+// Solid deviations (documented):
+//  - resolveDefaultProps → `merge`; useEffect add/remove → createEffect + onCleanup
+//    (the same effect-dispatch registration idiom Line/Bar/Area/SetTooltipEntrySettings use).
+//  - The registered settings carry a generated `id` (proxy-safe removal — see
+//    referenceElementsSlice); recharts matches by object reference.
+//  - `clsx` → single `class` string (Layer takes one string).
+//  - The `label` prop IS wired (CartesianLabelFromLabelProp), and the line renders
+//    inside <ZIndexLayer zIndex={merged.zIndex ?? DefaultZIndexes.line}>.
+//  - PERMANENT-N/A (by design, NOT deferred): the custom-element `shape` branch
+//    (React.cloneElement — Solid has no element-props introspection; use the
+//    render-function form; the default-`<line>` branch is kept). <Label> CHILDREN
+//    are not rendered (the `label` prop is).
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { createEffect, createMemo, merge, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { Layer } from "../container/Layer";
+import {
+  CartesianLabelContextProvider,
+  CartesianLabelFromLabelProp,
+  type ImplicitLabelType,
+} from "../component/Label";
+import { rectWithCoords } from "../util/CartesianUtils";
+import { IfOverflow } from "../util/IfOverflow";
+import { isNumOrStr } from "../util/DataUtils";
+import { CartesianViewBoxRequired, Coordinate, RectanglePosition } from "../util/types";
+import { useViewBox } from "../context/chartLayoutContext";
+import type { ReferenceLineSettings } from "../state/referenceElementsSlice";
+import { useAppSelector, useAppStore } from "../state/hooks";
+import {
+  selectAxisScale,
+  selectXAxisSettings,
+  selectYAxisSettings,
+} from "../state/selectors/axisSelectors";
+import { useIsPanorama } from "../context/PanoramaContext";
+import { useClipPathId } from "../container/ClipPathProvider";
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
+import { useUniqueId } from "../util/useUniqueId";
+import { isWellBehavedNumber } from "../util/isWellBehavedNumber";
+import { BandPosition, RechartsScale } from "../util/scale/RechartsScale";
+import { CartesianScaleHelper, CartesianScaleHelperImpl } from "../util/scale/CartesianScaleHelper";
+import type { AxisId } from "../state/cartesianAxisSlice";
+import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
+import { ZIndexLayer } from "../zIndex/ZIndexLayer";
+import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+
+/**
+ * Single point that defines one end of a segment, in data space.
+ * @inline
+ */
+export type ReferenceLineSegment = readonly [
+  { x?: number | string; y?: number | string },
+  { x?: number | string; y?: number | string },
+];
+
+type ReferenceCoordinateValue = number | string;
+
+/** Orientation of the two cartesian axes (xAxis is top/bottom, yAxis is left/right). */
+type AxisOrientation = "top" | "bottom" | "left" | "right";
+
+/**
+ * Props of the inner `<line>` shape (after svg filtering + endpoint geometry).
+ * NOT wrapped in CamelSvgProps: this is a DOM-READY OUTPUT payload (built from
+ * svgPropertiesAndEvents, spread verbatim onto <line> / handed to `shape`
+ * functions), so its keys are the real kebab attribute names by design.
+ */
+export type LineShapeProps = Partial<JSX.LineSVGAttributes<SVGLineElement>> & {
+  x1?: number;
+  y1?: number;
+  x2?: number;
+  y2?: number;
+};
+
+export interface ReferenceLineProps<
+  XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
+  YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
+> {
+  /** If defined, renders a horizontal line at this (data-space) y position. */
+  y?: YValueType;
+  /** If defined, renders a vertical line at this (data-space) x position. */
+  x?: XValueType;
+  /** Tuple of coordinates. If defined, renders a diagonal line segment. */
+  segment?: readonly [{ x?: XValueType; y?: YValueType }, { x?: XValueType; y?: YValueType }];
+  /** Where within a band the line is drawn (band scales only). @defaultValue 'middle' */
+  position?: BandPosition;
+  /** The id of the corresponding y-axis. @defaultValue 0 */
+  yAxisId?: AxisId;
+  /** The id of the corresponding x-axis. @defaultValue 0 */
+  xAxisId?: AxisId;
+  /** Defines how to draw the line when it overflows the plot area. @defaultValue 'discard' */
+  ifOverflow?: IfOverflow;
+  /** Custom render function for the line shape. */
+  shape?: (props: LineShapeProps) => JSX.Element;
+  /** A single label rendered along the line. @defaultValue false */
+  label?: ImplicitLabelType;
+  /** Stacking order within the chart's z-index system. @defaultValue DefaultZIndexes.line */
+  zIndex?: number;
+  class?: string;
+  children?: JSX.Element;
+}
+
+export type Props<
+  XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
+  YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
+> = Omit<CamelSvgProps<JSX.LineSVGAttributes<SVGLineElement>>, "x" | "y" | "class" | "children"> &
+  ReferenceLineProps<XValueType, YValueType>;
+
+const getHorizontalLineEndPoints = (
+  yCoord: number | string,
+  ifOverflow: IfOverflow,
+  position: BandPosition | undefined,
+  yAxisOrientation: AxisOrientation | undefined,
+  yAxisScale: RechartsScale,
+  viewBox: CartesianViewBoxRequired,
+): ReadonlyArray<Coordinate> | null => {
+  const { x, width } = viewBox;
+  const coord = yAxisScale.map(yCoord, { position });
+  if (!isWellBehavedNumber(coord)) {
+    return null;
+  }
+  if (ifOverflow === "discard" && !yAxisScale.isInRange(coord)) {
+    return null;
+  }
+  const points = [
+    { x: x + width, y: coord },
+    { x, y: coord },
+  ];
+  return yAxisOrientation === "left" ? points.reverse() : points;
+};
+
+const getVerticalLineEndPoints = (
+  xCoord: number | string,
+  ifOverflow: IfOverflow,
+  position: BandPosition | undefined,
+  xAxisOrientation: AxisOrientation | undefined,
+  xAxisScale: RechartsScale,
+  viewBox: CartesianViewBoxRequired,
+): ReadonlyArray<Coordinate> | null => {
+  const { y, height } = viewBox;
+  const coord = xAxisScale.map(xCoord, { position });
+  if (!isWellBehavedNumber(coord)) {
+    return null;
+  }
+  if (ifOverflow === "discard" && !xAxisScale.isInRange(coord)) {
+    return null;
+  }
+  const points = [
+    { x: coord, y: y + height },
+    { x: coord, y },
+  ];
+  return xAxisOrientation === "top" ? points.reverse() : points;
+};
+
+const getSegmentLineEndPoints = (
+  segment: ReferenceLineSegment,
+  ifOverflow: IfOverflow,
+  position: BandPosition | undefined,
+  scales: CartesianScaleHelper,
+): ReadonlyArray<Coordinate> | null => {
+  const points: [Coordinate, Coordinate] = [
+    scales.mapWithFallback(segment[0], { position, fallback: "rangeMin" }),
+    scales.mapWithFallback(segment[1], { position, fallback: "rangeMax" }),
+  ];
+  if (ifOverflow === "discard" && points.some((p) => !scales.isInRange(p))) {
+    return null;
+  }
+  return points;
+};
+
+type EndPointsPropsSubset = {
+  x?: number | string;
+  y?: number | string;
+  segment?: ReferenceLineSegment;
+  ifOverflow: IfOverflow;
+};
+
+export const getEndPoints = (
+  xAxisScale: RechartsScale,
+  yAxisScale: RechartsScale,
+  viewBox: CartesianViewBoxRequired,
+  position: BandPosition | undefined,
+  xAxisOrientation: AxisOrientation | undefined,
+  yAxisOrientation: AxisOrientation | undefined,
+  props: EndPointsPropsSubset,
+): ReadonlyArray<Coordinate> | null => {
+  const { x: xCoord, y: yCoord, segment, ifOverflow } = props;
+  const isFixedX = isNumOrStr(xCoord);
+  const isFixedY = isNumOrStr(yCoord);
+
+  if (isFixedY) {
+    return getHorizontalLineEndPoints(
+      yCoord,
+      ifOverflow,
+      position,
+      yAxisOrientation,
+      yAxisScale,
+      viewBox,
+    );
+  }
+  if (isFixedX) {
+    return getVerticalLineEndPoints(
+      xCoord,
+      ifOverflow,
+      position,
+      xAxisOrientation,
+      xAxisScale,
+      viewBox,
+    );
+  }
+  if (segment != null && segment.length === 2) {
+    return getSegmentLineEndPoints(
+      segment,
+      ifOverflow,
+      position,
+      new CartesianScaleHelperImpl({ x: xAxisScale, y: yAxisScale }),
+    );
+  }
+  return null;
+};
+
+const renderLine = (
+  option: ReferenceLineProps["shape"],
+  lineProps: LineShapeProps,
+): JSX.Element => {
+  if (typeof option === "function") {
+    return option(lineProps);
+  }
+  if (
+    !isWellBehavedNumber(lineProps.x1) ||
+    !isWellBehavedNumber(lineProps.y1) ||
+    !isWellBehavedNumber(lineProps.x2) ||
+    !isWellBehavedNumber(lineProps.y2)
+  ) {
+    return null;
+  }
+  return <line {...lineProps} class="recharts-reference-line-line" />;
+};
+
+function ReportReferenceLine(props: ReferenceLineSettings): JSX.Element {
+  const store = useAppStore();
+  let prev: ReferenceLineSettings | null = null;
+
+  createEffect(
+    (): ReferenceLineSettings => ({
+      id: props.id,
+      xAxisId: props.xAxisId,
+      yAxisId: props.yAxisId,
+      ifOverflow: props.ifOverflow,
+      x: props.x,
+      y: props.y,
+      segment: props.segment,
+    }),
+    (settings) => {
+      if (store == null) {
+        return;
+      }
+      if (prev === null) {
+        store.actions.referenceElements.addLine(settings);
+      } else if (prev !== settings) {
+        store.actions.referenceElements.removeLine(prev);
+        store.actions.referenceElements.addLine(settings);
+      }
+      prev = settings;
+    },
+  );
+
+  unregisterOnCleanup(() => {
+    if (prev && store != null) {
+      store.actions.referenceElements.removeLine(prev);
+      prev = null;
+    }
+  });
+
+  return null;
+}
+
+const referenceLineDefaultProps = {
+  ifOverflow: "discard",
+  xAxisId: 0,
+  yAxisId: 0,
+  fill: "none",
+  stroke: "#ccc",
+  fillOpacity: 1,
+  strokeWidth: 1,
+  position: "middle",
+  label: false,
+} as const satisfies Partial<Props>;
+
+function ReferenceLineImpl(props: Props): JSX.Element {
+  const merged = merge(referenceLineDefaultProps, props);
+  const isPanorama = useIsPanorama();
+  const clipPathId = useClipPathId();
+  const viewBox = useViewBox();
+  const xAxis = useAppSelector((s) => selectXAxisSettings(s, merged.xAxisId));
+  const yAxis = useAppSelector((s) => selectYAxisSettings(s, merged.yAxisId));
+  const xAxisScale = useAppSelector((s) => selectAxisScale(s, "xAxis", merged.xAxisId, isPanorama));
+  const yAxisScale = useAppSelector((s) => selectAxisScale(s, "yAxis", merged.yAxisId, isPanorama));
+
+  const coords = createMemo<{ x1: number; y1: number; x2: number; y2: number } | null>(() => {
+    const vb = viewBox();
+    const xs = xAxisScale();
+    const ys = yAxisScale();
+    const xAxisSettings = xAxis();
+    const yAxisSettings = yAxis();
+    if (
+      clipPathId == null ||
+      vb == null ||
+      xs == null ||
+      ys == null ||
+      xAxisSettings == null ||
+      yAxisSettings == null
+    ) {
+      return null;
+    }
+    const endPoints = getEndPoints(
+      xs,
+      ys,
+      vb,
+      merged.position,
+      xAxisSettings.orientation,
+      yAxisSettings.orientation,
+      {
+        x: merged.x,
+        y: merged.y,
+        segment: merged.segment,
+        ifOverflow: merged.ifOverflow,
+      },
+    );
+    if (!endPoints) {
+      return null;
+    }
+    const point1 = endPoints[0];
+    const point2 = endPoints[1];
+    if (point1 == null || point2 == null) {
+      return null;
+    }
+    return { x1: point1.x, y1: point1.y, x2: point2.x, y2: point2.y };
+  });
+
+  // The memo returns the line PROPS (or null) — all reactive prop reads (the svg
+  // spread) happen in this tracking scope, so the Show callback has no untracked
+  // reads beyond the (static) shape.
+  const rendered = createMemo<{ line: LineShapeProps; rect: RectanglePosition } | null>(() => {
+    const c = coords();
+    if (!c) {
+      return null;
+    }
+    const clipPath = merged.ifOverflow === "hidden" ? `url(#${clipPathId})` : undefined;
+    const line: LineShapeProps = {
+      "clip-path": clipPath,
+      ...svgPropertiesAndEvents({ ...merged }),
+      x1: c.x1,
+      y1: c.y1,
+      x2: c.x2,
+      y2: c.y2,
+    };
+    return { line, rect: rectWithCoords({ x1: c.x1, y1: c.y1, x2: c.x2, y2: c.y2 }) };
+  });
+
+  return (
+    <Show when={rendered()}>
+      {(r) => (
+        <ZIndexLayer zIndex={merged.zIndex ?? DefaultZIndexes.line}>
+          <Layer class="recharts-reference-line">
+            {renderLine(merged.shape, r().line)}
+            <CartesianLabelContextProvider
+              x={r().rect.x}
+              y={r().rect.y}
+              width={r().rect.width}
+              height={r().rect.height}
+              upperWidth={r().rect.width}
+              lowerWidth={r().rect.width}
+            >
+              <CartesianLabelFromLabelProp label={merged.label} />
+            </CartesianLabelContextProvider>
+          </Layer>
+        </ZIndexLayer>
+      )}
+    </Show>
+  );
+}
+
+/**
+ * Draws a line on the chart at a data coordinate (the cartesian-aware version of
+ * an SVG `<line>`). ReferenceLine maps the provided data coordinates to pixels
+ * through the chart's scales.
+ */
+export function ReferenceLine<
+  XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
+  YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
+>(props: Props<XValueType, YValueType>): JSX.Element {
+  const merged = merge(referenceLineDefaultProps, props);
+  const id = useUniqueId("recharts-reference-line");
+  return (
+    <>
+      <ReportReferenceLine
+        id={id}
+        yAxisId={merged.yAxisId}
+        xAxisId={merged.xAxisId}
+        ifOverflow={merged.ifOverflow}
+        x={merged.x}
+        y={merged.y}
+        segment={merged.segment}
+      />
+      <ReferenceLineImpl {...props} />
+    </>
+  );
+}
+
+ReferenceLine.displayName = "ReferenceLine";