hyperprop-charting-library 0.1.65 → 0.1.67

package/dist/hyperprop-charting-library.cjs

@@ -126,7 +126,8 @@ var DEFAULT_PRICE_LINE_OPTIONS = {
   labelBackgroundColor: "#0b1220",
   labelTextColor: "#60a5fa",
   labelBorderRadius: 3,
-  showLabel: true
+  showLabel: true,
+  pinOutOfRange: false
 };
 var DEFAULT_ORDER_LINE_OPTIONS = {
   visible: true,
@@ -160,7 +161,8 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   connectorThickness: 1,
   connectorAnchorPaddingRight: 10,
   fillToPrice: Number.NaN,
-  fillColor: "rgba(37,99,235,0.18)"
+  fillColor: "rgba(37,99,235,0.18)",
+  pinOutOfRange: false
 };
 var DEFAULT_OPTIONS = {
   width: 720,
@@ -193,6 +195,7 @@ var DEFAULT_OPTIONS = {
   candleColorEpsilon: -1,
   autoScaleSmoothing: 0.16,
   autoScaleIgnoreLatestCandle: true,
+  pinOutOfRangeLines: false,
   doubleClickEnabled: true,
   doubleClickAction: "reset",
   crosshair: DEFAULT_CROSSHAIR_OPTIONS,
@@ -1501,12 +1504,27 @@ function createChart(element, options = {}) {
     const scaleWidth = Math.max(0, Math.floor(width - getRightAxisLabelX(chartRight)));
     return Math.max(contentWidth, scaleWidth);
   };
+  const getLineY = (price, yFromPrice, chartTop, chartBottom, pinOutOfRange = mergedOptions.pinOutOfRangeLines) => {
+    const y = yFromPrice(price);
+    if (!Number.isFinite(y)) {
+      return null;
+    }
+    const minY = chartTop + 1;
+    const maxY = chartBottom - 1;
+    if (y < minY || y > maxY) {
+      return pinOutOfRange ? clamp(y, minY, maxY) : null;
+    }
+    return y;
+  };
   const drawPriceLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
     if (!mergedLine.visible || !Number.isFinite(mergedLine.price)) {
       return;
     }
-    const lineY = clamp(yFromPrice(mergedLine.price), chartTop + 1, chartBottom - 1);
+    const lineY = getLineY(mergedLine.price, yFromPrice, chartTop, chartBottom, mergedLine.pinOutOfRange);
+    if (lineY === null) {
+      return;
+    }
     const color = mergedLine.color;
     ctx.save();
     ctx.strokeStyle = color;
@@ -1552,10 +1570,16 @@ function createChart(element, options = {}) {
     if (!mergedLine.visible || !Number.isFinite(renderPrice)) {
       return;
     }
-    const lineY = clamp(yFromPrice(renderPrice), chartTop + 1, chartBottom - 1);
+    const lineY = getLineY(renderPrice, yFromPrice, chartTop, chartBottom, mergedLine.pinOutOfRange);
+    if (lineY === null) {
+      return;
+    }
     const color = line.color ?? (mergedLine.type === "takeProfit" ? "rgba(45,212,191,0.86)" : mergedLine.type === "stop" ? "rgba(245,158,11,0.86)" : "rgba(59,130,246,0.8)");
     if (Number.isFinite(mergedLine.fillToPrice)) {
-      const fillY = clamp(yFromPrice(mergedLine.fillToPrice), chartTop + 1, chartBottom - 1);
+      const fillY = getLineY(mergedLine.fillToPrice, yFromPrice, chartTop, chartBottom, true);
+      if (fillY === null) {
+        return;
+      }
       const topY = Math.min(lineY, fillY);
       const heightY = Math.max(1, Math.abs(lineY - fillY));
       ctx.save();
@@ -1573,21 +1597,29 @@ function createChart(element, options = {}) {
     ctx.stroke();
     ctx.restore();
     if (Number.isFinite(mergedLine.connectorToPrice)) {
-      const connectorY = clamp(yFromPrice(mergedLine.connectorToPrice), chartTop + 1, chartBottom - 1);
-      const connectorX = chartRight - Math.max(6, mergedLine.connectorAnchorPaddingRight);
-      ctx.save();
-      ctx.strokeStyle = mergedLine.connectorColor ?? color;
-      ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
-      applyDashPattern(
-        mergedLine.connectorStyle,
-        dashPatterns.connectorDotted,
-        dashPatterns.connectorDashed
+      const connectorY = getLineY(
+        mergedLine.connectorToPrice,
+        yFromPrice,
+        chartTop,
+        chartBottom,
+        mergedLine.pinOutOfRange
       );
-      ctx.beginPath();
-      ctx.moveTo(crisp(connectorX), crisp(lineY));
-      ctx.lineTo(crisp(connectorX), crisp(connectorY));
-      ctx.stroke();
-      ctx.restore();
+      if (connectorY !== null) {
+        const connectorX = chartRight - Math.max(6, mergedLine.connectorAnchorPaddingRight);
+        ctx.save();
+        ctx.strokeStyle = mergedLine.connectorColor ?? color;
+        ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
+        applyDashPattern(
+          mergedLine.connectorStyle,
+          dashPatterns.connectorDotted,
+          dashPatterns.connectorDashed
+        );
+        ctx.beginPath();
+        ctx.moveTo(crisp(connectorX), crisp(lineY));
+        ctx.lineTo(crisp(connectorX), crisp(connectorY));
+        ctx.stroke();
+        ctx.restore();
+      }
     }
     const qtyText = mergedLine.qty === void 0 ? "" : String(mergedLine.qty);
     const typeTextMap = {
@@ -2120,7 +2152,11 @@ function createChart(element, options = {}) {
       if (drawing.type === "horizontal-line") {
         const point = drawing.points[0];
         if (point) {
-          const y = clamp(yFromPrice(point.price), chartTop + 1, chartBottom - 1);
+          const y = getLineY(point.price, yFromPrice, chartTop, chartBottom);
+          if (y === null) {
+            ctx.restore();
+            return;
+          }
           const handleX = chartRight - 64;
           ctx.beginPath();
           ctx.moveTo(crisp(chartLeft), crisp(y));
@@ -2560,13 +2596,19 @@ function createChart(element, options = {}) {
       if (!labels.visible || !Number.isFinite(label.price) || label.text.length === 0) {
         return;
       }
+      if (getLineY(label.price, yFromPrice, chartTop, chartBottom, label.pinOutOfRange) === null) {
+        return;
+      }
       priceAxisLabels.push(label);
     };
-    const drawReferenceLine = (price, color, style = "dotted") => {
+    const drawReferenceLine = (price, color, style = "dotted", pinOutOfRange = mergedOptions.pinOutOfRangeLines) => {
       if (!Number.isFinite(price)) {
         return;
       }
-      const y = clamp(yFromPrice(price), chartTop + 1, chartBottom - 1);
+      const y = getLineY(price, yFromPrice, chartTop, chartBottom, pinOutOfRange);
+      if (y === null) {
+        return;
+      }
       ctx.save();
       ctx.strokeStyle = color;
       ctx.lineWidth = 1;
@@ -2593,22 +2635,23 @@ function createChart(element, options = {}) {
     let tickerColor = null;
     if ((ticker.visible ?? true) && lastPoint) {
       tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
-      const tickerY = yFromPrice(tickerPrice);
-      const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
+      const lineY = getLineY(tickerPrice, yFromPrice, chartTop, chartBottom);
       const lastDirection = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice >= lastPoint.o ? "up" : "down" : getCandleDirectionByIndex(data.length - 1);
       tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
       const tickerThickness = Math.max(1, ticker.thickness ?? 1);
       const tickerStyle = ticker.style ?? "solid";
-      ctx.save();
-      ctx.strokeStyle = tickerColor;
-      ctx.lineWidth = tickerThickness;
-      applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
-      ctx.beginPath();
-      ctx.moveTo(crisp(chartLeft), crisp(lineY));
-      ctx.lineTo(crisp(chartRight), crisp(lineY));
-      ctx.stroke();
-      ctx.setLineDash([]);
-      ctx.restore();
+      if (lineY !== null) {
+        ctx.save();
+        ctx.strokeStyle = tickerColor;
+        ctx.lineWidth = tickerThickness;
+        applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
+        ctx.beginPath();
+        ctx.moveTo(crisp(chartLeft), crisp(lineY));
+        ctx.lineTo(crisp(chartRight), crisp(lineY));
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.restore();
+      }
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
       const tickerSubtexts = [
@@ -2718,13 +2761,14 @@ function createChart(element, options = {}) {
         }
         const labelTextWidth = Math.max(primaryWidth, subtextWidth);
         const labelWidth = getRightAxisLabelWidth(chartRight, labelTextWidth);
+        const labelLineY = getLineY(label.price, yFromPrice, chartTop, chartBottom, label.pinOutOfRange);
         return {
           ...label,
           subtexts,
           subtextFontSize,
           height: labelHeight,
           width: labelWidth,
-          targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
+          targetY: (labelLineY ?? yFromPrice(label.price)) - labelHeight / 2,
           y: 0
         };
       }).sort((a, b) => a.targetY - b.targetY || b.priority - a.priority);
@@ -3522,15 +3566,10 @@ function createChart(element, options = {}) {
     }
     const midpoint = getMidpoint(first, second);
     const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
-    const startYMin = yMinOverride ?? drawState.yMin;
-    const startYMax = yMaxOverride ?? drawState.yMax;
     pinchZoomState = {
       startDistance: Math.max(1, getPointerDistance(first, second)),
       startSpan: xSpan,
-      anchorIndex: drawState.xStart + anchorRatio * xSpan,
-      startMidpoint: midpoint,
-      startYMin,
-      startYMax
+      anchorIndex: drawState.xStart + anchorRatio * xSpan
     };
     isDragging = false;
     dragMode = null;
@@ -3559,11 +3598,6 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
-    const startYRange = pinchZoomState.startYMax - pinchZoomState.startYMin || 1;
-    const priceShift = (midpoint.y - pinchZoomState.startMidpoint.y) / drawState.chartHeight * startYRange;
-    const clampedY = clampYRange(pinchZoomState.startYMin + priceShift, pinchZoomState.startYMax + priceShift);
-    yMinOverride = clampedY.min;
-    yMaxOverride = clampedY.max;
     updateFollowLatest(false);
     emitViewportChange();
     draw();

package/dist/hyperprop-charting-library.d.ts

@@ -29,6 +29,7 @@ interface ChartOptions {
     candleColorEpsilon?: number;
     autoScaleSmoothing?: number;
     autoScaleIgnoreLatestCandle?: boolean;
+    pinOutOfRangeLines?: boolean;
     doubleClickEnabled?: boolean;
     doubleClickAction?: "reset" | "placeLimitOrder";
     crosshair?: CrosshairOptions;
@@ -233,6 +234,7 @@ interface PriceLineOptions {
     labelTextColor?: string;
     labelBorderRadius?: number;
     showLabel?: boolean;
+    pinOutOfRange?: boolean;
 }
 interface OrderLineOptions {
     id?: string;
@@ -276,6 +278,7 @@ interface OrderLineOptions {
     connectorAnchorPaddingRight?: number;
     fillToPrice?: number;
     fillColor?: string;
+    pinOutOfRange?: boolean;
 }
 interface OrderActionEvent {
     orderId?: string;

package/dist/hyperprop-charting-library.js

@@ -102,7 +102,8 @@ var DEFAULT_PRICE_LINE_OPTIONS = {
   labelBackgroundColor: "#0b1220",
   labelTextColor: "#60a5fa",
   labelBorderRadius: 3,
-  showLabel: true
+  showLabel: true,
+  pinOutOfRange: false
 };
 var DEFAULT_ORDER_LINE_OPTIONS = {
   visible: true,
@@ -136,7 +137,8 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   connectorThickness: 1,
   connectorAnchorPaddingRight: 10,
   fillToPrice: Number.NaN,
-  fillColor: "rgba(37,99,235,0.18)"
+  fillColor: "rgba(37,99,235,0.18)",
+  pinOutOfRange: false
 };
 var DEFAULT_OPTIONS = {
   width: 720,
@@ -169,6 +171,7 @@ var DEFAULT_OPTIONS = {
   candleColorEpsilon: -1,
   autoScaleSmoothing: 0.16,
   autoScaleIgnoreLatestCandle: true,
+  pinOutOfRangeLines: false,
   doubleClickEnabled: true,
   doubleClickAction: "reset",
   crosshair: DEFAULT_CROSSHAIR_OPTIONS,
@@ -1477,12 +1480,27 @@ function createChart(element, options = {}) {
     const scaleWidth = Math.max(0, Math.floor(width - getRightAxisLabelX(chartRight)));
     return Math.max(contentWidth, scaleWidth);
   };
+  const getLineY = (price, yFromPrice, chartTop, chartBottom, pinOutOfRange = mergedOptions.pinOutOfRangeLines) => {
+    const y = yFromPrice(price);
+    if (!Number.isFinite(y)) {
+      return null;
+    }
+    const minY = chartTop + 1;
+    const maxY = chartBottom - 1;
+    if (y < minY || y > maxY) {
+      return pinOutOfRange ? clamp(y, minY, maxY) : null;
+    }
+    return y;
+  };
   const drawPriceLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
     if (!mergedLine.visible || !Number.isFinite(mergedLine.price)) {
       return;
     }
-    const lineY = clamp(yFromPrice(mergedLine.price), chartTop + 1, chartBottom - 1);
+    const lineY = getLineY(mergedLine.price, yFromPrice, chartTop, chartBottom, mergedLine.pinOutOfRange);
+    if (lineY === null) {
+      return;
+    }
     const color = mergedLine.color;
     ctx.save();
     ctx.strokeStyle = color;
@@ -1528,10 +1546,16 @@ function createChart(element, options = {}) {
     if (!mergedLine.visible || !Number.isFinite(renderPrice)) {
       return;
     }
-    const lineY = clamp(yFromPrice(renderPrice), chartTop + 1, chartBottom - 1);
+    const lineY = getLineY(renderPrice, yFromPrice, chartTop, chartBottom, mergedLine.pinOutOfRange);
+    if (lineY === null) {
+      return;
+    }
     const color = line.color ?? (mergedLine.type === "takeProfit" ? "rgba(45,212,191,0.86)" : mergedLine.type === "stop" ? "rgba(245,158,11,0.86)" : "rgba(59,130,246,0.8)");
     if (Number.isFinite(mergedLine.fillToPrice)) {
-      const fillY = clamp(yFromPrice(mergedLine.fillToPrice), chartTop + 1, chartBottom - 1);
+      const fillY = getLineY(mergedLine.fillToPrice, yFromPrice, chartTop, chartBottom, true);
+      if (fillY === null) {
+        return;
+      }
       const topY = Math.min(lineY, fillY);
       const heightY = Math.max(1, Math.abs(lineY - fillY));
       ctx.save();
@@ -1549,21 +1573,29 @@ function createChart(element, options = {}) {
     ctx.stroke();
     ctx.restore();
     if (Number.isFinite(mergedLine.connectorToPrice)) {
-      const connectorY = clamp(yFromPrice(mergedLine.connectorToPrice), chartTop + 1, chartBottom - 1);
-      const connectorX = chartRight - Math.max(6, mergedLine.connectorAnchorPaddingRight);
-      ctx.save();
-      ctx.strokeStyle = mergedLine.connectorColor ?? color;
-      ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
-      applyDashPattern(
-        mergedLine.connectorStyle,
-        dashPatterns.connectorDotted,
-        dashPatterns.connectorDashed
+      const connectorY = getLineY(
+        mergedLine.connectorToPrice,
+        yFromPrice,
+        chartTop,
+        chartBottom,
+        mergedLine.pinOutOfRange
       );
-      ctx.beginPath();
-      ctx.moveTo(crisp(connectorX), crisp(lineY));
-      ctx.lineTo(crisp(connectorX), crisp(connectorY));
-      ctx.stroke();
-      ctx.restore();
+      if (connectorY !== null) {
+        const connectorX = chartRight - Math.max(6, mergedLine.connectorAnchorPaddingRight);
+        ctx.save();
+        ctx.strokeStyle = mergedLine.connectorColor ?? color;
+        ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
+        applyDashPattern(
+          mergedLine.connectorStyle,
+          dashPatterns.connectorDotted,
+          dashPatterns.connectorDashed
+        );
+        ctx.beginPath();
+        ctx.moveTo(crisp(connectorX), crisp(lineY));
+        ctx.lineTo(crisp(connectorX), crisp(connectorY));
+        ctx.stroke();
+        ctx.restore();
+      }
     }
     const qtyText = mergedLine.qty === void 0 ? "" : String(mergedLine.qty);
     const typeTextMap = {
@@ -2096,7 +2128,11 @@ function createChart(element, options = {}) {
       if (drawing.type === "horizontal-line") {
         const point = drawing.points[0];
         if (point) {
-          const y = clamp(yFromPrice(point.price), chartTop + 1, chartBottom - 1);
+          const y = getLineY(point.price, yFromPrice, chartTop, chartBottom);
+          if (y === null) {
+            ctx.restore();
+            return;
+          }
           const handleX = chartRight - 64;
           ctx.beginPath();
           ctx.moveTo(crisp(chartLeft), crisp(y));
@@ -2536,13 +2572,19 @@ function createChart(element, options = {}) {
       if (!labels.visible || !Number.isFinite(label.price) || label.text.length === 0) {
         return;
       }
+      if (getLineY(label.price, yFromPrice, chartTop, chartBottom, label.pinOutOfRange) === null) {
+        return;
+      }
       priceAxisLabels.push(label);
     };
-    const drawReferenceLine = (price, color, style = "dotted") => {
+    const drawReferenceLine = (price, color, style = "dotted", pinOutOfRange = mergedOptions.pinOutOfRangeLines) => {
       if (!Number.isFinite(price)) {
         return;
       }
-      const y = clamp(yFromPrice(price), chartTop + 1, chartBottom - 1);
+      const y = getLineY(price, yFromPrice, chartTop, chartBottom, pinOutOfRange);
+      if (y === null) {
+        return;
+      }
       ctx.save();
       ctx.strokeStyle = color;
       ctx.lineWidth = 1;
@@ -2569,22 +2611,23 @@ function createChart(element, options = {}) {
     let tickerColor = null;
     if ((ticker.visible ?? true) && lastPoint) {
       tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
-      const tickerY = yFromPrice(tickerPrice);
-      const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
+      const lineY = getLineY(tickerPrice, yFromPrice, chartTop, chartBottom);
       const lastDirection = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice >= lastPoint.o ? "up" : "down" : getCandleDirectionByIndex(data.length - 1);
       tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
       const tickerThickness = Math.max(1, ticker.thickness ?? 1);
       const tickerStyle = ticker.style ?? "solid";
-      ctx.save();
-      ctx.strokeStyle = tickerColor;
-      ctx.lineWidth = tickerThickness;
-      applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
-      ctx.beginPath();
-      ctx.moveTo(crisp(chartLeft), crisp(lineY));
-      ctx.lineTo(crisp(chartRight), crisp(lineY));
-      ctx.stroke();
-      ctx.setLineDash([]);
-      ctx.restore();
+      if (lineY !== null) {
+        ctx.save();
+        ctx.strokeStyle = tickerColor;
+        ctx.lineWidth = tickerThickness;
+        applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
+        ctx.beginPath();
+        ctx.moveTo(crisp(chartLeft), crisp(lineY));
+        ctx.lineTo(crisp(chartRight), crisp(lineY));
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.restore();
+      }
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
       const tickerSubtexts = [
@@ -2694,13 +2737,14 @@ function createChart(element, options = {}) {
         }
         const labelTextWidth = Math.max(primaryWidth, subtextWidth);
         const labelWidth = getRightAxisLabelWidth(chartRight, labelTextWidth);
+        const labelLineY = getLineY(label.price, yFromPrice, chartTop, chartBottom, label.pinOutOfRange);
         return {
           ...label,
           subtexts,
           subtextFontSize,
           height: labelHeight,
           width: labelWidth,
-          targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
+          targetY: (labelLineY ?? yFromPrice(label.price)) - labelHeight / 2,
           y: 0
         };
       }).sort((a, b) => a.targetY - b.targetY || b.priority - a.priority);
@@ -3498,15 +3542,10 @@ function createChart(element, options = {}) {
     }
     const midpoint = getMidpoint(first, second);
     const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
-    const startYMin = yMinOverride ?? drawState.yMin;
-    const startYMax = yMaxOverride ?? drawState.yMax;
     pinchZoomState = {
       startDistance: Math.max(1, getPointerDistance(first, second)),
       startSpan: xSpan,
-      anchorIndex: drawState.xStart + anchorRatio * xSpan,
-      startMidpoint: midpoint,
-      startYMin,
-      startYMax
+      anchorIndex: drawState.xStart + anchorRatio * xSpan
     };
     isDragging = false;
     dragMode = null;
@@ -3535,11 +3574,6 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
-    const startYRange = pinchZoomState.startYMax - pinchZoomState.startYMin || 1;
-    const priceShift = (midpoint.y - pinchZoomState.startMidpoint.y) / drawState.chartHeight * startYRange;
-    const clampedY = clampYRange(pinchZoomState.startYMin + priceShift, pinchZoomState.startYMax + priceShift);
-    yMinOverride = clampedY.min;
-    yMaxOverride = clampedY.max;
     updateFollowLatest(false);
     emitViewportChange();
     draw();

package/dist/index.cjs

@@ -126,7 +126,8 @@ var DEFAULT_PRICE_LINE_OPTIONS = {
   labelBackgroundColor: "#0b1220",
   labelTextColor: "#60a5fa",
   labelBorderRadius: 3,
-  showLabel: true
+  showLabel: true,
+  pinOutOfRange: false
 };
 var DEFAULT_ORDER_LINE_OPTIONS = {
   visible: true,
@@ -160,7 +161,8 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   connectorThickness: 1,
   connectorAnchorPaddingRight: 10,
   fillToPrice: Number.NaN,
-  fillColor: "rgba(37,99,235,0.18)"
+  fillColor: "rgba(37,99,235,0.18)",
+  pinOutOfRange: false
 };
 var DEFAULT_OPTIONS = {
   width: 720,
@@ -193,6 +195,7 @@ var DEFAULT_OPTIONS = {
   candleColorEpsilon: -1,
   autoScaleSmoothing: 0.16,
   autoScaleIgnoreLatestCandle: true,
+  pinOutOfRangeLines: false,
   doubleClickEnabled: true,
   doubleClickAction: "reset",
   crosshair: DEFAULT_CROSSHAIR_OPTIONS,
@@ -1501,12 +1504,27 @@ function createChart(element, options = {}) {
     const scaleWidth = Math.max(0, Math.floor(width - getRightAxisLabelX(chartRight)));
     return Math.max(contentWidth, scaleWidth);
   };
+  const getLineY = (price, yFromPrice, chartTop, chartBottom, pinOutOfRange = mergedOptions.pinOutOfRangeLines) => {
+    const y = yFromPrice(price);
+    if (!Number.isFinite(y)) {
+      return null;
+    }
+    const minY = chartTop + 1;
+    const maxY = chartBottom - 1;
+    if (y < minY || y > maxY) {
+      return pinOutOfRange ? clamp(y, minY, maxY) : null;
+    }
+    return y;
+  };
   const drawPriceLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
     if (!mergedLine.visible || !Number.isFinite(mergedLine.price)) {
       return;
     }
-    const lineY = clamp(yFromPrice(mergedLine.price), chartTop + 1, chartBottom - 1);
+    const lineY = getLineY(mergedLine.price, yFromPrice, chartTop, chartBottom, mergedLine.pinOutOfRange);
+    if (lineY === null) {
+      return;
+    }
     const color = mergedLine.color;
     ctx.save();
     ctx.strokeStyle = color;
@@ -1552,10 +1570,16 @@ function createChart(element, options = {}) {
     if (!mergedLine.visible || !Number.isFinite(renderPrice)) {
       return;
     }
-    const lineY = clamp(yFromPrice(renderPrice), chartTop + 1, chartBottom - 1);
+    const lineY = getLineY(renderPrice, yFromPrice, chartTop, chartBottom, mergedLine.pinOutOfRange);
+    if (lineY === null) {
+      return;
+    }
     const color = line.color ?? (mergedLine.type === "takeProfit" ? "rgba(45,212,191,0.86)" : mergedLine.type === "stop" ? "rgba(245,158,11,0.86)" : "rgba(59,130,246,0.8)");
     if (Number.isFinite(mergedLine.fillToPrice)) {
-      const fillY = clamp(yFromPrice(mergedLine.fillToPrice), chartTop + 1, chartBottom - 1);
+      const fillY = getLineY(mergedLine.fillToPrice, yFromPrice, chartTop, chartBottom, true);
+      if (fillY === null) {
+        return;
+      }
       const topY = Math.min(lineY, fillY);
       const heightY = Math.max(1, Math.abs(lineY - fillY));
       ctx.save();
@@ -1573,21 +1597,29 @@ function createChart(element, options = {}) {
     ctx.stroke();
     ctx.restore();
     if (Number.isFinite(mergedLine.connectorToPrice)) {
-      const connectorY = clamp(yFromPrice(mergedLine.connectorToPrice), chartTop + 1, chartBottom - 1);
-      const connectorX = chartRight - Math.max(6, mergedLine.connectorAnchorPaddingRight);
-      ctx.save();
-      ctx.strokeStyle = mergedLine.connectorColor ?? color;
-      ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
-      applyDashPattern(
-        mergedLine.connectorStyle,
-        dashPatterns.connectorDotted,
-        dashPatterns.connectorDashed
+      const connectorY = getLineY(
+        mergedLine.connectorToPrice,
+        yFromPrice,
+        chartTop,
+        chartBottom,
+        mergedLine.pinOutOfRange
       );
-      ctx.beginPath();
-      ctx.moveTo(crisp(connectorX), crisp(lineY));
-      ctx.lineTo(crisp(connectorX), crisp(connectorY));
-      ctx.stroke();
-      ctx.restore();
+      if (connectorY !== null) {
+        const connectorX = chartRight - Math.max(6, mergedLine.connectorAnchorPaddingRight);
+        ctx.save();
+        ctx.strokeStyle = mergedLine.connectorColor ?? color;
+        ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
+        applyDashPattern(
+          mergedLine.connectorStyle,
+          dashPatterns.connectorDotted,
+          dashPatterns.connectorDashed
+        );
+        ctx.beginPath();
+        ctx.moveTo(crisp(connectorX), crisp(lineY));
+        ctx.lineTo(crisp(connectorX), crisp(connectorY));
+        ctx.stroke();
+        ctx.restore();
+      }
     }
     const qtyText = mergedLine.qty === void 0 ? "" : String(mergedLine.qty);
     const typeTextMap = {
@@ -2120,7 +2152,11 @@ function createChart(element, options = {}) {
       if (drawing.type === "horizontal-line") {
         const point = drawing.points[0];
         if (point) {
-          const y = clamp(yFromPrice(point.price), chartTop + 1, chartBottom - 1);
+          const y = getLineY(point.price, yFromPrice, chartTop, chartBottom);
+          if (y === null) {
+            ctx.restore();
+            return;
+          }
           const handleX = chartRight - 64;
           ctx.beginPath();
           ctx.moveTo(crisp(chartLeft), crisp(y));
@@ -2560,13 +2596,19 @@ function createChart(element, options = {}) {
       if (!labels.visible || !Number.isFinite(label.price) || label.text.length === 0) {
         return;
       }
+      if (getLineY(label.price, yFromPrice, chartTop, chartBottom, label.pinOutOfRange) === null) {
+        return;
+      }
       priceAxisLabels.push(label);
     };
-    const drawReferenceLine = (price, color, style = "dotted") => {
+    const drawReferenceLine = (price, color, style = "dotted", pinOutOfRange = mergedOptions.pinOutOfRangeLines) => {
       if (!Number.isFinite(price)) {
         return;
       }
-      const y = clamp(yFromPrice(price), chartTop + 1, chartBottom - 1);
+      const y = getLineY(price, yFromPrice, chartTop, chartBottom, pinOutOfRange);
+      if (y === null) {
+        return;
+      }
       ctx.save();
       ctx.strokeStyle = color;
       ctx.lineWidth = 1;
@@ -2593,22 +2635,23 @@ function createChart(element, options = {}) {
     let tickerColor = null;
     if ((ticker.visible ?? true) && lastPoint) {
       tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
-      const tickerY = yFromPrice(tickerPrice);
-      const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
+      const lineY = getLineY(tickerPrice, yFromPrice, chartTop, chartBottom);
       const lastDirection = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice >= lastPoint.o ? "up" : "down" : getCandleDirectionByIndex(data.length - 1);
       tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
       const tickerThickness = Math.max(1, ticker.thickness ?? 1);
       const tickerStyle = ticker.style ?? "solid";
-      ctx.save();
-      ctx.strokeStyle = tickerColor;
-      ctx.lineWidth = tickerThickness;
-      applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
-      ctx.beginPath();
-      ctx.moveTo(crisp(chartLeft), crisp(lineY));
-      ctx.lineTo(crisp(chartRight), crisp(lineY));
-      ctx.stroke();
-      ctx.setLineDash([]);
-      ctx.restore();
+      if (lineY !== null) {
+        ctx.save();
+        ctx.strokeStyle = tickerColor;
+        ctx.lineWidth = tickerThickness;
+        applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
+        ctx.beginPath();
+        ctx.moveTo(crisp(chartLeft), crisp(lineY));
+        ctx.lineTo(crisp(chartRight), crisp(lineY));
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.restore();
+      }
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
       const tickerSubtexts = [
@@ -2718,13 +2761,14 @@ function createChart(element, options = {}) {
         }
         const labelTextWidth = Math.max(primaryWidth, subtextWidth);
         const labelWidth = getRightAxisLabelWidth(chartRight, labelTextWidth);
+        const labelLineY = getLineY(label.price, yFromPrice, chartTop, chartBottom, label.pinOutOfRange);
         return {
           ...label,
           subtexts,
           subtextFontSize,
           height: labelHeight,
           width: labelWidth,
-          targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
+          targetY: (labelLineY ?? yFromPrice(label.price)) - labelHeight / 2,
           y: 0
         };
       }).sort((a, b) => a.targetY - b.targetY || b.priority - a.priority);
@@ -3522,15 +3566,10 @@ function createChart(element, options = {}) {
     }
     const midpoint = getMidpoint(first, second);
     const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
-    const startYMin = yMinOverride ?? drawState.yMin;
-    const startYMax = yMaxOverride ?? drawState.yMax;
     pinchZoomState = {
       startDistance: Math.max(1, getPointerDistance(first, second)),
       startSpan: xSpan,
-      anchorIndex: drawState.xStart + anchorRatio * xSpan,
-      startMidpoint: midpoint,
-      startYMin,
-      startYMax
+      anchorIndex: drawState.xStart + anchorRatio * xSpan
     };
     isDragging = false;
     dragMode = null;
@@ -3559,11 +3598,6 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
-    const startYRange = pinchZoomState.startYMax - pinchZoomState.startYMin || 1;
-    const priceShift = (midpoint.y - pinchZoomState.startMidpoint.y) / drawState.chartHeight * startYRange;
-    const clampedY = clampYRange(pinchZoomState.startYMin + priceShift, pinchZoomState.startYMax + priceShift);
-    yMinOverride = clampedY.min;
-    yMaxOverride = clampedY.max;
     updateFollowLatest(false);
     emitViewportChange();
     draw();

package/dist/index.d.cts

@@ -29,6 +29,7 @@ interface ChartOptions {
     candleColorEpsilon?: number;
     autoScaleSmoothing?: number;
     autoScaleIgnoreLatestCandle?: boolean;
+    pinOutOfRangeLines?: boolean;
     doubleClickEnabled?: boolean;
     doubleClickAction?: "reset" | "placeLimitOrder";
     crosshair?: CrosshairOptions;
@@ -233,6 +234,7 @@ interface PriceLineOptions {
     labelTextColor?: string;
     labelBorderRadius?: number;
     showLabel?: boolean;
+    pinOutOfRange?: boolean;
 }
 interface OrderLineOptions {
     id?: string;
@@ -276,6 +278,7 @@ interface OrderLineOptions {
     connectorAnchorPaddingRight?: number;
     fillToPrice?: number;
     fillColor?: string;
+    pinOutOfRange?: boolean;
 }
 interface OrderActionEvent {
     orderId?: string;

package/dist/index.d.ts

@@ -29,6 +29,7 @@ interface ChartOptions {
     candleColorEpsilon?: number;
     autoScaleSmoothing?: number;
     autoScaleIgnoreLatestCandle?: boolean;
+    pinOutOfRangeLines?: boolean;
     doubleClickEnabled?: boolean;
     doubleClickAction?: "reset" | "placeLimitOrder";
     crosshair?: CrosshairOptions;
@@ -233,6 +234,7 @@ interface PriceLineOptions {
     labelTextColor?: string;
     labelBorderRadius?: number;
     showLabel?: boolean;
+    pinOutOfRange?: boolean;
 }
 interface OrderLineOptions {
     id?: string;
@@ -276,6 +278,7 @@ interface OrderLineOptions {
     connectorAnchorPaddingRight?: number;
     fillToPrice?: number;
     fillColor?: string;
+    pinOutOfRange?: boolean;
 }
 interface OrderActionEvent {
     orderId?: string;

package/dist/index.js

@@ -102,7 +102,8 @@ var DEFAULT_PRICE_LINE_OPTIONS = {
   labelBackgroundColor: "#0b1220",
   labelTextColor: "#60a5fa",
   labelBorderRadius: 3,
-  showLabel: true
+  showLabel: true,
+  pinOutOfRange: false
 };
 var DEFAULT_ORDER_LINE_OPTIONS = {
   visible: true,
@@ -136,7 +137,8 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   connectorThickness: 1,
   connectorAnchorPaddingRight: 10,
   fillToPrice: Number.NaN,
-  fillColor: "rgba(37,99,235,0.18)"
+  fillColor: "rgba(37,99,235,0.18)",
+  pinOutOfRange: false
 };
 var DEFAULT_OPTIONS = {
   width: 720,
@@ -169,6 +171,7 @@ var DEFAULT_OPTIONS = {
   candleColorEpsilon: -1,
   autoScaleSmoothing: 0.16,
   autoScaleIgnoreLatestCandle: true,
+  pinOutOfRangeLines: false,
   doubleClickEnabled: true,
   doubleClickAction: "reset",
   crosshair: DEFAULT_CROSSHAIR_OPTIONS,
@@ -1477,12 +1480,27 @@ function createChart(element, options = {}) {
     const scaleWidth = Math.max(0, Math.floor(width - getRightAxisLabelX(chartRight)));
     return Math.max(contentWidth, scaleWidth);
   };
+  const getLineY = (price, yFromPrice, chartTop, chartBottom, pinOutOfRange = mergedOptions.pinOutOfRangeLines) => {
+    const y = yFromPrice(price);
+    if (!Number.isFinite(y)) {
+      return null;
+    }
+    const minY = chartTop + 1;
+    const maxY = chartBottom - 1;
+    if (y < minY || y > maxY) {
+      return pinOutOfRange ? clamp(y, minY, maxY) : null;
+    }
+    return y;
+  };
   const drawPriceLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
     if (!mergedLine.visible || !Number.isFinite(mergedLine.price)) {
       return;
     }
-    const lineY = clamp(yFromPrice(mergedLine.price), chartTop + 1, chartBottom - 1);
+    const lineY = getLineY(mergedLine.price, yFromPrice, chartTop, chartBottom, mergedLine.pinOutOfRange);
+    if (lineY === null) {
+      return;
+    }
     const color = mergedLine.color;
     ctx.save();
     ctx.strokeStyle = color;
@@ -1528,10 +1546,16 @@ function createChart(element, options = {}) {
     if (!mergedLine.visible || !Number.isFinite(renderPrice)) {
       return;
     }
-    const lineY = clamp(yFromPrice(renderPrice), chartTop + 1, chartBottom - 1);
+    const lineY = getLineY(renderPrice, yFromPrice, chartTop, chartBottom, mergedLine.pinOutOfRange);
+    if (lineY === null) {
+      return;
+    }
     const color = line.color ?? (mergedLine.type === "takeProfit" ? "rgba(45,212,191,0.86)" : mergedLine.type === "stop" ? "rgba(245,158,11,0.86)" : "rgba(59,130,246,0.8)");
     if (Number.isFinite(mergedLine.fillToPrice)) {
-      const fillY = clamp(yFromPrice(mergedLine.fillToPrice), chartTop + 1, chartBottom - 1);
+      const fillY = getLineY(mergedLine.fillToPrice, yFromPrice, chartTop, chartBottom, true);
+      if (fillY === null) {
+        return;
+      }
       const topY = Math.min(lineY, fillY);
       const heightY = Math.max(1, Math.abs(lineY - fillY));
       ctx.save();
@@ -1549,21 +1573,29 @@ function createChart(element, options = {}) {
     ctx.stroke();
     ctx.restore();
     if (Number.isFinite(mergedLine.connectorToPrice)) {
-      const connectorY = clamp(yFromPrice(mergedLine.connectorToPrice), chartTop + 1, chartBottom - 1);
-      const connectorX = chartRight - Math.max(6, mergedLine.connectorAnchorPaddingRight);
-      ctx.save();
-      ctx.strokeStyle = mergedLine.connectorColor ?? color;
-      ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
-      applyDashPattern(
-        mergedLine.connectorStyle,
-        dashPatterns.connectorDotted,
-        dashPatterns.connectorDashed
+      const connectorY = getLineY(
+        mergedLine.connectorToPrice,
+        yFromPrice,
+        chartTop,
+        chartBottom,
+        mergedLine.pinOutOfRange
       );
-      ctx.beginPath();
-      ctx.moveTo(crisp(connectorX), crisp(lineY));
-      ctx.lineTo(crisp(connectorX), crisp(connectorY));
-      ctx.stroke();
-      ctx.restore();
+      if (connectorY !== null) {
+        const connectorX = chartRight - Math.max(6, mergedLine.connectorAnchorPaddingRight);
+        ctx.save();
+        ctx.strokeStyle = mergedLine.connectorColor ?? color;
+        ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
+        applyDashPattern(
+          mergedLine.connectorStyle,
+          dashPatterns.connectorDotted,
+          dashPatterns.connectorDashed
+        );
+        ctx.beginPath();
+        ctx.moveTo(crisp(connectorX), crisp(lineY));
+        ctx.lineTo(crisp(connectorX), crisp(connectorY));
+        ctx.stroke();
+        ctx.restore();
+      }
     }
     const qtyText = mergedLine.qty === void 0 ? "" : String(mergedLine.qty);
     const typeTextMap = {
@@ -2096,7 +2128,11 @@ function createChart(element, options = {}) {
       if (drawing.type === "horizontal-line") {
         const point = drawing.points[0];
         if (point) {
-          const y = clamp(yFromPrice(point.price), chartTop + 1, chartBottom - 1);
+          const y = getLineY(point.price, yFromPrice, chartTop, chartBottom);
+          if (y === null) {
+            ctx.restore();
+            return;
+          }
           const handleX = chartRight - 64;
           ctx.beginPath();
           ctx.moveTo(crisp(chartLeft), crisp(y));
@@ -2536,13 +2572,19 @@ function createChart(element, options = {}) {
       if (!labels.visible || !Number.isFinite(label.price) || label.text.length === 0) {
         return;
       }
+      if (getLineY(label.price, yFromPrice, chartTop, chartBottom, label.pinOutOfRange) === null) {
+        return;
+      }
       priceAxisLabels.push(label);
     };
-    const drawReferenceLine = (price, color, style = "dotted") => {
+    const drawReferenceLine = (price, color, style = "dotted", pinOutOfRange = mergedOptions.pinOutOfRangeLines) => {
       if (!Number.isFinite(price)) {
         return;
       }
-      const y = clamp(yFromPrice(price), chartTop + 1, chartBottom - 1);
+      const y = getLineY(price, yFromPrice, chartTop, chartBottom, pinOutOfRange);
+      if (y === null) {
+        return;
+      }
       ctx.save();
       ctx.strokeStyle = color;
       ctx.lineWidth = 1;
@@ -2569,22 +2611,23 @@ function createChart(element, options = {}) {
     let tickerColor = null;
     if ((ticker.visible ?? true) && lastPoint) {
       tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
-      const tickerY = yFromPrice(tickerPrice);
-      const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
+      const lineY = getLineY(tickerPrice, yFromPrice, chartTop, chartBottom);
       const lastDirection = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice >= lastPoint.o ? "up" : "down" : getCandleDirectionByIndex(data.length - 1);
       tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
       const tickerThickness = Math.max(1, ticker.thickness ?? 1);
       const tickerStyle = ticker.style ?? "solid";
-      ctx.save();
-      ctx.strokeStyle = tickerColor;
-      ctx.lineWidth = tickerThickness;
-      applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
-      ctx.beginPath();
-      ctx.moveTo(crisp(chartLeft), crisp(lineY));
-      ctx.lineTo(crisp(chartRight), crisp(lineY));
-      ctx.stroke();
-      ctx.setLineDash([]);
-      ctx.restore();
+      if (lineY !== null) {
+        ctx.save();
+        ctx.strokeStyle = tickerColor;
+        ctx.lineWidth = tickerThickness;
+        applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
+        ctx.beginPath();
+        ctx.moveTo(crisp(chartLeft), crisp(lineY));
+        ctx.lineTo(crisp(chartRight), crisp(lineY));
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.restore();
+      }
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
       const tickerSubtexts = [
@@ -2694,13 +2737,14 @@ function createChart(element, options = {}) {
         }
         const labelTextWidth = Math.max(primaryWidth, subtextWidth);
         const labelWidth = getRightAxisLabelWidth(chartRight, labelTextWidth);
+        const labelLineY = getLineY(label.price, yFromPrice, chartTop, chartBottom, label.pinOutOfRange);
         return {
           ...label,
           subtexts,
           subtextFontSize,
           height: labelHeight,
           width: labelWidth,
-          targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
+          targetY: (labelLineY ?? yFromPrice(label.price)) - labelHeight / 2,
           y: 0
         };
       }).sort((a, b) => a.targetY - b.targetY || b.priority - a.priority);
@@ -3498,15 +3542,10 @@ function createChart(element, options = {}) {
     }
     const midpoint = getMidpoint(first, second);
     const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
-    const startYMin = yMinOverride ?? drawState.yMin;
-    const startYMax = yMaxOverride ?? drawState.yMax;
     pinchZoomState = {
       startDistance: Math.max(1, getPointerDistance(first, second)),
       startSpan: xSpan,
-      anchorIndex: drawState.xStart + anchorRatio * xSpan,
-      startMidpoint: midpoint,
-      startYMin,
-      startYMax
+      anchorIndex: drawState.xStart + anchorRatio * xSpan
     };
     isDragging = false;
     dragMode = null;
@@ -3535,11 +3574,6 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
-    const startYRange = pinchZoomState.startYMax - pinchZoomState.startYMin || 1;
-    const priceShift = (midpoint.y - pinchZoomState.startMidpoint.y) / drawState.chartHeight * startYRange;
-    const clampedY = clampYRange(pinchZoomState.startYMin + priceShift, pinchZoomState.startYMax + priceShift);
-    yMinOverride = clampedY.min;
-    yMaxOverride = clampedY.max;
     updateFollowLatest(false);
     emitViewportChange();
     draw();

package/docs/API.md

@@ -57,6 +57,7 @@ Top-level options:
 - `candleColorEpsilon` (default `-1` = auto from `priceDecimals`; set `0` to disable tolerance)
 - `autoScaleSmoothing` (default `0.16`)
 - `autoScaleIgnoreLatestCandle` (default `true`)
+- `pinOutOfRangeLines` (default `false`; when `true`, horizontal price/order/reference lines outside the visible price range are pinned to the top/bottom chart edge)
 - `doubleClickEnabled` (default `true`)
 - `doubleClickAction` (`"reset"` | `"placeLimitOrder"`, default `"reset"`)
 - `crosshair?: CrosshairOptions`
@@ -226,6 +227,7 @@ createChart(root, {
 - `labelTextColor` (default `#0f172a`)
 - `labelBorderRadius` (default `3`)
 - `showLabel` (default `true`)
+- `pinOutOfRange?: boolean` (default `false`; overrides `ChartOptions.pinOutOfRangeLines` for this line)
 
 ### `OrderActionButton`
 
@@ -269,6 +271,7 @@ Common optional fields:
 - `widgetPosition?: "left" | "center" | "right"` (default `"left"`)
 - `widgetPaddingRight?: number` (default `10`, extra right margin when `widgetPosition` is `"right"`)
 - `draggable?: boolean` (default `false`)
+- `pinOutOfRange?: boolean` (default `false`; overrides `ChartOptions.pinOutOfRangeLines` for this order/position line)
 
 Legacy single action button:
 

package/docs/RECIPES.md

@@ -85,6 +85,22 @@ chart.addPriceLine({
 });
 ```
 
+## Pin out-of-range lines to the chart edge
+
+By default, horizontal price/order/drawing lines outside the visible price range are hidden instead of being pinned to the top or bottom edge. Opt in globally or per line when you want marker-style behavior for important levels.
+
+```ts
+const chart = createChart(rootEl, {
+  pinOutOfRangeLines: true
+});
+
+chart.addPriceLine({
+  price: 6400,
+  label: "Liquidation",
+  pinOutOfRange: true
+});
+```
+
 ## Add chart drawing tools
 
 Drawing tools are separate from indicators. Indicators compute/render data series; drawings are user-created objects that can be persisted.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.65",
+  "version": "0.1.67",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",