hyperprop-charting-library 0.1.67 → 0.1.69

package/dist/hyperprop-charting-library.cjs

@@ -43,6 +43,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   color: "#94a3b8",
   width: 1,
   style: "dotted",
+  mode: "cross",
+  dotRadius: 3,
   showHorizontal: true,
   showVertical: true,
   showPriceLabel: true,
@@ -2168,6 +2170,20 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, midX, y, drawing.color);
           }
         }
+      } else if (drawing.type === "vertical-line") {
+        const point = drawing.points[0];
+        if (point) {
+          const x = xFromDrawingPoint(point);
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(chartTop));
+          ctx.lineTo(crisp(x), crisp(chartBottom));
+          ctx.stroke();
+          const handleY = (chartTop + chartBottom) / 2;
+          drawDrawingHandle(x, handleY, drawing.color);
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, x, chartTop + 16, drawing.color);
+          }
+        }
       } else if (drawing.type === "trendline") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -2188,6 +2204,36 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, midX, midY, drawing.color);
           }
         }
+      } else if (drawing.type === "ray") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (first && second) {
+          const firstX = xFromDrawingPoint(first);
+          const firstY = yFromPrice(first.price);
+          const secondX = xFromDrawingPoint(second);
+          const secondY = yFromPrice(second.price);
+          const dx = secondX - firstX;
+          const dy = secondY - firstY;
+          let endX = secondX;
+          let endY = secondY;
+          const len = Math.hypot(dx, dy);
+          if (len > 0) {
+            const far = Math.abs(chartRight - chartLeft) + Math.abs(chartBottom - chartTop) + 2e3;
+            endX = firstX + dx / len * far;
+            endY = firstY + dy / len * far;
+          }
+          ctx.beginPath();
+          ctx.moveTo(firstX, firstY);
+          ctx.lineTo(endX, endY);
+          ctx.stroke();
+          drawDrawingHandle(firstX, firstY, drawing.color);
+          drawDrawingHandle(secondX, secondY, drawing.color);
+          if (drawing.label) {
+            const midX = (firstX + secondX) / 2;
+            const midY = (firstY + secondY) / 2;
+            drawDrawingLabel(drawing.label, midX, midY, drawing.color);
+          }
+        }
       } else if (drawing.type === "fib-retracement") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -2435,23 +2481,32 @@ function createChart(element, options = {}) {
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
-      ctx.save();
-      ctx.strokeStyle = crosshair.color;
-      ctx.lineWidth = Math.max(1, crosshair.width);
-      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
-      if (crosshair.showVertical) {
-        ctx.beginPath();
-        ctx.moveTo(crisp(cx), crisp(chartTop));
-        ctx.lineTo(crisp(cx), crisp(chartBottom));
-        ctx.stroke();
-      }
-      if (crosshair.showHorizontal) {
+      if (crosshair.mode === "dot") {
+        ctx.save();
+        ctx.fillStyle = crosshair.color;
         ctx.beginPath();
-        ctx.moveTo(crisp(chartLeft), crisp(cy));
-        ctx.lineTo(crisp(chartRight), crisp(cy));
-        ctx.stroke();
+        ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      } else {
+        ctx.save();
+        ctx.strokeStyle = crosshair.color;
+        ctx.lineWidth = Math.max(1, crosshair.width);
+        applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+        if (crosshair.showVertical) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(cx), crisp(chartTop));
+          ctx.lineTo(crisp(cx), crisp(chartBottom));
+          ctx.stroke();
+        }
+        if (crosshair.showHorizontal) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(chartLeft), crisp(cy));
+          ctx.lineTo(crisp(chartRight), crisp(cy));
+          ctx.stroke();
+        }
+        ctx.restore();
       }
