hyperprop-charting-library 0.1.59 → 0.1.61

package/dist/hyperprop-charting-library.cjs

@@ -964,6 +964,8 @@ function createChart(element, options = {}) {
   let drawingSelectHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
+  const drawingToolDefaults = /* @__PURE__ */ new Map();
+  const getDrawingToolDefaults = (tool) => drawingToolDefaults.get(tool) ?? {};
   const emitDrawingsChange = () => {
     drawingsChangeHandler?.(drawings.map((drawing) => serializeDrawing(drawing)));
   };
@@ -2021,6 +2023,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([]);
@@ -2097,6 +2109,72 @@ function createChart(element, options = {}) {
             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();
     };
@@ -3183,6 +3261,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;
@@ -3248,13 +3348,14 @@ function createChart(element, options = {}) {
       return false;
     }
     if (activeDrawingTool === "horizontal-line") {
+      const defaults = getDrawingToolDefaults("horizontal-line");
       drawings.push(
         normalizeDrawingState({
           type: "horizontal-line",
           points: [point],
-          color: "#38bdf8",
-          style: "dotted",
-          width: 1
+          color: defaults.color ?? "#38bdf8",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
         })
       );
       emitDrawingsChange();
@@ -3274,18 +3375,50 @@ function createChart(element, options = {}) {
         draw();
         return true;
       }
+      const defaults = getDrawingToolDefaults("trendline");
       draftDrawing = normalizeDrawingState({
         type: "trendline",
         points: [point, point],
-        color: "#2563eb",
-        style: "solid",
-        width: 2
+        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({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-retracement");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-retracement",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
       });
       draw();
       return true;
     }
     return false;
   };
+  const setDrawingDefaults = (tool, defaults) => {
+    if (defaults === null) {
+      drawingToolDefaults.delete(tool);
+      return;
+    }
+    drawingToolDefaults.set(tool, { ...defaults });
+  };
   const updateDrawingDrag = (x, y) => {
     if (!drawingDragState) {
       return false;
@@ -3519,7 +3652,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 = {
@@ -4134,6 +4267,7 @@ function createChart(element, options = {}) {
     onDrawingsChange,
     onDrawingSelect,
     onDrawingHover,
+    setDrawingDefaults,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

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;
@@ -73,6 +73,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "style" | "width">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -405,6 +406,7 @@ interface ChartInstance {
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
+    setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     registerIndicator: (plugin: IndicatorPlugin<any>) => void;
@@ -440,4 +442,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/hyperprop-charting-library.js

@@ -940,6 +940,8 @@ function createChart(element, options = {}) {
   let drawingSelectHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
+  const drawingToolDefaults = /* @__PURE__ */ new Map();
+  const getDrawingToolDefaults = (tool) => drawingToolDefaults.get(tool) ?? {};
   const emitDrawingsChange = () => {
     drawingsChangeHandler?.(drawings.map((drawing) => serializeDrawing(drawing)));
   };
@@ -1997,6 +1999,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([]);
@@ -2073,6 +2085,72 @@ function createChart(element, options = {}) {
             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();
     };
@@ -3159,6 +3237,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;
@@ -3224,13 +3324,14 @@ function createChart(element, options = {}) {
       return false;
     }
     if (activeDrawingTool === "horizontal-line") {
+      const defaults = getDrawingToolDefaults("horizontal-line");
       drawings.push(
         normalizeDrawingState({
           type: "horizontal-line",
           points: [point],
-          color: "#38bdf8",
-          style: "dotted",
-          width: 1
+          color: defaults.color ?? "#38bdf8",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
         })
       );
       emitDrawingsChange();
@@ -3250,18 +3351,50 @@ function createChart(element, options = {}) {
         draw();
         return true;
       }
+      const defaults = getDrawingToolDefaults("trendline");
       draftDrawing = normalizeDrawingState({
         type: "trendline",
         points: [point, point],
-        color: "#2563eb",
-        style: "solid",
-        width: 2
+        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({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-retracement");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-retracement",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
       });
       draw();
       return true;
     }
     return false;
   };
+  const setDrawingDefaults = (tool, defaults) => {
+    if (defaults === null) {
+      drawingToolDefaults.delete(tool);
+      return;
+    }
+    drawingToolDefaults.set(tool, { ...defaults });
+  };
   const updateDrawingDrag = (x, y) => {
     if (!drawingDragState) {
       return false;
@@ -3495,7 +3628,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 = {
@@ -4110,6 +4243,7 @@ function createChart(element, options = {}) {
     onDrawingsChange,
     onDrawingSelect,
     onDrawingHover,
+    setDrawingDefaults,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

package/dist/index.cjs

@@ -964,6 +964,8 @@ function createChart(element, options = {}) {
   let drawingSelectHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
+  const drawingToolDefaults = /* @__PURE__ */ new Map();
+  const getDrawingToolDefaults = (tool) => drawingToolDefaults.get(tool) ?? {};
   const emitDrawingsChange = () => {
     drawingsChangeHandler?.(drawings.map((drawing) => serializeDrawing(drawing)));
   };
@@ -2021,6 +2023,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([]);
@@ -2097,6 +2109,72 @@ function createChart(element, options = {}) {
             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();
     };
@@ -3183,6 +3261,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;
@@ -3248,13 +3348,14 @@ function createChart(element, options = {}) {
       return false;
     }
     if (activeDrawingTool === "horizontal-line") {
+      const defaults = getDrawingToolDefaults("horizontal-line");
       drawings.push(
         normalizeDrawingState({
           type: "horizontal-line",
           points: [point],
-          color: "#38bdf8",
-          style: "dotted",
-          width: 1
+          color: defaults.color ?? "#38bdf8",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
         })
       );
       emitDrawingsChange();
@@ -3274,18 +3375,50 @@ function createChart(element, options = {}) {
         draw();
         return true;
       }
+      const defaults = getDrawingToolDefaults("trendline");
       draftDrawing = normalizeDrawingState({
         type: "trendline",
         points: [point, point],
-        color: "#2563eb",
-        style: "solid",
-        width: 2
+        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({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-retracement");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-retracement",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
       });
       draw();
       return true;
     }
     return false;
   };
+  const setDrawingDefaults = (tool, defaults) => {
+    if (defaults === null) {
+      drawingToolDefaults.delete(tool);
+      return;
+    }
+    drawingToolDefaults.set(tool, { ...defaults });
+  };
   const updateDrawingDrag = (x, y) => {
     if (!drawingDragState) {
       return false;
@@ -3519,7 +3652,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 = {
@@ -4134,6 +4267,7 @@ function createChart(element, options = {}) {
     onDrawingsChange,
     onDrawingSelect,
     onDrawingHover,
+    setDrawingDefaults,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

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;
@@ -73,6 +73,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "style" | "width">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -405,6 +406,7 @@ interface ChartInstance {
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
+    setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     registerIndicator: (plugin: IndicatorPlugin<any>) => void;
@@ -440,4 +442,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

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;
@@ -73,6 +73,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "style" | "width">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -405,6 +406,7 @@ interface ChartInstance {
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
+    setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     registerIndicator: (plugin: IndicatorPlugin<any>) => void;
@@ -440,4 +442,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/index.js

@@ -940,6 +940,8 @@ function createChart(element, options = {}) {
   let drawingSelectHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
+  const drawingToolDefaults = /* @__PURE__ */ new Map();
+  const getDrawingToolDefaults = (tool) => drawingToolDefaults.get(tool) ?? {};
   const emitDrawingsChange = () => {
     drawingsChangeHandler?.(drawings.map((drawing) => serializeDrawing(drawing)));
   };
@@ -1997,6 +1999,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([]);
@@ -2073,6 +2085,72 @@ function createChart(element, options = {}) {
             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();
     };
@@ -3159,6 +3237,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;
@@ -3224,13 +3324,14 @@ function createChart(element, options = {}) {
       return false;
     }
     if (activeDrawingTool === "horizontal-line") {
+      const defaults = getDrawingToolDefaults("horizontal-line");
       drawings.push(
         normalizeDrawingState({
           type: "horizontal-line",
           points: [point],
-          color: "#38bdf8",
-          style: "dotted",
-          width: 1
+          color: defaults.color ?? "#38bdf8",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
         })
       );
       emitDrawingsChange();
@@ -3250,18 +3351,50 @@ function createChart(element, options = {}) {
         draw();
         return true;
       }
+      const defaults = getDrawingToolDefaults("trendline");
       draftDrawing = normalizeDrawingState({
         type: "trendline",
         points: [point, point],
-        color: "#2563eb",
-        style: "solid",
-        width: 2
+        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({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-retracement");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-retracement",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
       });
       draw();
       return true;
     }
     return false;
   };
+  const setDrawingDefaults = (tool, defaults) => {
+    if (defaults === null) {
+      drawingToolDefaults.delete(tool);
+      return;
+    }
+    drawingToolDefaults.set(tool, { ...defaults });
+  };
   const updateDrawingDrag = (x, y) => {
     if (!drawingDragState) {
       return false;
@@ -3495,7 +3628,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 = {
@@ -4110,6 +4243,7 @@ function createChart(element, options = {}) {
     onDrawingsChange,
     onDrawingSelect,
     onDrawingHover,
+    setDrawingDefaults,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

package/package.json

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