hyperprop-charting-library 0.1.82 → 0.1.84

package/dist/hyperprop-charting-library.cjs

@@ -2503,11 +2503,12 @@ function createChart(element, options = {}) {
             handleAt(leftX, stopY, drawing.color);
             handleAt(rightX, entryY, drawing.color);
             const tick = getConfiguredTickSize();
-            const pctOf = (price) => {
+            const pctOfDist = (dist) => {
               if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
-              return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+              const pct = dist / Math.abs(entry.price) * 100;
+              return `${pct < 1 ? pct.toFixed(3) : pct.toFixed(2)}%`;
             };
-            const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+            const ticksOfDist = (dist) => tick > 0 ? ` ${Math.round(dist / tick)}` : "";
             const targetDist = Math.abs(target.price - entry.price);
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
@@ -2517,16 +2518,18 @@ function createChart(element, options = {}) {
             const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
             const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
             const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
-            const formatAmount = (value) => Math.abs(value) >= 1e3 ? value.toFixed(0) : value.toFixed(2);
-            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * targetDist * effectivePointValue)}` : "";
-            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stopDist * effectivePointValue)}` : "";
+            const formatAmount = (value) => value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
+              const lines = Array.isArray(text) ? text : [text];
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
               const padding = 6;
-              const textW = ctx.measureText(text).width;
+              const lineH = 14;
+              const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
               const pillW = textW + padding * 2;
-              const pillH = 18;
+              const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
               const pillX = centerX - pillW / 2;
               const pillY = centerY - pillH / 2;
               ctx.fillStyle = bg;
@@ -2534,28 +2537,104 @@ function createChart(element, options = {}) {
               ctx.fillStyle = labelTextColor;
               ctx.textAlign = "center";
               ctx.textBaseline = "middle";
-              ctx.fillText(text, centerX, pillY + pillH / 2);
+              const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
+              lines.forEach((line, lineIndex) => ctx.fillText(line, centerX, startY + lineIndex * lineH));
               ctx.font = prevFont;
             };
-            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}${targetAmountText}`, cx, targetY, profitLine);
-            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}${stopAmountText}`, cx, stopY, lossLine);
-            let centerText;
+            drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, cx, stopY, lossLine);
+            let centerLines;
             let centerBg;
             if (positionHit) {
-              const pnl = positionHit.profit ? qtyRaw * targetDist * effectivePointValue : -(qtyRaw * stopDist * effectivePointValue);
-              const pnlText = hasMoney ? `Closed P&L: ${formatAmount(pnl)}` : `Closed ${positionHit.profit ? "+" : "\u2212"}${formatPrice(Math.abs(positionHit.price - entry.price))}`;
-              centerText = hasMoney ? `${pnlText}, Qty: ${qtyText}  RR ${rr.toFixed(2)}` : `${pnlText}  RR ${rr.toFixed(2)}`;
+              const pnlPoints = positionHit.profit ? targetDist : -stopDist;
+              const line1 = hasMoney ? `Closed P&L: ${formatPrice(pnlPoints)}, Qty: ${qtyText}` : `Closed P&L: ${formatPrice(pnlPoints)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
               centerBg = positionHit.profit ? profitLine : lossLine;
             } else {
-              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              const line1 = hasMoney ? `Entry: ${formatPrice(entry.price)}, Qty: ${qtyText}` : `Entry: ${formatPrice(entry.price)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
               centerBg = hexToRgba(drawing.color, 0.92);
             }
-            drawPositionPill(centerText, cx, entryY, centerBg);
+            drawPositionPill(centerLines, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }
           }
         }