-      ctx.restore();
     }
     ctx.restore();
     if (activeSeparateIndicators.length > 0) {
@@ -3330,6 +3385,17 @@ function createChart(element, options = {}) {
         if (Math.abs(y - lineY) <= 7) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "vertical-line") {
+        const point = drawing.points[0];
+        if (!point) continue;
+        const lineX = canvasXFromDrawingPoint(point);
+        const handleY = drawState ? (drawState.chartTop + drawState.chartBottom) / 2 : 0;
+        if (Math.hypot(x - lineX, y - handleY) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.abs(x - lineX) <= 7) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "trendline") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -3347,6 +3413,31 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "ray") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (!first || !second) continue;
+        const x1 = canvasXFromDrawingPoint(first);
+        const y1 = canvasYFromDrawingPrice(first.price);
+        const x2 = canvasXFromDrawingPoint(second);
+        const y2 = canvasYFromDrawingPrice(second.price);
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const lengthSq = dx * dx + dy * dy;
+        if (lengthSq > 0) {
+          const t = Math.max(0, ((x - x1) * dx + (y - y1) * dy) / lengthSq);
+          const projX = x1 + t * dx;
+          const projY = y1 + t * dy;
+          if (Math.hypot(x - projX, y - projY) <= 6) {
+            return { drawing, target: "line" };
+          }
+        }
       } else if (drawing.type === "fib-retracement") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -3448,6 +3539,21 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "vertical-line") {
+      const defaults = getDrawingToolDefaults("vertical-line");
+      drawings.push(
+        normalizeDrawingState({
+          type: "vertical-line",
+          points: [point],
+          color: defaults.color ?? "#38bdf8",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     if (activeDrawingTool === "trendline") {
       if (draftDrawing?.type === "trendline") {
         const completed = normalizeDrawingState({
@@ -3472,6 +3578,30 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "ray") {
+      if (draftDrawing?.type === "ray") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("ray");
+      draftDrawing = normalizeDrawingState({
+        type: "ray",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 2
+      });
+      draw();
+      return true;
+    }
     if (activeDrawingTool === "fib-retracement") {
       if (draftDrawing?.type === "fib-retracement") {
         const completed = normalizeDrawingState({
@@ -3768,7 +3898,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {

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

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "trendline" | "fib-retracement";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -188,6 +188,8 @@ interface CrosshairOptions {
     color?: string;
     width?: number;
     style?: "solid" | "dotted" | "dashed";
+    mode?: "cross" | "dot";
+    dotRadius?: number;
     showHorizontal?: boolean;
     showVertical?: boolean;
     showPriceLabel?: boolean;

package/dist/hyperprop-charting-library.js

@@ -19,6 +19,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   color: "#94a3b8",
   width: 1,
   style: "dotted",
+  mode: "cross",
+  dotRadius: 3,
   showHorizontal: true,
   showVertical: true,
   showPriceLabel: true,
@@ -2144,6 +2146,20 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, midX, y, drawing.color);
           }
         }
+      } else if (drawing.type === "vertical-line") {
+        const point = drawing.points[0];
+        if (point) {
+          const x = xFromDrawingPoint(point);
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(chartTop));
+          ctx.lineTo(crisp(x), crisp(chartBottom));
+          ctx.stroke();
+          const handleY = (chartTop + chartBottom) / 2;
+          drawDrawingHandle(x, handleY, drawing.color);
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, x, chartTop + 16, drawing.color);
+          }
+        }
       } else if (drawing.type === "trendline") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -2164,6 +2180,36 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, midX, midY, drawing.color);
           }
         }
+      } else if (drawing.type === "ray") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (first && second) {
+          const firstX = xFromDrawingPoint(first);
+          const firstY = yFromPrice(first.price);
+          const secondX = xFromDrawingPoint(second);
+          const secondY = yFromPrice(second.price);
+          const dx = secondX - firstX;
+          const dy = secondY - firstY;
+          let endX = secondX;
+          let endY = secondY;
+          const len = Math.hypot(dx, dy);
+          if (len > 0) {
+            const far = Math.abs(chartRight - chartLeft) + Math.abs(chartBottom - chartTop) + 2e3;
+            endX = firstX + dx / len * far;
+            endY = firstY + dy / len * far;
+          }
+          ctx.beginPath();
+          ctx.moveTo(firstX, firstY);
+          ctx.lineTo(endX, endY);
+          ctx.stroke();
+          drawDrawingHandle(firstX, firstY, drawing.color);
+          drawDrawingHandle(secondX, secondY, drawing.color);
+          if (drawing.label) {
+            const midX = (firstX + secondX) / 2;
+            const midY = (firstY + secondY) / 2;
+            drawDrawingLabel(drawing.label, midX, midY, drawing.color);
+          }
+        }
       } else if (drawing.type === "fib-retracement") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -2411,23 +2457,32 @@ function createChart(element, options = {}) {
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
-      ctx.save();
-      ctx.strokeStyle = crosshair.color;
-      ctx.lineWidth = Math.max(1, crosshair.width);
-      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
-      if (crosshair.showVertical) {
-        ctx.beginPath();
-        ctx.moveTo(crisp(cx), crisp(chartTop));
-        ctx.lineTo(crisp(cx), crisp(chartBottom));
-        ctx.stroke();
-      }
-      if (crosshair.showHorizontal) {
+      if (crosshair.mode === "dot") {
+        ctx.save();
+        ctx.fillStyle = crosshair.color;
         ctx.beginPath();
-        ctx.moveTo(crisp(chartLeft), crisp(cy));
-        ctx.lineTo(crisp(chartRight), crisp(cy));
-        ctx.stroke();
+        ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      } else {
+        ctx.save();
+        ctx.strokeStyle = crosshair.color;
+        ctx.lineWidth = Math.max(1, crosshair.width);
+        applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+        if (crosshair.showVertical) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(cx), crisp(chartTop));
+          ctx.lineTo(crisp(cx), crisp(chartBottom));
+          ctx.stroke();
+        }
+        if (crosshair.showHorizontal) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(chartLeft), crisp(cy));
+          ctx.lineTo(crisp(chartRight), crisp(cy));
+          ctx.stroke();
+        }
+        ctx.restore();
       }
