hyperprop-charting-library 0.1.68 → 0.1.70

package/dist/hyperprop-charting-library.cjs

@@ -20,9 +20,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  FIB_DEFAULT_PALETTE: () => FIB_DEFAULT_PALETTE,
   createChart: () => createChart
 });
 module.exports = __toCommonJS(index_exports);
+var FIB_DEFAULT_PALETTE = [
+  "#787b86",
+  "#f23645",
+  "#ff9800",
+  "#4caf50",
+  "#089981",
+  "#00bcd4",
+  "#2962ff",
+  "#9c27b0"
+];
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
   opacity: 0.38,
@@ -43,6 +54,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   color: "#94a3b8",
   width: 1,
   style: "dotted",
+  mode: "cross",
+  dotRadius: 3,
   showHorizontal: true,
   showVertical: true,
   showPriceLabel: true,
@@ -942,6 +955,7 @@ function createChart(element, options = {}) {
     })),
     visible: drawing.visible ?? true,
     color: drawing.color ?? "#94a3b8",
+    colors: Array.isArray(drawing.colors) ? drawing.colors.filter((value) => typeof value === "string") : [],
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
@@ -953,6 +967,7 @@ function createChart(element, options = {}) {
     points: drawing.points.map((point) => ({ ...point })),
     visible: drawing.visible,
     color: drawing.color,
+    colors: [...drawing.colors],
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
@@ -2242,32 +2257,33 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
+          const palette = drawing.colors.length > 0 ? drawing.colors : null;
+          const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
           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 bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = bandColor;
+            ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
             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) {
+          levelLines.forEach((level, index) => {
+            ctx.strokeStyle = levelColorAt(index);
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
             ctx.stroke();
-          }
+          });
           ctx.restore();
           ctx.save();
           ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
@@ -2282,7 +2298,7 @@ function createChart(element, options = {}) {
           drawDrawingHandle(secondX, secondY, drawing.color);
           const prevFont = ctx.font;
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
-          for (const level of levelLines) {
+          levelLines.forEach((level, index) => {
             const labelText = `${level.ratio} (${formatPrice(level.price)})`;
             const textWidth = ctx.measureText(labelText).width;
             const padding = 4;
@@ -2290,11 +2306,11 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = drawing.color;
+            ctx.fillStyle = levelColorAt(index);
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
-          }
+          });
           ctx.font = prevFont;
         }
       }
@@ -2479,23 +2495,32 @@ function createChart(element, options = {}) {
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
-      ctx.save();
-      ctx.strokeStyle = crosshair.color;
-      ctx.lineWidth = Math.max(1, crosshair.width);
-      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
-      if (crosshair.showVertical) {
-        ctx.beginPath();
-        ctx.moveTo(crisp(cx), crisp(chartTop));
-        ctx.lineTo(crisp(cx), crisp(chartBottom));
-        ctx.stroke();
-      }
-      if (crosshair.showHorizontal) {
+      if (crosshair.mode === "dot") {
+        ctx.save();
+        ctx.fillStyle = crosshair.color;
         ctx.beginPath();
-        ctx.moveTo(crisp(chartLeft), crisp(cy));
-        ctx.lineTo(crisp(chartRight), crisp(cy));
-        ctx.stroke();
+        ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      } else {
+        ctx.save();
+        ctx.strokeStyle = crosshair.color;
+        ctx.lineWidth = Math.max(1, crosshair.width);
+        applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+        if (crosshair.showVertical) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(cx), crisp(chartTop));
+          ctx.lineTo(crisp(cx), crisp(chartBottom));
+          ctx.stroke();
+        }
+        if (crosshair.showHorizontal) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(chartLeft), crisp(cy));
+          ctx.lineTo(crisp(chartRight), crisp(cy));
+          ctx.stroke();
+        }
+        ctx.restore();
       }
