hyperprop-charting-library 0.1.58 → 0.1.60

package/dist/hyperprop-charting-library.cjs

@@ -2021,6 +2021,16 @@ function createChart(element, options = {}) {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
+    const FIB_LEVELS = [
+      { ratio: 0, color: "#787b86" },
+      { ratio: 0.236, color: "#f23645", band: "rgba(242,54,69,0.10)" },
+      { ratio: 0.382, color: "#ff9800", band: "rgba(255,152,0,0.10)" },
+      { ratio: 0.5, color: "#4caf50", band: "rgba(76,175,80,0.10)" },
+      { ratio: 0.618, color: "#089981", band: "rgba(8,153,129,0.10)" },
+      { ratio: 0.786, color: "#00bcd4", band: "rgba(0,188,212,0.10)" },
+      { ratio: 1, color: "#787b86", band: "rgba(120,123,134,0.10)" },
+      { ratio: 1.618, color: "#2962ff", band: "rgba(41,98,255,0.08)" }
+    ];
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2033,27 +2043,24 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     };
-    const drawDrawingLabel = (labelText, anchorX, anchorY, color, angle) => {
+    const drawDrawingLabel = (labelText, anchorX, anchorY, color) => {
       if (!labelText) return;
       ctx.save();
-      ctx.translate(anchorX, anchorY);
-      ctx.rotate(angle);
-      ctx.translate(0, -8);
       const prevFont = ctx.font;
       ctx.font = `500 12px ${mergedOptions.fontFamily}`;
       const textWidth = ctx.measureText(labelText).width;
       const paddingX = 6;
-      const paddingY = 3;
       const bgWidth = textWidth + paddingX * 2;
       const bgHeight = 18;
+      const bgX = anchorX - bgWidth / 2;
+      const bgY = anchorY - bgHeight - 6;
       ctx.fillStyle = `${color}1f`;
-      fillRoundedRect(-bgWidth / 2, -bgHeight, bgWidth, bgHeight, 4);
+      fillRoundedRect(bgX, bgY, bgWidth, bgHeight, 4);
       ctx.fillStyle = color;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
-      ctx.fillText(labelText, 0, -bgHeight / 2);
+      ctx.fillText(labelText, anchorX, bgY + bgHeight / 2);
       ctx.font = prevFont;
-      void paddingY;
       ctx.restore();
     };
     const drawDrawing = (drawing, draft = false) => {
@@ -2076,7 +2083,8 @@ function createChart(element, options = {}) {
           ctx.stroke();
           drawDrawingHandle(handleX, y, drawing.color);
           if (drawing.label) {
-            drawDrawingLabel(drawing.label, chartLeft + 60, y, drawing.color, 0);
+            const midX = (chartLeft + chartRight) / 2;
+            drawDrawingLabel(drawing.label, midX, y, drawing.color);
           }
         }
       } else if (drawing.type === "trendline") {
@@ -2096,9 +2104,74 @@ function createChart(element, options = {}) {
           if (drawing.label) {
             const midX = (firstX + secondX) / 2;
             const midY = (firstY + secondY) / 2;
-            const angle = Math.atan2(secondY - firstY, secondX - firstX);
-            drawDrawingLabel(drawing.label, midX, midY, drawing.color, angle);
+            drawDrawingLabel(drawing.label, midX, midY, drawing.color);
+          }
+        }
+      } else if (drawing.type === "fib-retracement") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (first && second) {
+          const firstX = xFromDrawingPoint(first);
+          const secondX = xFromDrawingPoint(second);
+          const firstY = yFromPrice(first.price);
+          const secondY = yFromPrice(second.price);
+          const lineLeft = chartLeft;
+          const lineRight = chartRight;
+          const levelLines = FIB_LEVELS.map((level) => {
+            const price = first.price + (second.price - first.price) * (1 - level.ratio);
+            return { ...level, price, y: yFromPrice(price) };
+          });
+          for (let index = 0; index < levelLines.length - 1; index += 1) {
+            const top = levelLines[index];
+            const bottom = levelLines[index + 1];
+            const fillColor = bottom.band ?? top.band;
+            if (!fillColor) continue;
+            const bandTop = Math.min(top.y, bottom.y);
+            const bandBottom = Math.max(top.y, bottom.y);
+            ctx.save();
+            ctx.fillStyle = fillColor;
+            ctx.globalAlpha = draft ? 0.5 : 1;
+            ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
+            ctx.restore();
+          }
+          ctx.save();
+          ctx.lineWidth = drawing.width;
+          applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+          for (const level of levelLines) {
+            ctx.strokeStyle = level.color;
+            ctx.beginPath();
+            ctx.moveTo(crisp(lineLeft), crisp(level.y));
+            ctx.lineTo(crisp(lineRight), crisp(level.y));
+            ctx.stroke();
           }
+          ctx.restore();
+          ctx.save();
+          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(firstX, firstY);
+          ctx.lineTo(secondX, secondY);
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(firstX, firstY, drawing.color);
+          drawDrawingHandle(secondX, secondY, drawing.color);
+          const prevFont = ctx.font;
+          ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+          for (const level of levelLines) {
+            const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+            const textWidth = ctx.measureText(labelText).width;
+            const padding = 4;
+            const bgX = lineLeft + 4;
+            const bgY = level.y - 9;
+            ctx.fillStyle = mergedOptions.backgroundColor;
+            fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+            ctx.fillStyle = level.color;
+            ctx.textAlign = "left";
+            ctx.textBaseline = "middle";
+            ctx.fillText(labelText, bgX + padding, bgY + 8);
+          }
+          ctx.font = prevFont;
         }
       }
       ctx.restore();