-      ctx.restore();
     }
     ctx.restore();
     if (activeSeparateIndicators.length > 0) {
@@ -3306,6 +3361,17 @@ function createChart(element, options = {}) {
         if (Math.abs(y - lineY) <= 7) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "vertical-line") {
+        const point = drawing.points[0];
+        if (!point) continue;
+        const lineX = canvasXFromDrawingPoint(point);
+        const handleY = drawState ? (drawState.chartTop + drawState.chartBottom) / 2 : 0;
+        if (Math.hypot(x - lineX, y - handleY) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.abs(x - lineX) <= 7) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "trendline") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -3323,6 +3389,31 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "ray") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (!first || !second) continue;
+        const x1 = canvasXFromDrawingPoint(first);
+        const y1 = canvasYFromDrawingPrice(first.price);
+        const x2 = canvasXFromDrawingPoint(second);
+        const y2 = canvasYFromDrawingPrice(second.price);
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const lengthSq = dx * dx + dy * dy;
+        if (lengthSq > 0) {
+          const t = Math.max(0, ((x - x1) * dx + (y - y1) * dy) / lengthSq);
+          const projX = x1 + t * dx;
+          const projY = y1 + t * dy;
+          if (Math.hypot(x - projX, y - projY) <= 6) {
+            return { drawing, target: "line" };
+          }
+        }
       } else if (drawing.type === "fib-retracement") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -3424,6 +3515,21 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "vertical-line") {
+      const defaults = getDrawingToolDefaults("vertical-line");
+      drawings.push(
+        normalizeDrawingState({
+          type: "vertical-line",
+          points: [point],
+          color: defaults.color ?? "#38bdf8",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     if (activeDrawingTool === "trendline") {
       if (draftDrawing?.type === "trendline") {
         const completed = normalizeDrawingState({
@@ -3448,6 +3554,30 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "ray") {
+      if (draftDrawing?.type === "ray") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("ray");
+      draftDrawing = normalizeDrawingState({
+        type: "ray",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 2
+      });
+      draw();
+      return true;
+    }
     if (activeDrawingTool === "fib-retracement") {
       if (draftDrawing?.type === "fib-retracement") {
         const completed = normalizeDrawingState({
@@ -3744,7 +3874,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {

package/dist/index.cjs

@@ -43,6 +43,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   color: "#94a3b8",
   width: 1,
   style: "dotted",
+  mode: "cross",
+  dotRadius: 3,
   showHorizontal: true,
   showVertical: true,
   showPriceLabel: true,
@@ -2168,6 +2170,20 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, midX, y, drawing.color);
           }
         }
+      } else if (drawing.type === "vertical-line") {
+        const point = drawing.points[0];
+        if (point) {
+          const x = xFromDrawingPoint(point);
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(chartTop));
+          ctx.lineTo(crisp(x), crisp(chartBottom));
+          ctx.stroke();
+          const handleY = (chartTop + chartBottom) / 2;
+          drawDrawingHandle(x, handleY, drawing.color);
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, x, chartTop + 16, drawing.color);
+          }
+        }
       } else if (drawing.type === "trendline") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -2188,6 +2204,36 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, midX, midY, drawing.color);
           }
         }
+      } else if (drawing.type === "ray") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (first && second) {
+          const firstX = xFromDrawingPoint(first);
+          const firstY = yFromPrice(first.price);
+          const secondX = xFromDrawingPoint(second);
+          const secondY = yFromPrice(second.price);
+          const dx = secondX - firstX;
+          const dy = secondY - firstY;
+          let endX = secondX;
+          let endY = secondY;
+          const len = Math.hypot(dx, dy);
+          if (len > 0) {
+            const far = Math.abs(chartRight - chartLeft) + Math.abs(chartBottom - chartTop) + 2e3;
+            endX = firstX + dx / len * far;
+            endY = firstY + dy / len * far;
+          }
+          ctx.beginPath();
+          ctx.moveTo(firstX, firstY);
+          ctx.lineTo(endX, endY);
+          ctx.stroke();
+          drawDrawingHandle(firstX, firstY, drawing.color);
+          drawDrawingHandle(secondX, secondY, drawing.color);
+          if (drawing.label) {
+            const midX = (firstX + secondX) / 2;
+            const midY = (firstY + secondY) / 2;
+            drawDrawingLabel(drawing.label, midX, midY, drawing.color);
+          }
+        }
       } else if (drawing.type === "fib-retracement") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -2435,23 +2481,32 @@ function createChart(element, options = {}) {
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
-      ctx.save();
-      ctx.strokeStyle = crosshair.color;
-      ctx.lineWidth = Math.max(1, crosshair.width);
-      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
-      if (crosshair.showVertical) {
-        ctx.beginPath();
-        ctx.moveTo(crisp(cx), crisp(chartTop));
-        ctx.lineTo(crisp(cx), crisp(chartBottom));
-        ctx.stroke();
-      }
-      if (crosshair.showHorizontal) {
+      if (crosshair.mode === "dot") {
+        ctx.save();
+        ctx.fillStyle = crosshair.color;
         ctx.beginPath();
-        ctx.moveTo(crisp(chartLeft), crisp(cy));
-        ctx.lineTo(crisp(chartRight), crisp(cy));
-        ctx.stroke();
+        ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      } else {
+        ctx.save();
+        ctx.strokeStyle = crosshair.color;
+        ctx.lineWidth = Math.max(1, crosshair.width);
+        applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+        if (crosshair.showVertical) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(cx), crisp(chartTop));
+          ctx.lineTo(crisp(cx), crisp(chartBottom));
+          ctx.stroke();
+        }
+        if (crosshair.showHorizontal) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(chartLeft), crisp(cy));
+          ctx.lineTo(crisp(chartRight), crisp(cy));
+          ctx.stroke();
+        }
+        ctx.restore();
       }