-      ctx.restore();
     }
     ctx.restore();
     if (activeSeparateIndicators.length > 0) {
@@ -3609,6 +3634,7 @@ function createChart(element, options = {}) {
         type: "fib-retracement",
         points: [point, point],
         color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
@@ -4538,5 +4564,6 @@ function createChart(element, options = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FIB_DEFAULT_PALETTE,
   createChart
 });

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

@@ -56,11 +56,19 @@ interface DrawingObjectOptions {
     points: DrawingPoint[];
     visible?: boolean;
     color?: string;
+    /**
+     * Optional per-level colors. Currently used by `fib-retracement`: when set
+     * (non-empty), each level/band cycles through these colors instead of using
+     * the single `color`. Leave empty for a monochrome drawing.
+     */
+    colors?: string[];
     style?: "solid" | "dotted" | "dashed";
     width?: number;
     label?: string;
     locked?: boolean;
 }
+/** Default multi-color palette for fib-retracement levels. */
+declare const FIB_DEFAULT_PALETTE: string[];
 interface DrawingSelectEvent {
     drawing: DrawingObjectOptions;
     target: "line" | "handle";
@@ -74,7 +82,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "style" | "width">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -188,6 +196,8 @@ interface CrosshairOptions {
     color?: string;
     width?: number;
     style?: "solid" | "dotted" | "dashed";
+    mode?: "cross" | "dot";
+    dotRadius?: number;
     showHorizontal?: boolean;
     showVertical?: boolean;
     showPriceLabel?: boolean;
@@ -445,4 +455,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 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 };
+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, FIB_DEFAULT_PALETTE, 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

@@ -1,4 +1,14 @@
 // src/index.ts
+var FIB_DEFAULT_PALETTE = [
+  "#787b86",
+  "#f23645",
+  "#ff9800",
+  "#4caf50",
+  "#089981",
+  "#00bcd4",
+  "#2962ff",
+  "#9c27b0"
+];
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
   opacity: 0.38,
@@ -19,6 +29,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   color: "#94a3b8",
   width: 1,
   style: "dotted",
+  mode: "cross",
+  dotRadius: 3,
   showHorizontal: true,
   showVertical: true,
   showPriceLabel: true,
@@ -918,6 +930,7 @@ function createChart(element, options = {}) {
     })),
     visible: drawing.visible ?? true,
     color: drawing.color ?? "#94a3b8",
+    colors: Array.isArray(drawing.colors) ? drawing.colors.filter((value) => typeof value === "string") : [],
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
@@ -929,6 +942,7 @@ function createChart(element, options = {}) {
     points: drawing.points.map((point) => ({ ...point })),
     visible: drawing.visible,
     color: drawing.color,
+    colors: [...drawing.colors],
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
@@ -2218,32 +2232,33 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
+          const palette = drawing.colors.length > 0 ? drawing.colors : null;
+          const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
           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 bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = bandColor;
+            ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
             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) {
+          levelLines.forEach((level, index) => {
+            ctx.strokeStyle = levelColorAt(index);
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
             ctx.stroke();
-          }
+          });
           ctx.restore();
           ctx.save();
           ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
@@ -2258,7 +2273,7 @@ function createChart(element, options = {}) {
           drawDrawingHandle(secondX, secondY, drawing.color);
           const prevFont = ctx.font;
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
-          for (const level of levelLines) {
+          levelLines.forEach((level, index) => {
             const labelText = `${level.ratio} (${formatPrice(level.price)})`;
             const textWidth = ctx.measureText(labelText).width;
             const padding = 4;
@@ -2266,11 +2281,11 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = drawing.color;
+            ctx.fillStyle = levelColorAt(index);
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
-          }
+          });
           ctx.font = prevFont;
         }
       }
@@ -2455,23 +2470,32 @@ function createChart(element, options = {}) {
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
-      ctx.save();
-      ctx.strokeStyle = crosshair.color;
-      ctx.lineWidth = Math.max(1, crosshair.width);
-      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
-      if (crosshair.showVertical) {
-        ctx.beginPath();
-        ctx.moveTo(crisp(cx), crisp(chartTop));
-        ctx.lineTo(crisp(cx), crisp(chartBottom));
-        ctx.stroke();
-      }
-      if (crosshair.showHorizontal) {
+      if (crosshair.mode === "dot") {
+        ctx.save();
+        ctx.fillStyle = crosshair.color;
         ctx.beginPath();
-        ctx.moveTo(crisp(chartLeft), crisp(cy));
-        ctx.lineTo(crisp(chartRight), crisp(cy));
-        ctx.stroke();
+        ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      } else {
+        ctx.save();
+        ctx.strokeStyle = crosshair.color;
+        ctx.lineWidth = Math.max(1, crosshair.width);
+        applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+        if (crosshair.showVertical) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(cx), crisp(chartTop));
+          ctx.lineTo(crisp(cx), crisp(chartBottom));
+          ctx.stroke();
+        }
+        if (crosshair.showHorizontal) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(chartLeft), crisp(cy));
+          ctx.lineTo(crisp(chartRight), crisp(cy));
+          ctx.stroke();
+        }
+        ctx.restore();
       }