+      } else if (drawing.type === "price-range") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1) {
+          const px0 = xFromDrawingPoint(p0);
+          const px1 = xFromDrawingPoint(p1);
+          const leftX = Math.min(px0, px1);
+          const rightX = Math.max(px0, px1);
+          const boxW = Math.max(1, rightX - leftX);
+          const y0 = yFromPrice(p0.price);
+          const y1 = yFromPrice(p1.price);
+          const topY = Math.min(y0, y1);
+          const botY = Math.max(y0, y1);
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+          ctx.fillRect(leftX, topY, boxW, Math.max(0, botY - topY));
+          ctx.setLineDash([]);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = drawing.color;
+          ctx.beginPath();
+          ctx.moveTo(crisp(leftX), crisp(topY));
+          ctx.lineTo(crisp(rightX), crisp(topY));
+          ctx.moveTo(crisp(leftX), crisp(botY));
+          ctx.lineTo(crisp(rightX), crisp(botY));
+          ctx.stroke();
+          const midX = (leftX + rightX) / 2;
+          const down = p1.price <= p0.price;
+          const arrowToY = down ? botY : topY;
+          ctx.beginPath();
+          ctx.moveTo(crisp(midX), crisp(down ? topY : botY));
+          ctx.lineTo(crisp(midX), crisp(arrowToY));
+          ctx.stroke();
+          const head = 6;
+          ctx.beginPath();
+          ctx.moveTo(midX, arrowToY);
+          ctx.lineTo(midX - head, arrowToY + (down ? -head : head));
+          ctx.moveTo(midX, arrowToY);
+          ctx.lineTo(midX + head, arrowToY + (down ? -head : head));
+          ctx.stroke();
+          ctx.restore();
+          handleAt(px0, y0, drawing.color);
+          handleAt(px1, y1, drawing.color);
+          const tick = getConfiguredTickSize();
+          const diff = p1.price - p0.price;
+          const base = Math.abs(p0.price) > 0 ? Math.abs(p0.price) : 1;
+          const pct = diff / base * 100;
+          const ticks = tick > 0 ? Math.round(diff / tick) : 0;
+          const signed = (value, text) => `${value < 0 ? "\u2212" : value > 0 ? "+" : ""}${text}`;
+          const labelText = tick > 0 ? `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)}) ${signed(ticks, String(Math.abs(ticks)))}` : `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)})`;
+          const prevFont = ctx.font;
+          ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+          const padding = 6;
+          const textW = ctx.measureText(labelText).width;
+          const pillW = textW + padding * 2;
+          const pillH = 18;
+          const pillX = midX - pillW / 2;
+          const pillY = botY + 6;
+          ctx.fillStyle = mergedOptions.backgroundColor;
+          fillRoundedRect(pillX, pillY, pillW, pillH, 4);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+          ctx.lineWidth = 1;
+          ctx.strokeRect(crisp(pillX), crisp(pillY), pillW, pillH);
+          ctx.restore();
+          ctx.fillStyle = drawing.color;
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.fillText(labelText, midX, pillY + pillH / 2);
+          ctx.font = prevFont;
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, midX, topY - 4, drawing.color);
+          }
+        }
       }
       ctx.restore();
     };