@@ -3186,6 +3259,28 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "fib-retracement") {
+        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) <= 9) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 9) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+        for (const ratio of fibRatios) {
+          const price = first.price + (second.price - first.price) * (1 - ratio);
+          const lineY = canvasYFromDrawingPrice(price);
+          if (Math.abs(y - lineY) <= 5) {
+            return { drawing, target: "line" };
+          }
+        }
       }
     }
     return null;
@@ -3287,6 +3382,29 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "fib-retracement") {
+      if (draftDrawing?.type === "fib-retracement") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      draftDrawing = normalizeDrawingState({
+        type: "fib-retracement",
+        points: [point, point],
+        color: "#2563eb",
+        style: "solid",
+        width: 1
+      });
+      draw();
+      return true;
+    }
     return false;
   };
   const updateDrawingDrag = (x, y) => {
@@ -3522,7 +3640,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && activeDrawingTool === "trendline") {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "fib-retracement")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {

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

@@ -43,7 +43,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "trendline";
+type DrawingToolType = "horizontal-line" | "trendline" | "fib-retracement";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/hyperprop-charting-library.js

@@ -1997,6 +1997,16 @@ function createChart(element, options = {}) {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
+    const FIB_LEVELS = [
+      { ratio: 0, color: "#787b86" },
+      { ratio: 0.236, color: "#f23645", band: "rgba(242,54,69,0.10)" },
+      { ratio: 0.382, color: "#ff9800", band: "rgba(255,152,0,0.10)" },
+      { ratio: 0.5, color: "#4caf50", band: "rgba(76,175,80,0.10)" },
+      { ratio: 0.618, color: "#089981", band: "rgba(8,153,129,0.10)" },
+      { ratio: 0.786, color: "#00bcd4", band: "rgba(0,188,212,0.10)" },
+      { ratio: 1, color: "#787b86", band: "rgba(120,123,134,0.10)" },
+      { ratio: 1.618, color: "#2962ff", band: "rgba(41,98,255,0.08)" }
+    ];
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2009,27 +2019,24 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     };
-    const drawDrawingLabel = (labelText, anchorX, anchorY, color, angle) => {
+    const drawDrawingLabel = (labelText, anchorX, anchorY, color) => {
       if (!labelText) return;
       ctx.save();
-      ctx.translate(anchorX, anchorY);
-      ctx.rotate(angle);
-      ctx.translate(0, -8);
       const prevFont = ctx.font;
       ctx.font = `500 12px ${mergedOptions.fontFamily}`;
       const textWidth = ctx.measureText(labelText).width;
       const paddingX = 6;
-      const paddingY = 3;
       const bgWidth = textWidth + paddingX * 2;
       const bgHeight = 18;
+      const bgX = anchorX - bgWidth / 2;
+      const bgY = anchorY - bgHeight - 6;
       ctx.fillStyle = `${color}1f`;
-      fillRoundedRect(-bgWidth / 2, -bgHeight, bgWidth, bgHeight, 4);
+      fillRoundedRect(bgX, bgY, bgWidth, bgHeight, 4);
       ctx.fillStyle = color;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
-      ctx.fillText(labelText, 0, -bgHeight / 2);
+      ctx.fillText(labelText, anchorX, bgY + bgHeight / 2);
       ctx.font = prevFont;
-      void paddingY;
       ctx.restore();
     };
     const drawDrawing = (drawing, draft = false) => {
@@ -2052,7 +2059,8 @@ function createChart(element, options = {}) {
           ctx.stroke();
           drawDrawingHandle(handleX, y, drawing.color);
           if (drawing.label) {
-            drawDrawingLabel(drawing.label, chartLeft + 60, y, drawing.color, 0);
+            const midX = (chartLeft + chartRight) / 2;
+            drawDrawingLabel(drawing.label, midX, y, drawing.color);
           }
         }
       } else if (drawing.type === "trendline") {
@@ -2072,9 +2080,74 @@ function createChart(element, options = {}) {
           if (drawing.label) {
             const midX = (firstX + secondX) / 2;
             const midY = (firstY + secondY) / 2;
-            const angle = Math.atan2(secondY - firstY, secondX - firstX);
-            drawDrawingLabel(drawing.label, midX, midY, drawing.color, angle);
+            drawDrawingLabel(drawing.label, midX, midY, drawing.color);
+          }
+        }
+      } else if (drawing.type === "fib-retracement") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (first && second) {
+          const firstX = xFromDrawingPoint(first);
+          const secondX = xFromDrawingPoint(second);
+          const firstY = yFromPrice(first.price);
+          const secondY = yFromPrice(second.price);
+          const lineLeft = chartLeft;
+          const lineRight = chartRight;
+          const levelLines = FIB_LEVELS.map((level) => {
+            const price = first.price + (second.price - first.price) * (1 - level.ratio);
+            return { ...level, price, y: yFromPrice(price) };
+          });
+          for (let index = 0; index < levelLines.length - 1; index += 1) {
+            const top = levelLines[index];
+            const bottom = levelLines[index + 1];
+            const fillColor = bottom.band ?? top.band;
+            if (!fillColor) continue;
+            const bandTop = Math.min(top.y, bottom.y);
+            const bandBottom = Math.max(top.y, bottom.y);
+            ctx.save();
+            ctx.fillStyle = fillColor;
+            ctx.globalAlpha = draft ? 0.5 : 1;
+            ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
+            ctx.restore();
+          }
+          ctx.save();
+          ctx.lineWidth = drawing.width;
+          applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+          for (const level of levelLines) {
+            ctx.strokeStyle = level.color;
+            ctx.beginPath();
+            ctx.moveTo(crisp(lineLeft), crisp(level.y));
+            ctx.lineTo(crisp(lineRight), crisp(level.y));
+            ctx.stroke();
           }
+          ctx.restore();
+          ctx.save();
+          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(firstX, firstY);
+          ctx.lineTo(secondX, secondY);
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(firstX, firstY, drawing.color);
+          drawDrawingHandle(secondX, secondY, drawing.color);
+          const prevFont = ctx.font;
+          ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+          for (const level of levelLines) {
+            const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+            const textWidth = ctx.measureText(labelText).width;
+            const padding = 4;
+            const bgX = lineLeft + 4;
+            const bgY = level.y - 9;
+            ctx.fillStyle = mergedOptions.backgroundColor;
+            fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+            ctx.fillStyle = level.color;
+            ctx.textAlign = "left";
+            ctx.textBaseline = "middle";
+            ctx.fillText(labelText, bgX + padding, bgY + 8);
+          }
+          ctx.font = prevFont;
         }
       }
       ctx.restore();
@@ -3162,6 +3235,28 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "fib-retracement") {
+        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) <= 9) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 9) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+        for (const ratio of fibRatios) {
+          const price = first.price + (second.price - first.price) * (1 - ratio);
+          const lineY = canvasYFromDrawingPrice(price);
+          if (Math.abs(y - lineY) <= 5) {
+            return { drawing, target: "line" };
+          }
+        }
       }
     }
     return null;