-      ctx.restore();
     }
     ctx.restore();
     if (activeSeparateIndicators.length > 0) {
@@ -3585,6 +3609,7 @@ function createChart(element, options = {}) {
         type: "fib-retracement",
         points: [point, point],
         color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
@@ -4513,5 +4538,6 @@ function createChart(element, options = {}) {
   };
 }
 export {
+  FIB_DEFAULT_PALETTE,
   createChart
 };

package/dist/index.cjs

@@ -20,9 +20,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  FIB_DEFAULT_PALETTE: () => FIB_DEFAULT_PALETTE,
   createChart: () => createChart
 });
 module.exports = __toCommonJS(index_exports);
+var FIB_DEFAULT_PALETTE = [
+  "#787b86",
+  "#f23645",
+  "#ff9800",
+  "#4caf50",
+  "#089981",
+  "#00bcd4",
+  "#2962ff",
+  "#9c27b0"
+];
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
   opacity: 0.38,
@@ -43,6 +54,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   color: "#94a3b8",
   width: 1,
   style: "dotted",
+  mode: "cross",
+  dotRadius: 3,
   showHorizontal: true,
   showVertical: true,
   showPriceLabel: true,
@@ -942,6 +955,7 @@ function createChart(element, options = {}) {
     })),
     visible: drawing.visible ?? true,
     color: drawing.color ?? "#94a3b8",
+    colors: Array.isArray(drawing.colors) ? drawing.colors.filter((value) => typeof value === "string") : [],
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
@@ -953,6 +967,7 @@ function createChart(element, options = {}) {
     points: drawing.points.map((point) => ({ ...point })),
     visible: drawing.visible,
     color: drawing.color,
+    colors: [...drawing.colors],
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
@@ -2242,32 +2257,33 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
+          const palette = drawing.colors.length > 0 ? drawing.colors : null;
+          const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
           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 bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = bandColor;
+            ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
             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) {
+          levelLines.forEach((level, index) => {
+            ctx.strokeStyle = levelColorAt(index);
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
             ctx.stroke();
-          }
+          });
           ctx.restore();
           ctx.save();
           ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
@@ -2282,7 +2298,7 @@ function createChart(element, options = {}) {
           drawDrawingHandle(secondX, secondY, drawing.color);
           const prevFont = ctx.font;
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
-          for (const level of levelLines) {
+          levelLines.forEach((level, index) => {
             const labelText = `${level.ratio} (${formatPrice(level.price)})`;
             const textWidth = ctx.measureText(labelText).width;
             const padding = 4;
@@ -2290,11 +2306,11 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = drawing.color;
+            ctx.fillStyle = levelColorAt(index);
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
-          }
+          });
           ctx.font = prevFont;
         }
       }
@@ -2479,23 +2495,32 @@ function createChart(element, options = {}) {
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
-      ctx.save();
-      ctx.strokeStyle = crosshair.color;
-      ctx.lineWidth = Math.max(1, crosshair.width);
-      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
-      if (crosshair.showVertical) {
-        ctx.beginPath();
-        ctx.moveTo(crisp(cx), crisp(chartTop));
-        ctx.lineTo(crisp(cx), crisp(chartBottom));
-        ctx.stroke();
-      }
-      if (crosshair.showHorizontal) {
+      if (crosshair.mode === "dot") {
+        ctx.save();
+        ctx.fillStyle = crosshair.color;
         ctx.beginPath();
-        ctx.moveTo(crisp(chartLeft), crisp(cy));
-        ctx.lineTo(crisp(chartRight), crisp(cy));
-        ctx.stroke();
+        ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      } else {
+        ctx.save();
+        ctx.strokeStyle = crosshair.color;
+        ctx.lineWidth = Math.max(1, crosshair.width);
+        applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+        if (crosshair.showVertical) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(cx), crisp(chartTop));
+          ctx.lineTo(crisp(cx), crisp(chartBottom));
+          ctx.stroke();
+        }
+        if (crosshair.showHorizontal) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(chartLeft), crisp(cy));
+          ctx.lineTo(crisp(chartRight), crisp(cy));
+          ctx.stroke();
+        }
+        ctx.restore();
       }