@@ -3791,6 +3870,19 @@ function createChart(element, options = {}) {
         if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "price-range") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3991,6 +4083,25 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "price-range") {
+      const tick = getConfiguredTickSize();
+      const visibleRange = drawState.yMax - drawState.yMin;
+      const priceOffset = visibleRange > 0 ? visibleRange * 0.18 : tick > 0 ? tick * 80 : Math.abs(point.price) * 0.03 || 1;
+      const width2 = Math.max(8, Math.round(xSpan * 0.2));
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      drawings.push(
+        normalizeDrawingState({
+          type: activeDrawingTool,
+          points: [point, normalizeDrawingPoint(point.index + width2, point.price - priceOffset)],
+          color: defaults.color ?? "#2962ff",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
       const isLong = activeDrawingTool === "long-position";
       const tick = getConfiguredTickSize();

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

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/hyperprop-charting-library.js

@@ -2477,11 +2477,12 @@ function createChart(element, options = {}) {
             handleAt(leftX, stopY, drawing.color);
             handleAt(rightX, entryY, drawing.color);
             const tick = getConfiguredTickSize();
-            const pctOf = (price) => {
+            const pctOfDist = (dist) => {
               if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
-              return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+              const pct = dist / Math.abs(entry.price) * 100;
+              return `${pct < 1 ? pct.toFixed(3) : pct.toFixed(2)}%`;
             };
-            const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+            const ticksOfDist = (dist) => tick > 0 ? ` ${Math.round(dist / tick)}` : "";
             const targetDist = Math.abs(target.price - entry.price);
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
@@ -2491,16 +2492,18 @@ function createChart(element, options = {}) {
             const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
             const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
             const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
-            const formatAmount = (value) => Math.abs(value) >= 1e3 ? value.toFixed(0) : value.toFixed(2);
-            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * targetDist * effectivePointValue)}` : "";
-            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stopDist * effectivePointValue)}` : "";
+            const formatAmount = (value) => value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
+              const lines = Array.isArray(text) ? text : [text];
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
               const padding = 6;
-              const textW = ctx.measureText(text).width;
+              const lineH = 14;
+              const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
               const pillW = textW + padding * 2;
-              const pillH = 18;
+              const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
               const pillX = centerX - pillW / 2;
               const pillY = centerY - pillH / 2;
               ctx.fillStyle = bg;
@@ -2508,28 +2511,104 @@ function createChart(element, options = {}) {
               ctx.fillStyle = labelTextColor;
               ctx.textAlign = "center";
               ctx.textBaseline = "middle";
-              ctx.fillText(text, centerX, pillY + pillH / 2);
+              const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
+              lines.forEach((line, lineIndex) => ctx.fillText(line, centerX, startY + lineIndex * lineH));
               ctx.font = prevFont;
             };
-            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}${targetAmountText}`, cx, targetY, profitLine);
-            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}${stopAmountText}`, cx, stopY, lossLine);
-            let centerText;
+            drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, cx, stopY, lossLine);
+            let centerLines;
             let centerBg;
             if (positionHit) {
-              const pnl = positionHit.profit ? qtyRaw * targetDist * effectivePointValue : -(qtyRaw * stopDist * effectivePointValue);
-              const pnlText = hasMoney ? `Closed P&L: ${formatAmount(pnl)}` : `Closed ${positionHit.profit ? "+" : "\u2212"}${formatPrice(Math.abs(positionHit.price - entry.price))}`;
-              centerText = hasMoney ? `${pnlText}, Qty: ${qtyText}  RR ${rr.toFixed(2)}` : `${pnlText}  RR ${rr.toFixed(2)}`;
+              const pnlPoints = positionHit.profit ? targetDist : -stopDist;
+              const line1 = hasMoney ? `Closed P&L: ${formatPrice(pnlPoints)}, Qty: ${qtyText}` : `Closed P&L: ${formatPrice(pnlPoints)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
               centerBg = positionHit.profit ? profitLine : lossLine;
             } else {
-              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              const line1 = hasMoney ? `Entry: ${formatPrice(entry.price)}, Qty: ${qtyText}` : `Entry: ${formatPrice(entry.price)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
               centerBg = hexToRgba(drawing.color, 0.92);
             }
-            drawPositionPill(centerText, cx, entryY, centerBg);
+            drawPositionPill(centerLines, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }
           }
         }
+      } else if (drawing.type === "price-range") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1) {
+          const px0 = xFromDrawingPoint(p0);
+          const px1 = xFromDrawingPoint(p1);
+          const leftX = Math.min(px0, px1);
+          const rightX = Math.max(px0, px1);
+          const boxW = Math.max(1, rightX - leftX);
+          const y0 = yFromPrice(p0.price);
+          const y1 = yFromPrice(p1.price);
+          const topY = Math.min(y0, y1);
+          const botY = Math.max(y0, y1);
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+          ctx.fillRect(leftX, topY, boxW, Math.max(0, botY - topY));
+          ctx.setLineDash([]);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = drawing.color;
+          ctx.beginPath();
+          ctx.moveTo(crisp(leftX), crisp(topY));
+          ctx.lineTo(crisp(rightX), crisp(topY));
+          ctx.moveTo(crisp(leftX), crisp(botY));
+          ctx.lineTo(crisp(rightX), crisp(botY));
+          ctx.stroke();
+          const midX = (leftX + rightX) / 2;
+          const down = p1.price <= p0.price;
+          const arrowToY = down ? botY : topY;
+          ctx.beginPath();
+          ctx.moveTo(crisp(midX), crisp(down ? topY : botY));
+          ctx.lineTo(crisp(midX), crisp(arrowToY));
+          ctx.stroke();
+          const head = 6;
+          ctx.beginPath();
+          ctx.moveTo(midX, arrowToY);
+          ctx.lineTo(midX - head, arrowToY + (down ? -head : head));
+          ctx.moveTo(midX, arrowToY);
+          ctx.lineTo(midX + head, arrowToY + (down ? -head : head));
+          ctx.stroke();
+          ctx.restore();
+          handleAt(px0, y0, drawing.color);
+          handleAt(px1, y1, drawing.color);
+          const tick = getConfiguredTickSize();
+          const diff = p1.price - p0.price;
+          const base = Math.abs(p0.price) > 0 ? Math.abs(p0.price) : 1;
+          const pct = diff / base * 100;
+          const ticks = tick > 0 ? Math.round(diff / tick) : 0;
+          const signed = (value, text) => `${value < 0 ? "\u2212" : value > 0 ? "+" : ""}${text}`;
+          const labelText = tick > 0 ? `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)}) ${signed(ticks, String(Math.abs(ticks)))}` : `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)})`;
+          const prevFont = ctx.font;
+          ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+          const padding = 6;
+          const textW = ctx.measureText(labelText).width;
+          const pillW = textW + padding * 2;
+          const pillH = 18;
+          const pillX = midX - pillW / 2;
+          const pillY = botY + 6;
+          ctx.fillStyle = mergedOptions.backgroundColor;
+          fillRoundedRect(pillX, pillY, pillW, pillH, 4);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+          ctx.lineWidth = 1;
+          ctx.strokeRect(crisp(pillX), crisp(pillY), pillW, pillH);
+          ctx.restore();
+          ctx.fillStyle = drawing.color;
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.fillText(labelText, midX, pillY + pillH / 2);
+          ctx.font = prevFont;
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, midX, topY - 4, drawing.color);
+          }
+        }
       }
       ctx.restore();
     };