@@ -3263,6 +3358,29 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "fib-retracement") {
+      if (draftDrawing?.type === "fib-retracement") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      draftDrawing = normalizeDrawingState({
+        type: "fib-retracement",
+        points: [point, point],
+        color: "#2563eb",
+        style: "solid",
+        width: 1
+      });
+      draw();
+      return true;
+    }
     return false;
   };
   const updateDrawingDrag = (x, y) => {
@@ -3498,7 +3616,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && activeDrawingTool === "trendline") {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "fib-retracement")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {

package/dist/index.cjs

@@ -2021,6 +2021,16 @@ function createChart(element, options = {}) {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
+    const FIB_LEVELS = [
+      { ratio: 0, color: "#787b86" },
+      { ratio: 0.236, color: "#f23645", band: "rgba(242,54,69,0.10)" },
+      { ratio: 0.382, color: "#ff9800", band: "rgba(255,152,0,0.10)" },
+      { ratio: 0.5, color: "#4caf50", band: "rgba(76,175,80,0.10)" },
+      { ratio: 0.618, color: "#089981", band: "rgba(8,153,129,0.10)" },
+      { ratio: 0.786, color: "#00bcd4", band: "rgba(0,188,212,0.10)" },
+      { ratio: 1, color: "#787b86", band: "rgba(120,123,134,0.10)" },
+      { ratio: 1.618, color: "#2962ff", band: "rgba(41,98,255,0.08)" }
+    ];
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2033,27 +2043,24 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     };
-    const drawDrawingLabel = (labelText, anchorX, anchorY, color, angle) => {
+    const drawDrawingLabel = (labelText, anchorX, anchorY, color) => {
       if (!labelText) return;
       ctx.save();
-      ctx.translate(anchorX, anchorY);
-      ctx.rotate(angle);
-      ctx.translate(0, -8);
       const prevFont = ctx.font;
       ctx.font = `500 12px ${mergedOptions.fontFamily}`;
       const textWidth = ctx.measureText(labelText).width;
       const paddingX = 6;
-      const paddingY = 3;
       const bgWidth = textWidth + paddingX * 2;
       const bgHeight = 18;
+      const bgX = anchorX - bgWidth / 2;
+      const bgY = anchorY - bgHeight - 6;
       ctx.fillStyle = `${color}1f`;
-      fillRoundedRect(-bgWidth / 2, -bgHeight, bgWidth, bgHeight, 4);
+      fillRoundedRect(bgX, bgY, bgWidth, bgHeight, 4);
       ctx.fillStyle = color;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
-      ctx.fillText(labelText, 0, -bgHeight / 2);
+      ctx.fillText(labelText, anchorX, bgY + bgHeight / 2);
       ctx.font = prevFont;
-      void paddingY;
       ctx.restore();
     };
     const drawDrawing = (drawing, draft = false) => {
@@ -2076,7 +2083,8 @@ function createChart(element, options = {}) {
           ctx.stroke();
           drawDrawingHandle(handleX, y, drawing.color);
           if (drawing.label) {
-            drawDrawingLabel(drawing.label, chartLeft + 60, y, drawing.color, 0);
+            const midX = (chartLeft + chartRight) / 2;
+            drawDrawingLabel(drawing.label, midX, y, drawing.color);
           }
         }
       } else if (drawing.type === "trendline") {
@@ -2096,9 +2104,74 @@ function createChart(element, options = {}) {
           if (drawing.label) {
             const midX = (firstX + secondX) / 2;
             const midY = (firstY + secondY) / 2;
-            const angle = Math.atan2(secondY - firstY, secondX - firstX);
-            drawDrawingLabel(drawing.label, midX, midY, drawing.color, angle);
+            drawDrawingLabel(drawing.label, midX, midY, drawing.color);
+          }
+        }
+      } else if (drawing.type === "fib-retracement") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (first && second) {
+          const firstX = xFromDrawingPoint(first);
+          const secondX = xFromDrawingPoint(second);
+          const firstY = yFromPrice(first.price);
+          const secondY = yFromPrice(second.price);
+          const lineLeft = chartLeft;
+          const lineRight = chartRight;
+          const levelLines = FIB_LEVELS.map((level) => {
+            const price = first.price + (second.price - first.price) * (1 - level.ratio);
+            return { ...level, price, y: yFromPrice(price) };
+          });
+          for (let index = 0; index < levelLines.length - 1; index += 1) {
+            const top = levelLines[index];
+            const bottom = levelLines[index + 1];
+            const fillColor = bottom.band ?? top.band;
+            if (!fillColor) continue;
+            const bandTop = Math.min(top.y, bottom.y);
+            const bandBottom = Math.max(top.y, bottom.y);
+            ctx.save();
+            ctx.fillStyle = fillColor;
+            ctx.globalAlpha = draft ? 0.5 : 1;
+            ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
+            ctx.restore();
+          }
+          ctx.save();
+          ctx.lineWidth = drawing.width;
+          applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+          for (const level of levelLines) {
+            ctx.strokeStyle = level.color;
+            ctx.beginPath();
+            ctx.moveTo(crisp(lineLeft), crisp(level.y));
+            ctx.lineTo(crisp(lineRight), crisp(level.y));
+            ctx.stroke();
           }
+          ctx.restore();
+          ctx.save();
+          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(firstX, firstY);
+          ctx.lineTo(secondX, secondY);
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(firstX, firstY, drawing.color);
+          drawDrawingHandle(secondX, secondY, drawing.color);
+          const prevFont = ctx.font;
+          ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+          for (const level of levelLines) {
+            const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+            const textWidth = ctx.measureText(labelText).width;
+            const padding = 4;
+            const bgX = lineLeft + 4;
+            const bgY = level.y - 9;
+            ctx.fillStyle = mergedOptions.backgroundColor;
+            fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+            ctx.fillStyle = level.color;
+            ctx.textAlign = "left";
+            ctx.textBaseline = "middle";
+            ctx.fillText(labelText, bgX + padding, bgY + 8);
+          }
+          ctx.font = prevFont;
         }
       }
       ctx.restore();
@@ -3186,6 +3259,28 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "fib-retracement") {
+        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) <= 9) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 9) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+        for (const ratio of fibRatios) {
+          const price = first.price + (second.price - first.price) * (1 - ratio);
+          const lineY = canvasYFromDrawingPrice(price);
+          if (Math.abs(y - lineY) <= 5) {
+            return { drawing, target: "line" };
+          }
+        }
       }
     }
     return null;