-      ctx.restore();
     }
     ctx.restore();
     if (activeSeparateIndicators.length > 0) {
@@ -3330,6 +3385,17 @@ function createChart(element, options = {}) {
         if (Math.abs(y - lineY) <= 7) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "vertical-line") {
+        const point = drawing.points[0];
+        if (!point) continue;
+        const lineX = canvasXFromDrawingPoint(point);
+        const handleY = drawState ? (drawState.chartTop + drawState.chartBottom) / 2 : 0;
+        if (Math.hypot(x - lineX, y - handleY) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.abs(x - lineX) <= 7) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "trendline") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -3347,6 +3413,31 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "ray") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (!first || !second) continue;
+        const x1 = canvasXFromDrawingPoint(first);
+        const y1 = canvasYFromDrawingPrice(first.price);
+        const x2 = canvasXFromDrawingPoint(second);
+        const y2 = canvasYFromDrawingPrice(second.price);
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const lengthSq = dx * dx + dy * dy;
+        if (lengthSq > 0) {
+          const t = Math.max(0, ((x - x1) * dx + (y - y1) * dy) / lengthSq);
+          const projX = x1 + t * dx;
+          const projY = y1 + t * dy;
+          if (Math.hypot(x - projX, y - projY) <= 6) {
+            return { drawing, target: "line" };
+          }
+        }
       } else if (drawing.type === "fib-retracement") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -3448,6 +3539,21 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "vertical-line") {
+      const defaults = getDrawingToolDefaults("vertical-line");
+      drawings.push(
+        normalizeDrawingState({
+          type: "vertical-line",
+          points: [point],
+          color: defaults.color ?? "#38bdf8",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     if (activeDrawingTool === "trendline") {
       if (draftDrawing?.type === "trendline") {
         const completed = normalizeDrawingState({
@@ -3472,6 +3578,30 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "ray") {
+      if (draftDrawing?.type === "ray") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("ray");
+      draftDrawing = normalizeDrawingState({
+        type: "ray",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 2
+      });
+      draw();
+      return true;
+    }
     if (activeDrawingTool === "fib-retracement") {
       if (draftDrawing?.type === "fib-retracement") {
         const completed = normalizeDrawingState({
@@ -3768,7 +3898,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {

package/dist/index.d.cts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "trendline" | "fib-retracement";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -188,6 +188,8 @@ interface CrosshairOptions {
     color?: string;
     width?: number;
     style?: "solid" | "dotted" | "dashed";
+    mode?: "cross" | "dot";
+    dotRadius?: number;
     showHorizontal?: boolean;
     showVertical?: boolean;
     showPriceLabel?: boolean;

package/dist/index.d.ts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "trendline" | "fib-retracement";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -188,6 +188,8 @@ interface CrosshairOptions {
     color?: string;
     width?: number;
     style?: "solid" | "dotted" | "dashed";
+    mode?: "cross" | "dot";
+    dotRadius?: number;
     showHorizontal?: boolean;
     showVertical?: boolean;
     showPriceLabel?: boolean;

package/dist/index.js

@@ -19,6 +19,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   color: "#94a3b8",
   width: 1,
   style: "dotted",
+  mode: "cross",
+  dotRadius: 3,
   showHorizontal: true,
   showVertical: true,
   showPriceLabel: true,
@@ -2144,6 +2146,20 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, midX, y, drawing.color);
           }
         }
+      } else if (drawing.type === "vertical-line") {
+        const point = drawing.points[0];
+        if (point) {
+          const x = xFromDrawingPoint(point);
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(chartTop));
+          ctx.lineTo(crisp(x), crisp(chartBottom));
+          ctx.stroke();
+          const handleY = (chartTop + chartBottom) / 2;
+          drawDrawingHandle(x, handleY, drawing.color);
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, x, chartTop + 16, drawing.color);
+          }
+        }
       } else if (drawing.type === "trendline") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -2164,6 +2180,36 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, midX, midY, drawing.color);
           }
         }
+      } else if (drawing.type === "ray") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (first && second) {
+          const firstX = xFromDrawingPoint(first);
+          const firstY = yFromPrice(first.price);
+          const secondX = xFromDrawingPoint(second);
+          const secondY = yFromPrice(second.price);
+          const dx = secondX - firstX;
+          const dy = secondY - firstY;
+          let endX = secondX;
+          let endY = secondY;
+          const len = Math.hypot(dx, dy);
+          if (len > 0) {
+            const far = Math.abs(chartRight - chartLeft) + Math.abs(chartBottom - chartTop) + 2e3;
+            endX = firstX + dx / len * far;
+            endY = firstY + dy / len * far;
+          }
+          ctx.beginPath();
+          ctx.moveTo(firstX, firstY);
+          ctx.lineTo(endX, endY);
+          ctx.stroke();
+          drawDrawingHandle(firstX, firstY, drawing.color);
+          drawDrawingHandle(secondX, secondY, drawing.color);
+          if (drawing.label) {
+            const midX = (firstX + secondX) / 2;
+            const midY = (firstY + secondY) / 2;
+            drawDrawingLabel(drawing.label, midX, midY, drawing.color);
+          }
+        }
       } else if (drawing.type === "fib-retracement") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -2411,23 +2457,32 @@ function createChart(element, options = {}) {
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
-      ctx.save();
-      ctx.strokeStyle = crosshair.color;
-      ctx.lineWidth = Math.max(1, crosshair.width);
-      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
-      if (crosshair.showVertical) {
-        ctx.beginPath();
-        ctx.moveTo(crisp(cx), crisp(chartTop));
-        ctx.lineTo(crisp(cx), crisp(chartBottom));
-        ctx.stroke();
-      }
-      if (crosshair.showHorizontal) {
+      if (crosshair.mode === "dot") {
+        ctx.save();
+        ctx.fillStyle = crosshair.color;
         ctx.beginPath();
-        ctx.moveTo(crisp(chartLeft), crisp(cy));
-        ctx.lineTo(crisp(chartRight), crisp(cy));
-        ctx.stroke();
+        ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      } else {
+        ctx.save();
+        ctx.strokeStyle = crosshair.color;
+        ctx.lineWidth = Math.max(1, crosshair.width);
+        applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+        if (crosshair.showVertical) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(cx), crisp(chartTop));
+          ctx.lineTo(crisp(cx), crisp(chartBottom));
+          ctx.stroke();
+        }
+        if (crosshair.showHorizontal) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(chartLeft), crisp(cy));
+          ctx.lineTo(crisp(chartRight), crisp(cy));
+          ctx.stroke();
+        }
+        ctx.restore();
       }