@@ -3765,6 +3844,19 @@ function createChart(element, options = {}) {
         if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "price-range") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3965,6 +4057,25 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "price-range") {
+      const tick = getConfiguredTickSize();
+      const visibleRange = drawState.yMax - drawState.yMin;
+      const priceOffset = visibleRange > 0 ? visibleRange * 0.18 : tick > 0 ? tick * 80 : Math.abs(point.price) * 0.03 || 1;
+      const width2 = Math.max(8, Math.round(xSpan * 0.2));
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      drawings.push(
+        normalizeDrawingState({
+          type: activeDrawingTool,
+          points: [point, normalizeDrawingPoint(point.index + width2, point.price - priceOffset)],
+          color: defaults.color ?? "#2962ff",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
       const isLong = activeDrawingTool === "long-position";
       const tick = getConfiguredTickSize();

package/dist/index.cjs

@@ -2503,11 +2503,12 @@ function createChart(element, options = {}) {
             handleAt(leftX, stopY, drawing.color);
             handleAt(rightX, entryY, drawing.color);
             const tick = getConfiguredTickSize();
-            const pctOf = (price) => {
+            const pctOfDist = (dist) => {
               if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
-              return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+              const pct = dist / Math.abs(entry.price) * 100;
+              return `${pct < 1 ? pct.toFixed(3) : pct.toFixed(2)}%`;
             };
-            const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+            const ticksOfDist = (dist) => tick > 0 ? ` ${Math.round(dist / tick)}` : "";
             const targetDist = Math.abs(target.price - entry.price);
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
@@ -2517,16 +2518,18 @@ function createChart(element, options = {}) {
             const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
             const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
             const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
-            const formatAmount = (value) => Math.abs(value) >= 1e3 ? value.toFixed(0) : value.toFixed(2);
-            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * targetDist * effectivePointValue)}` : "";
-            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stopDist * effectivePointValue)}` : "";
+            const formatAmount = (value) => value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
+              const lines = Array.isArray(text) ? text : [text];
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
               const padding = 6;
-              const textW = ctx.measureText(text).width;
+              const lineH = 14;
+              const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
               const pillW = textW + padding * 2;
-              const pillH = 18;
+              const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
               const pillX = centerX - pillW / 2;
               const pillY = centerY - pillH / 2;
               ctx.fillStyle = bg;
@@ -2534,28 +2537,104 @@ function createChart(element, options = {}) {
               ctx.fillStyle = labelTextColor;
               ctx.textAlign = "center";
               ctx.textBaseline = "middle";
-              ctx.fillText(text, centerX, pillY + pillH / 2);
+              const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
+              lines.forEach((line, lineIndex) => ctx.fillText(line, centerX, startY + lineIndex * lineH));
               ctx.font = prevFont;
             };
-            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}${targetAmountText}`, cx, targetY, profitLine);
-            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}${stopAmountText}`, cx, stopY, lossLine);
-            let centerText;
+            drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, cx, stopY, lossLine);
+            let centerLines;
             let centerBg;
             if (positionHit) {
-              const pnl = positionHit.profit ? qtyRaw * targetDist * effectivePointValue : -(qtyRaw * stopDist * effectivePointValue);
-              const pnlText = hasMoney ? `Closed P&L: ${formatAmount(pnl)}` : `Closed ${positionHit.profit ? "+" : "\u2212"}${formatPrice(Math.abs(positionHit.price - entry.price))}`;
-              centerText = hasMoney ? `${pnlText}, Qty: ${qtyText}  RR ${rr.toFixed(2)}` : `${pnlText}  RR ${rr.toFixed(2)}`;
+              const pnlPoints = positionHit.profit ? targetDist : -stopDist;
+              const line1 = hasMoney ? `Closed P&L: ${formatPrice(pnlPoints)}, Qty: ${qtyText}` : `Closed P&L: ${formatPrice(pnlPoints)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
               centerBg = positionHit.profit ? profitLine : lossLine;
             } else {
-              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              const line1 = hasMoney ? `Entry: ${formatPrice(entry.price)}, Qty: ${qtyText}` : `Entry: ${formatPrice(entry.price)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
               centerBg = hexToRgba(drawing.color, 0.92);
             }
-            drawPositionPill(centerText, cx, entryY, centerBg);
+            drawPositionPill(centerLines, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }
           }
         }
+      } else if (drawing.type === "price-range") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1) {
+          const px0 = xFromDrawingPoint(p0);
+          const px1 = xFromDrawingPoint(p1);
+          const leftX = Math.min(px0, px1);
+          const rightX = Math.max(px0, px1);
+          const boxW = Math.max(1, rightX - leftX);
+          const y0 = yFromPrice(p0.price);
+          const y1 = yFromPrice(p1.price);
+          const topY = Math.min(y0, y1);
+          const botY = Math.max(y0, y1);
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+          ctx.fillRect(leftX, topY, boxW, Math.max(0, botY - topY));
+          ctx.setLineDash([]);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = drawing.color;
+          ctx.beginPath();
+          ctx.moveTo(crisp(leftX), crisp(topY));
+          ctx.lineTo(crisp(rightX), crisp(topY));
+          ctx.moveTo(crisp(leftX), crisp(botY));
+          ctx.lineTo(crisp(rightX), crisp(botY));
+          ctx.stroke();
+          const midX = (leftX + rightX) / 2;
+          const down = p1.price <= p0.price;
+          const arrowToY = down ? botY : topY;
+          ctx.beginPath();
+          ctx.moveTo(crisp(midX), crisp(down ? topY : botY));
+          ctx.lineTo(crisp(midX), crisp(arrowToY));
+          ctx.stroke();
+          const head = 6;
+          ctx.beginPath();
+          ctx.moveTo(midX, arrowToY);
+          ctx.lineTo(midX - head, arrowToY + (down ? -head : head));
+          ctx.moveTo(midX, arrowToY);
+          ctx.lineTo(midX + head, arrowToY + (down ? -head : head));
+          ctx.stroke();
+          ctx.restore();
+          handleAt(px0, y0, drawing.color);
+          handleAt(px1, y1, drawing.color);
+          const tick = getConfiguredTickSize();
+          const diff = p1.price - p0.price;
+          const base = Math.abs(p0.price) > 0 ? Math.abs(p0.price) : 1;
+          const pct = diff / base * 100;
+          const ticks = tick > 0 ? Math.round(diff / tick) : 0;
+          const signed = (value, text) => `${value < 0 ? "\u2212" : value > 0 ? "+" : ""}${text}`;
+          const labelText = tick > 0 ? `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)}) ${signed(ticks, String(Math.abs(ticks)))}` : `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)})`;
+          const prevFont = ctx.font;
+          ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+          const padding = 6;
+          const textW = ctx.measureText(labelText).width;
+          const pillW = textW + padding * 2;
+          const pillH = 18;
+          const pillX = midX - pillW / 2;
+          const pillY = botY + 6;
+          ctx.fillStyle = mergedOptions.backgroundColor;
+          fillRoundedRect(pillX, pillY, pillW, pillH, 4);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+          ctx.lineWidth = 1;
+          ctx.strokeRect(crisp(pillX), crisp(pillY), pillW, pillH);
+          ctx.restore();
+          ctx.fillStyle = drawing.color;
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.fillText(labelText, midX, pillY + pillH / 2);
+          ctx.font = prevFont;
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, midX, topY - 4, drawing.color);
+          }
+        }
       }
       ctx.restore();
     };