@@ -3287,6 +3382,29 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "fib-retracement") {
+      if (draftDrawing?.type === "fib-retracement") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      draftDrawing = normalizeDrawingState({
+        type: "fib-retracement",
+        points: [point, point],
+        color: "#2563eb",
+        style: "solid",
+        width: 1
+      });
+      draw();
+      return true;
+    }
     return false;
   };
   const updateDrawingDrag = (x, y) => {
@@ -3522,7 +3640,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && activeDrawingTool === "trendline") {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "fib-retracement")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {

package/dist/index.d.cts

@@ -43,7 +43,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "trendline";
+type DrawingToolType = "horizontal-line" | "trendline" | "fib-retracement";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/index.d.ts

@@ -43,7 +43,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "trendline";
+type DrawingToolType = "horizontal-line" | "trendline" | "fib-retracement";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/index.js

@@ -1997,6 +1997,16 @@ function createChart(element, options = {}) {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
+    const FIB_LEVELS = [
+      { ratio: 0, color: "#787b86" },
+      { ratio: 0.236, color: "#f23645", band: "rgba(242,54,69,0.10)" },
+      { ratio: 0.382, color: "#ff9800", band: "rgba(255,152,0,0.10)" },
+      { ratio: 0.5, color: "#4caf50", band: "rgba(76,175,80,0.10)" },
+      { ratio: 0.618, color: "#089981", band: "rgba(8,153,129,0.10)" },
+      { ratio: 0.786, color: "#00bcd4", band: "rgba(0,188,212,0.10)" },
+      { ratio: 1, color: "#787b86", band: "rgba(120,123,134,0.10)" },
+      { ratio: 1.618, color: "#2962ff", band: "rgba(41,98,255,0.08)" }
+    ];
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2009,27 +2019,24 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     };
-    const drawDrawingLabel = (labelText, anchorX, anchorY, color, angle) => {
+    const drawDrawingLabel = (labelText, anchorX, anchorY, color) => {
       if (!labelText) return;
       ctx.save();
-      ctx.translate(anchorX, anchorY);
-      ctx.rotate(angle);
-      ctx.translate(0, -8);
       const prevFont = ctx.font;
       ctx.font = `500 12px ${mergedOptions.fontFamily}`;
       const textWidth = ctx.measureText(labelText).width;
       const paddingX = 6;
-      const paddingY = 3;
       const bgWidth = textWidth + paddingX * 2;
       const bgHeight = 18;
+      const bgX = anchorX - bgWidth / 2;
+      const bgY = anchorY - bgHeight - 6;
       ctx.fillStyle = `${color}1f`;
-      fillRoundedRect(-bgWidth / 2, -bgHeight, bgWidth, bgHeight, 4);
+      fillRoundedRect(bgX, bgY, bgWidth, bgHeight, 4);
       ctx.fillStyle = color;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
-      ctx.fillText(labelText, 0, -bgHeight / 2);
+      ctx.fillText(labelText, anchorX, bgY + bgHeight / 2);
       ctx.font = prevFont;
-      void paddingY;
       ctx.restore();
     };
     const drawDrawing = (drawing, draft = false) => {
@@ -2052,7 +2059,8 @@ function createChart(element, options = {}) {
           ctx.stroke();
           drawDrawingHandle(handleX, y, drawing.color);
           if (drawing.label) {
-            drawDrawingLabel(drawing.label, chartLeft + 60, y, drawing.color, 0);
+            const midX = (chartLeft + chartRight) / 2;
+            drawDrawingLabel(drawing.label, midX, y, drawing.color);
           }
         }
       } else if (drawing.type === "trendline") {
@@ -2072,9 +2080,74 @@ function createChart(element, options = {}) {
           if (drawing.label) {
             const midX = (firstX + secondX) / 2;
             const midY = (firstY + secondY) / 2;
-            const angle = Math.atan2(secondY - firstY, secondX - firstX);
-            drawDrawingLabel(drawing.label, midX, midY, drawing.color, angle);
+            drawDrawingLabel(drawing.label, midX, midY, drawing.color);
+          }
+        }
+      } else if (drawing.type === "fib-retracement") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (first && second) {
+          const firstX = xFromDrawingPoint(first);
+          const secondX = xFromDrawingPoint(second);
+          const firstY = yFromPrice(first.price);
+          const secondY = yFromPrice(second.price);
+          const lineLeft = chartLeft;
+          const lineRight = chartRight;
+          const levelLines = FIB_LEVELS.map((level) => {
+            const price = first.price + (second.price - first.price) * (1 - level.ratio);
+            return { ...level, price, y: yFromPrice(price) };
+          });
+          for (let index = 0; index < levelLines.length - 1; index += 1) {
+            const top = levelLines[index];
+            const bottom = levelLines[index + 1];
+            const fillColor = bottom.band ?? top.band;
+            if (!fillColor) continue;
+            const bandTop = Math.min(top.y, bottom.y);
+            const bandBottom = Math.max(top.y, bottom.y);
+            ctx.save();
+            ctx.fillStyle = fillColor;
+            ctx.globalAlpha = draft ? 0.5 : 1;
+            ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
+            ctx.restore();
+          }
+          ctx.save();
+          ctx.lineWidth = drawing.width;
+          applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+          for (const level of levelLines) {
+            ctx.strokeStyle = level.color;
+            ctx.beginPath();
+            ctx.moveTo(crisp(lineLeft), crisp(level.y));
+            ctx.lineTo(crisp(lineRight), crisp(level.y));
+            ctx.stroke();
           }
+          ctx.restore();
+          ctx.save();
+          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(firstX, firstY);
+          ctx.lineTo(secondX, secondY);
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(firstX, firstY, drawing.color);
+          drawDrawingHandle(secondX, secondY, drawing.color);
+          const prevFont = ctx.font;
+          ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+          for (const level of levelLines) {
+            const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+            const textWidth = ctx.measureText(labelText).width;
+            const padding = 4;
+            const bgX = lineLeft + 4;
+            const bgY = level.y - 9;
+            ctx.fillStyle = mergedOptions.backgroundColor;
+            fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+            ctx.fillStyle = level.color;
+            ctx.textAlign = "left";
+            ctx.textBaseline = "middle";
+            ctx.fillText(labelText, bgX + padding, bgY + 8);
+          }
+          ctx.font = prevFont;
         }
       }
       ctx.restore();
@@ -3162,6 +3235,28 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "fib-retracement") {
+        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) <= 9) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 9) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+        for (const ratio of fibRatios) {
+          const price = first.price + (second.price - first.price) * (1 - ratio);
+          const lineY = canvasYFromDrawingPrice(price);
+          if (Math.abs(y - lineY) <= 5) {
+            return { drawing, target: "line" };
+          }
+        }
       }
     }
     return null;
@@ -3263,6 +3358,29 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "fib-retracement") {
+      if (draftDrawing?.type === "fib-retracement") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      draftDrawing = normalizeDrawingState({
+        type: "fib-retracement",
+        points: [point, point],
+        color: "#2563eb",
+        style: "solid",
+        width: 1
+      });
+      draw();
+      return true;
+    }
     return false;
   };
   const updateDrawingDrag = (x, y) => {
@@ -3498,7 +3616,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && activeDrawingTool === "trendline") {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "fib-retracement")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {

package/package.json

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