hyperprop-charting-library 0.1.60 → 0.1.62

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,16 +2023,17 @@ 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 FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const hexToRgba = (hex, alpha) => {
+      const cleaned = hex.replace("#", "");
+      if (cleaned.length !== 6) {
+        return `rgba(0,0,0,${alpha})`;
+      }
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2117,28 +2120,27 @@ function createChart(element, options = {}) {
           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) };
+          const levelLines = FIB_RATIOS.map((ratio) => {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            return { ratio, price, y: yFromPrice(price) };
           });
+          const bandColor = hexToRgba(drawing.color, 0.1);
           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.fillStyle = bandColor;
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
+          ctx.strokeStyle = drawing.color;
           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));
@@ -2146,7 +2148,7 @@ function createChart(element, options = {}) {
           }
           ctx.restore();
           ctx.save();
-          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
           ctx.setLineDash([4, 4]);
           ctx.lineWidth = 1;
           ctx.beginPath();
@@ -2166,7 +2168,7 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = level.color;
+            ctx.fillStyle = drawing.color;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
@@ -3346,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();
@@ -3372,12 +3375,13 @@ 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;
@@ -3395,18 +3399,26 @@ function createChart(element, options = {}) {
         draw();
         return true;
       }
+      const defaults = getDrawingToolDefaults("fib-retracement");
       draftDrawing = normalizeDrawingState({
         type: "fib-retracement",
         points: [point, point],
-        color: "#2563eb",
-        style: "solid",
-        width: 1
+        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;
@@ -4255,6 +4267,7 @@ function createChart(element, options = {}) {
     onDrawingsChange,
     onDrawingSelect,
     onDrawingHover,
+    setDrawingDefaults,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

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

@@ -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,16 +1999,17 @@ 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 FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const hexToRgba = (hex, alpha) => {
+      const cleaned = hex.replace("#", "");
+      if (cleaned.length !== 6) {
+        return `rgba(0,0,0,${alpha})`;
+      }
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2093,28 +2096,27 @@ function createChart(element, options = {}) {
           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) };
+          const levelLines = FIB_RATIOS.map((ratio) => {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            return { ratio, price, y: yFromPrice(price) };
           });
+          const bandColor = hexToRgba(drawing.color, 0.1);
           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.fillStyle = bandColor;
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
+          ctx.strokeStyle = drawing.color;
           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));
@@ -2122,7 +2124,7 @@ function createChart(element, options = {}) {
           }
           ctx.restore();
           ctx.save();
-          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
           ctx.setLineDash([4, 4]);
           ctx.lineWidth = 1;
           ctx.beginPath();
@@ -2142,7 +2144,7 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = level.color;
+            ctx.fillStyle = drawing.color;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
@@ -3322,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();
@@ -3348,12 +3351,13 @@ 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;
@@ -3371,18 +3375,26 @@ function createChart(element, options = {}) {
         draw();
         return true;
       }
+      const defaults = getDrawingToolDefaults("fib-retracement");
       draftDrawing = normalizeDrawingState({
         type: "fib-retracement",
         points: [point, point],
-        color: "#2563eb",
-        style: "solid",
-        width: 1
+        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;
@@ -4231,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,16 +2023,17 @@ 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 FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const hexToRgba = (hex, alpha) => {
+      const cleaned = hex.replace("#", "");
+      if (cleaned.length !== 6) {
+        return `rgba(0,0,0,${alpha})`;
+      }
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2117,28 +2120,27 @@ function createChart(element, options = {}) {
           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) };
+          const levelLines = FIB_RATIOS.map((ratio) => {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            return { ratio, price, y: yFromPrice(price) };
           });
+          const bandColor = hexToRgba(drawing.color, 0.1);
           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.fillStyle = bandColor;
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
+          ctx.strokeStyle = drawing.color;
           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));
@@ -2146,7 +2148,7 @@ function createChart(element, options = {}) {
           }
           ctx.restore();
           ctx.save();
-          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
           ctx.setLineDash([4, 4]);
           ctx.lineWidth = 1;
           ctx.beginPath();
@@ -2166,7 +2168,7 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = level.color;
+            ctx.fillStyle = drawing.color;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
@@ -3346,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();
@@ -3372,12 +3375,13 @@ 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;
@@ -3395,18 +3399,26 @@ function createChart(element, options = {}) {
         draw();
         return true;
       }
+      const defaults = getDrawingToolDefaults("fib-retracement");
       draftDrawing = normalizeDrawingState({
         type: "fib-retracement",
         points: [point, point],
-        color: "#2563eb",
-        style: "solid",
-        width: 1
+        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;
@@ -4255,6 +4267,7 @@ function createChart(element, options = {}) {
     onDrawingsChange,
     onDrawingSelect,
     onDrawingHover,
+    setDrawingDefaults,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

package/dist/index.d.cts

@@ -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

@@ -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,16 +1999,17 @@ 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 FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const hexToRgba = (hex, alpha) => {
+      const cleaned = hex.replace("#", "");
+      if (cleaned.length !== 6) {
+        return `rgba(0,0,0,${alpha})`;
+      }
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2093,28 +2096,27 @@ function createChart(element, options = {}) {
           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) };
+          const levelLines = FIB_RATIOS.map((ratio) => {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            return { ratio, price, y: yFromPrice(price) };
           });
+          const bandColor = hexToRgba(drawing.color, 0.1);
           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.fillStyle = bandColor;
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
+          ctx.strokeStyle = drawing.color;
           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));
@@ -2122,7 +2124,7 @@ function createChart(element, options = {}) {
           }
           ctx.restore();
           ctx.save();
-          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
           ctx.setLineDash([4, 4]);
           ctx.lineWidth = 1;
           ctx.beginPath();
@@ -2142,7 +2144,7 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = level.color;
+            ctx.fillStyle = drawing.color;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
@@ -3322,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();
@@ -3348,12 +3351,13 @@ 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;
@@ -3371,18 +3375,26 @@ function createChart(element, options = {}) {
         draw();
         return true;
       }
+      const defaults = getDrawingToolDefaults("fib-retracement");
       draftDrawing = normalizeDrawingState({
         type: "fib-retracement",
         points: [point, point],
-        color: "#2563eb",
-        style: "solid",
-        width: 1
+        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;
@@ -4231,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.60",
+  "version": "0.1.62",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",