@@ -3791,6 +3870,19 @@ function createChart(element, options = {}) {
         if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "price-range") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3991,6 +4083,25 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "price-range") {
+      const tick = getConfiguredTickSize();
+      const visibleRange = drawState.yMax - drawState.yMin;
+      const priceOffset = visibleRange > 0 ? visibleRange * 0.18 : tick > 0 ? tick * 80 : Math.abs(point.price) * 0.03 || 1;
+      const width2 = Math.max(8, Math.round(xSpan * 0.2));
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      drawings.push(
+        normalizeDrawingState({
+          type: activeDrawingTool,
+          points: [point, normalizeDrawingPoint(point.index + width2, point.price - priceOffset)],
+          color: defaults.color ?? "#2962ff",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
       const isLong = activeDrawingTool === "long-position";
       const tick = getConfiguredTickSize();

package/dist/index.d.cts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/index.d.ts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/index.js

@@ -2477,11 +2477,12 @@ function createChart(element, options = {}) {
             handleAt(leftX, stopY, drawing.color);
             handleAt(rightX, entryY, drawing.color);
             const tick = getConfiguredTickSize();
-            const pctOf = (price) => {
+            const pctOfDist = (dist) => {
               if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
-              return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+              const pct = dist / Math.abs(entry.price) * 100;
+              return `${pct < 1 ? pct.toFixed(3) : pct.toFixed(2)}%`;
             };
-            const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+            const ticksOfDist = (dist) => tick > 0 ? ` ${Math.round(dist / tick)}` : "";
             const targetDist = Math.abs(target.price - entry.price);
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
@@ -2491,16 +2492,18 @@ function createChart(element, options = {}) {
             const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
             const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
             const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
-            const formatAmount = (value) => Math.abs(value) >= 1e3 ? value.toFixed(0) : value.toFixed(2);
-            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * targetDist * effectivePointValue)}` : "";
-            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stopDist * effectivePointValue)}` : "";
+            const formatAmount = (value) => value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
+              const lines = Array.isArray(text) ? text : [text];
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
               const padding = 6;
-              const textW = ctx.measureText(text).width;
+              const lineH = 14;
+              const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
               const pillW = textW + padding * 2;
-              const pillH = 18;
+              const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
               const pillX = centerX - pillW / 2;
               const pillY = centerY - pillH / 2;
               ctx.fillStyle = bg;
@@ -2508,28 +2511,104 @@ function createChart(element, options = {}) {
               ctx.fillStyle = labelTextColor;
               ctx.textAlign = "center";
               ctx.textBaseline = "middle";
-              ctx.fillText(text, centerX, pillY + pillH / 2);
+              const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
+              lines.forEach((line, lineIndex) => ctx.fillText(line, centerX, startY + lineIndex * lineH));
               ctx.font = prevFont;
             };
-            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}${targetAmountText}`, cx, targetY, profitLine);
-            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}${stopAmountText}`, cx, stopY, lossLine);
-            let centerText;
+            drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, cx, stopY, lossLine);
+            let centerLines;
             let centerBg;
             if (positionHit) {
-              const pnl = positionHit.profit ? qtyRaw * targetDist * effectivePointValue : -(qtyRaw * stopDist * effectivePointValue);
-              const pnlText = hasMoney ? `Closed P&L: ${formatAmount(pnl)}` : `Closed ${positionHit.profit ? "+" : "\u2212"}${formatPrice(Math.abs(positionHit.price - entry.price))}`;
-              centerText = hasMoney ? `${pnlText}, Qty: ${qtyText}  RR ${rr.toFixed(2)}` : `${pnlText}  RR ${rr.toFixed(2)}`;
+              const pnlPoints = positionHit.profit ? targetDist : -stopDist;
+              const line1 = hasMoney ? `Closed P&L: ${formatPrice(pnlPoints)}, Qty: ${qtyText}` : `Closed P&L: ${formatPrice(pnlPoints)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
               centerBg = positionHit.profit ? profitLine : lossLine;
             } else {
-              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              const line1 = hasMoney ? `Entry: ${formatPrice(entry.price)}, Qty: ${qtyText}` : `Entry: ${formatPrice(entry.price)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
               centerBg = hexToRgba(drawing.color, 0.92);
             }
-            drawPositionPill(centerText, cx, entryY, centerBg);
+            drawPositionPill(centerLines, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }
           }
         }
+      } else if (drawing.type === "price-range") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1) {
+          const px0 = xFromDrawingPoint(p0);
+          const px1 = xFromDrawingPoint(p1);
+          const leftX = Math.min(px0, px1);
+          const rightX = Math.max(px0, px1);
+          const boxW = Math.max(1, rightX - leftX);
+          const y0 = yFromPrice(p0.price);
+          const y1 = yFromPrice(p1.price);
+          const topY = Math.min(y0, y1);
+          const botY = Math.max(y0, y1);
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+          ctx.fillRect(leftX, topY, boxW, Math.max(0, botY - topY));
+          ctx.setLineDash([]);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = drawing.color;
+          ctx.beginPath();
+          ctx.moveTo(crisp(leftX), crisp(topY));
+          ctx.lineTo(crisp(rightX), crisp(topY));
+          ctx.moveTo(crisp(leftX), crisp(botY));
+          ctx.lineTo(crisp(rightX), crisp(botY));
+          ctx.stroke();
+          const midX = (leftX + rightX) / 2;
+          const down = p1.price <= p0.price;
+          const arrowToY = down ? botY : topY;
+          ctx.beginPath();
+          ctx.moveTo(crisp(midX), crisp(down ? topY : botY));
+          ctx.lineTo(crisp(midX), crisp(arrowToY));
+          ctx.stroke();
+          const head = 6;
+          ctx.beginPath();
+          ctx.moveTo(midX, arrowToY);
+          ctx.lineTo(midX - head, arrowToY + (down ? -head : head));
+          ctx.moveTo(midX, arrowToY);
+          ctx.lineTo(midX + head, arrowToY + (down ? -head : head));
+          ctx.stroke();
+          ctx.restore();
+          handleAt(px0, y0, drawing.color);
+          handleAt(px1, y1, drawing.color);
+          const tick = getConfiguredTickSize();
+          const diff = p1.price - p0.price;
+          const base = Math.abs(p0.price) > 0 ? Math.abs(p0.price) : 1;
+          const pct = diff / base * 100;
+          const ticks = tick > 0 ? Math.round(diff / tick) : 0;
+          const signed = (value, text) => `${value < 0 ? "\u2212" : value > 0 ? "+" : ""}${text}`;
+          const labelText = tick > 0 ? `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)}) ${signed(ticks, String(Math.abs(ticks)))}` : `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)})`;
+          const prevFont = ctx.font;
+          ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+          const padding = 6;
+          const textW = ctx.measureText(labelText).width;
+          const pillW = textW + padding * 2;
+          const pillH = 18;
+          const pillX = midX - pillW / 2;
+          const pillY = botY + 6;
+          ctx.fillStyle = mergedOptions.backgroundColor;
+          fillRoundedRect(pillX, pillY, pillW, pillH, 4);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+          ctx.lineWidth = 1;
+          ctx.strokeRect(crisp(pillX), crisp(pillY), pillW, pillH);
+          ctx.restore();
+          ctx.fillStyle = drawing.color;
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.fillText(labelText, midX, pillY + pillH / 2);
+          ctx.font = prevFont;
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, midX, topY - 4, drawing.color);
+          }
+        }
       }
       ctx.restore();
     };