-      ctx.restore();
     }
     ctx.restore();
     if (activeSeparateIndicators.length > 0) {
@@ -3609,6 +3634,7 @@ function createChart(element, options = {}) {
         type: "fib-retracement",
         points: [point, point],
         color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
@@ -4538,5 +4564,6 @@ function createChart(element, options = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FIB_DEFAULT_PALETTE,
   createChart
 });

package/dist/index.d.cts

@@ -56,11 +56,19 @@ interface DrawingObjectOptions {
     points: DrawingPoint[];
     visible?: boolean;
     color?: string;
+    /**
+     * Optional per-level colors. Currently used by `fib-retracement`: when set
+     * (non-empty), each level/band cycles through these colors instead of using
+     * the single `color`. Leave empty for a monochrome drawing.
+     */
+    colors?: string[];
     style?: "solid" | "dotted" | "dashed";
     width?: number;
     label?: string;
     locked?: boolean;
 }
+/** Default multi-color palette for fib-retracement levels. */
+declare const FIB_DEFAULT_PALETTE: string[];
 interface DrawingSelectEvent {
     drawing: DrawingObjectOptions;
     target: "line" | "handle";
@@ -74,7 +82,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "style" | "width">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -188,6 +196,8 @@ interface CrosshairOptions {
     color?: string;
     width?: number;
     style?: "solid" | "dotted" | "dashed";
+    mode?: "cross" | "dot";
+    dotRadius?: number;
     showHorizontal?: boolean;
     showVertical?: boolean;
     showPriceLabel?: boolean;
@@ -445,4 +455,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 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 };
+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, FIB_DEFAULT_PALETTE, 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

@@ -56,11 +56,19 @@ interface DrawingObjectOptions {
     points: DrawingPoint[];
     visible?: boolean;
     color?: string;
+    /**
+     * Optional per-level colors. Currently used by `fib-retracement`: when set
+     * (non-empty), each level/band cycles through these colors instead of using
+     * the single `color`. Leave empty for a monochrome drawing.
+     */
+    colors?: string[];
     style?: "solid" | "dotted" | "dashed";
     width?: number;
     label?: string;
     locked?: boolean;
 }
+/** Default multi-color palette for fib-retracement levels. */
+declare const FIB_DEFAULT_PALETTE: string[];
 interface DrawingSelectEvent {
     drawing: DrawingObjectOptions;
     target: "line" | "handle";
@@ -74,7 +82,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "style" | "width">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -188,6 +196,8 @@ interface CrosshairOptions {
     color?: string;
     width?: number;
     style?: "solid" | "dotted" | "dashed";
+    mode?: "cross" | "dot";
+    dotRadius?: number;
     showHorizontal?: boolean;
     showVertical?: boolean;
     showPriceLabel?: boolean;
@@ -445,4 +455,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 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 };
+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, FIB_DEFAULT_PALETTE, 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

@@ -1,4 +1,14 @@
 // src/index.ts
+var FIB_DEFAULT_PALETTE = [
+  "#787b86",
+  "#f23645",
+  "#ff9800",
+  "#4caf50",
+  "#089981",
+  "#00bcd4",
+  "#2962ff",
+  "#9c27b0"
+];
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
   opacity: 0.38,
@@ -19,6 +29,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   color: "#94a3b8",
   width: 1,
   style: "dotted",
+  mode: "cross",
+  dotRadius: 3,
   showHorizontal: true,
   showVertical: true,
   showPriceLabel: true,
@@ -918,6 +930,7 @@ function createChart(element, options = {}) {
     })),
     visible: drawing.visible ?? true,
     color: drawing.color ?? "#94a3b8",
+    colors: Array.isArray(drawing.colors) ? drawing.colors.filter((value) => typeof value === "string") : [],
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
@@ -929,6 +942,7 @@ function createChart(element, options = {}) {
     points: drawing.points.map((point) => ({ ...point })),
     visible: drawing.visible,
     color: drawing.color,
+    colors: [...drawing.colors],
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
@@ -2218,32 +2232,33 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
+          const palette = drawing.colors.length > 0 ? drawing.colors : null;
+          const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
           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 bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = bandColor;
+            ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
             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) {
+          levelLines.forEach((level, index) => {
+            ctx.strokeStyle = levelColorAt(index);
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
             ctx.stroke();
-          }
+          });
           ctx.restore();
           ctx.save();
           ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
@@ -2258,7 +2273,7 @@ function createChart(element, options = {}) {
           drawDrawingHandle(secondX, secondY, drawing.color);
           const prevFont = ctx.font;
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
-          for (const level of levelLines) {
+          levelLines.forEach((level, index) => {
             const labelText = `${level.ratio} (${formatPrice(level.price)})`;
             const textWidth = ctx.measureText(labelText).width;
             const padding = 4;
@@ -2266,11 +2281,11 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = drawing.color;
+            ctx.fillStyle = levelColorAt(index);
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
-          }
+          });
           ctx.font = prevFont;
         }
       }
