hyperprop-charting-library 0.1.83 → 0.1.84

package/dist/hyperprop-charting-library.cjs

@@ -2561,6 +2561,80 @@ function createChart(element, options = {}) {
             }
           }
         }
+      } 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();
     };
@@ -3796,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;
@@ -3996,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

@@ -2535,6 +2535,80 @@ function createChart(element, options = {}) {
             }
           }
         }
+      } 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();
     };
@@ -3770,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;
@@ -3970,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

@@ -2561,6 +2561,80 @@ function createChart(element, options = {}) {
             }
           }
         }
+      } 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();
     };
@@ -3796,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;
@@ -3996,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

@@ -2535,6 +2535,80 @@ function createChart(element, options = {}) {
             }
           }
         }
+      } 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();
     };
@@ -3770,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;
@@ -3970,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.83",
+  "version": "0.1.84",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",