@@ -3765,6 +3844,19 @@ function createChart(element, options = {}) {
         if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "price-range") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3965,6 +4057,25 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "price-range") {
+      const tick = getConfiguredTickSize();
+      const visibleRange = drawState.yMax - drawState.yMin;
+      const priceOffset = visibleRange > 0 ? visibleRange * 0.18 : tick > 0 ? tick * 80 : Math.abs(point.price) * 0.03 || 1;
+      const width2 = Math.max(8, Math.round(xSpan * 0.2));
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      drawings.push(
+        normalizeDrawingState({
+          type: activeDrawingTool,
+          points: [point, normalizeDrawingPoint(point.index + width2, point.price - priceOffset)],
+          color: defaults.color ?? "#2962ff",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
       const isLong = activeDrawingTool === "long-position";
       const tick = getConfiguredTickSize();

package/docs/API.md

@@ -422,7 +422,7 @@ Drawings are user-created chart tools, separate from indicators. They are intera
   - `ray`: two-point line that extends infinitely past the second point
   - `fib-retracement`: two-point retracement with levels/bands
   - `fib-extension`: trend-based three-point extension (click trend start, trend end, then the projection origin); levels project from the third point by the first→second move
-  - `long-position` / `short-position`: risk/reward forecasting box (single click drops a default box). Points are `[entry, target, stop, rightEdge]`; anchors are target/entry/stop on the left and a time-width handle on the right. Labels show price, % move, ticks, and risk/reward ratio. `color` sets the entry line; `colors` is `[profitColor, lossColor, labelTextColor]` (defaults `POSITION_DEFAULT_COLORS`). Sizing inputs `accountSize`, `lotSize`, `risk`, `riskMode` (`"percent"|"amount"`), `leverage`, `pointValue`, `qtyPrecision` drive the Qty/Amount labels — set `pointValue` (contract $/point) from your app for real money values. The box also runs a trade simulation across the bars it covers: it shades the traversed region and draws a diagonal to the first bar that touches the target or stop, and the center label switches to "Closed P&L" (green if the target was hit first, red if the stop was hit first).
+  - `long-position` / `short-position`: risk/reward forecasting box (single click drops a default box). Points are `[entry, target, stop, rightEdge]`; anchors are target/entry/stop on the left and a time-width handle on the right. Labels show price, % move, ticks, and risk/reward ratio. `color` sets the entry line; `colors` is `[profitColor, lossColor, labelTextColor]` (defaults `POSITION_DEFAULT_COLORS`). Sizing inputs `accountSize`, `lotSize`, `risk`, `riskMode` (`"percent"|"amount"`), `leverage`, `pointValue`, `qtyPrecision` drive the Qty/Amount labels — set `pointValue` (contract $/point) from your app for real money values. A `price-range` tool (single click drops a default box; two diagonal anchors) measures a region and labels the signed price change, % move and ticks with a vertical arrow. The box also runs a trade simulation across the bars it covers: it shades the traversed region and draws a diagonal to the first bar that touches the target or stop, and the center label switches to "Closed P&L" (green if the target was hit first, red if the stop was hit first).
 - `points: DrawingPoint[]`
 - `visible?: boolean`
 - `color?: string`

package/package.json

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