@@ -2455,23 +2470,32 @@ function createChart(element, options = {}) {
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
-      ctx.save();
-      ctx.strokeStyle = crosshair.color;
-      ctx.lineWidth = Math.max(1, crosshair.width);
-      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
-      if (crosshair.showVertical) {
-        ctx.beginPath();
-        ctx.moveTo(crisp(cx), crisp(chartTop));
-        ctx.lineTo(crisp(cx), crisp(chartBottom));
-        ctx.stroke();
-      }
-      if (crosshair.showHorizontal) {
+      if (crosshair.mode === "dot") {
+        ctx.save();
+        ctx.fillStyle = crosshair.color;
         ctx.beginPath();
-        ctx.moveTo(crisp(chartLeft), crisp(cy));
-        ctx.lineTo(crisp(chartRight), crisp(cy));
-        ctx.stroke();
+        ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      } else {
+        ctx.save();
+        ctx.strokeStyle = crosshair.color;
+        ctx.lineWidth = Math.max(1, crosshair.width);
+        applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+        if (crosshair.showVertical) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(cx), crisp(chartTop));
+          ctx.lineTo(crisp(cx), crisp(chartBottom));
+          ctx.stroke();
+        }
+        if (crosshair.showHorizontal) {
+          ctx.beginPath();
+          ctx.moveTo(crisp(chartLeft), crisp(cy));
+          ctx.lineTo(crisp(chartRight), crisp(cy));
+          ctx.stroke();
+        }
+        ctx.restore();
       }
-      ctx.restore();
     }
     ctx.restore();
     if (activeSeparateIndicators.length > 0) {
@@ -3585,6 +3609,7 @@ function createChart(element, options = {}) {
         type: "fib-retracement",
         points: [point, point],
         color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
@@ -4513,5 +4538,6 @@ function createChart(element, options = {}) {
   };
 }
 export {
+  FIB_DEFAULT_PALETTE,
   createChart
 };

package/docs/API.md

@@ -94,6 +94,8 @@ Top-level options:
 - `color` (default `#94a3b8`)
 - `width` (default `1`)
 - `style` (`"solid" | "dotted" | "dashed"`, default `"dotted"`)
+- `mode` (`"cross" | "dot"`, default `"cross"`; `"dot"` draws a dot at the cursor instead of crosshair lines)
+- `dotRadius` (default `3`; dot radius in px when `mode` is `"dot"`)
 - `showHorizontal` (default `true`)
 - `showVertical` (default `true`)
 - `showPriceLabel` (default `true`)
@@ -422,6 +424,7 @@ Drawings are user-created chart tools, separate from indicators. They are intera
 - `points: DrawingPoint[]`
 - `visible?: boolean`
 - `color?: string`
+- `colors?: string[]` (per-level colors; used by `fib-retracement`. When non-empty, each level/band cycles through these instead of `color`. New fib drawings default to `FIB_DEFAULT_PALETTE`; set `colors: []` for a monochrome fib that follows `color`.)
 - `style?: "solid" | "dotted" | "dashed"`
 - `width?: number`
 - `label?: string`

package/package.json

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