-      ctx.restore();
     }
     ctx.restore();
     if (activeSeparateIndicators.length > 0) {
@@ -3306,6 +3361,17 @@ function createChart(element, options = {}) {
         if (Math.abs(y - lineY) <= 7) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "vertical-line") {
+        const point = drawing.points[0];
+        if (!point) continue;
+        const lineX = canvasXFromDrawingPoint(point);
+        const handleY = drawState ? (drawState.chartTop + drawState.chartBottom) / 2 : 0;
+        if (Math.hypot(x - lineX, y - handleY) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.abs(x - lineX) <= 7) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "trendline") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -3323,6 +3389,31 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "ray") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (!first || !second) continue;
+        const x1 = canvasXFromDrawingPoint(first);
+        const y1 = canvasYFromDrawingPrice(first.price);
+        const x2 = canvasXFromDrawingPoint(second);
+        const y2 = canvasYFromDrawingPrice(second.price);
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const lengthSq = dx * dx + dy * dy;
+        if (lengthSq > 0) {
+          const t = Math.max(0, ((x - x1) * dx + (y - y1) * dy) / lengthSq);
+          const projX = x1 + t * dx;
+          const projY = y1 + t * dy;
+          if (Math.hypot(x - projX, y - projY) <= 6) {
+            return { drawing, target: "line" };
+          }
+        }
       } else if (drawing.type === "fib-retracement") {
         const first = drawing.points[0];
         const second = drawing.points[1];
@@ -3424,6 +3515,21 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "vertical-line") {
+      const defaults = getDrawingToolDefaults("vertical-line");
+      drawings.push(
+        normalizeDrawingState({
+          type: "vertical-line",
+          points: [point],
+          color: defaults.color ?? "#38bdf8",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     if (activeDrawingTool === "trendline") {
       if (draftDrawing?.type === "trendline") {
         const completed = normalizeDrawingState({
@@ -3448,6 +3554,30 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "ray") {
+      if (draftDrawing?.type === "ray") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("ray");
+      draftDrawing = normalizeDrawingState({
+        type: "ray",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 2
+      });
+      draw();
+      return true;
+    }
     if (activeDrawingTool === "fib-retracement") {
       if (draftDrawing?.type === "fib-retracement") {
         const completed = normalizeDrawingState({
@@ -3744,7 +3874,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {

package/docs/API.md

@@ -94,6 +94,8 @@ Top-level options:
 - `color` (default `#94a3b8`)
 - `width` (default `1`)
 - `style` (`"solid" | "dotted" | "dashed"`, default `"dotted"`)
+- `mode` (`"cross" | "dot"`, default `"cross"`; `"dot"` draws a dot at the cursor instead of crosshair lines)
+- `dotRadius` (default `3`; dot radius in px when `mode` is `"dot"`)
 - `showHorizontal` (default `true`)
 - `showVertical` (default `true`)
 - `showPriceLabel` (default `true`)
@@ -414,7 +416,11 @@ Volume style inputs:
 Drawings are user-created chart tools, separate from indicators. They are interactive chart objects like horizontal lines and trendlines.
 
 - `id?: string`
-- `type: "horizontal-line" | "trendline"`
+- `type: "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement"`
+  - `horizontal-line` / `vertical-line`: single-point, full-width/full-height line (one click to place)
+  - `trendline`: two-point segment (click start, click end)
+  - `ray`: two-point line that extends infinitely past the second point
+  - `fib-retracement`: two-point retracement with levels/bands
 - `points: DrawingPoint[]`
 - `visible?: boolean`
 - `color?: string`
@@ -436,7 +442,10 @@ Tool workflow:
 
 ```ts
 chart.setActiveDrawingTool("horizontal-line"); // next plot click creates a line
+chart.setActiveDrawingTool("vertical-line");   // next plot click creates a vertical line
 chart.setActiveDrawingTool("trendline");       // first click starts, second click commits
+chart.setActiveDrawingTool("ray");             // first click starts, second click commits (extends past p2)
+chart.setActiveDrawingTool("fib-retracement"); // first click starts, second click commits
 chart.setActiveDrawingTool(null);              // back to normal cursor/pan
 ```
 
@@ -466,8 +475,8 @@ Use `getDrawings()` / `setDrawings()` for persistence.
 - `panY(priceDelta: number): void` (positive = move viewport up)
 - `fitContent(): void` (x-only fit, keeps y zoom)
 - `resetViewport(): void` (fit x + reset y auto-scale)
-- `setActiveDrawingTool(tool: "horizontal-line" | "trendline" | null): void`
-- `getActiveDrawingTool(): "horizontal-line" | "trendline" | null`
+- `setActiveDrawingTool(tool: DrawingToolType | null): void` (`DrawingToolType` = `"horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement"`)
+- `getActiveDrawingTool(): DrawingToolType | null`
 - `setDrawings(drawings: DrawingObjectOptions[]): void`
 - `getDrawings(): DrawingObjectOptions[]`
 - `addDrawing(drawing: DrawingObjectOptions): string`

package/docs/RECIPES.md

@@ -106,11 +106,14 @@ chart.addPriceLine({
 Drawing tools are separate from indicators. Indicators compute/render data series; drawings are user-created objects that can be persisted.
 
 ```ts
-// Let the next click create a horizontal line.
+// Single-click tools: the next plot click creates the drawing.
 chart.setActiveDrawingTool("horizontal-line");
+chart.setActiveDrawingTool("vertical-line");
 
-// First click starts a trendline, second click commits it.
+// Two-click tools: first click starts, second click commits.
 chart.setActiveDrawingTool("trendline");
+chart.setActiveDrawingTool("ray");            // extends infinitely past the second point
+chart.setActiveDrawingTool("fib-retracement");
 
 // Back to normal cursor/pan mode.
 chart.setActiveDrawingTool(null);

package/package.json

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