hyperprop-charting-library 0.1.17 → 0.1.19

package/dist/hyperprop-charting-library.cjs

@@ -53,15 +53,12 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   labelBorderWidth: 1,
   labelBorderStyle: "solid",
   showPriceActionButton: false,
+  priceActionButtonIcon: "plusThin",
   priceActionButtonText: "+",
-  priceActionButtonSize: 20,
-  priceActionButtonGap: 6,
-  priceActionButtonBackgroundColor: "#1f2937",
-  priceActionButtonTextColor: "#e2e8f0",
-  priceActionButtonBorderColor: "#475569",
-  priceActionButtonBorderWidth: 1,
+  priceActionButtonSize: 16,
+  priceActionButtonGap: 4,
   priceActionButtonRounded: true,
-  priceActionButtonBorderRadius: 3
+  priceActionButtonBorderRadius: 8
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -107,6 +104,7 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   labelBorderRadius: 3,
   showCloseButton: true,
   widgetPosition: "left",
+  widgetPaddingRight: 10,
   draggable: false,
   actionButtonAction: "execute",
   actionButtonTextColor: "#dbeafe",
@@ -633,7 +631,16 @@ function createChart(element, options = {}) {
     const closeWidth = showCloseButton ? 24 : 0;
     const mainWidgetWidth = qtyWidth + centerWidth + closeWidth;
     const totalWidth = mainWidgetWidth + actionButtonsGap + actionButtonsTotalWidth;
-    const rightMarginInsideChart = 10;
+    const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
+    const crosshairActionInset = crosshair.visible && crosshair.showPriceLabel && crosshair.showPriceActionButton ? Math.max(
+      0,
+      Math.round(crosshair.priceActionButtonGap) + (clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4)) + 10) - 4
+    ) + 6 : 0;
+    const rightMarginInsideChart = Math.max(
+      0,
+      mergedLine.widgetPaddingRight,
+      crosshairActionInset
+    );
     const maxWidgetX = chartRight - totalWidth - rightMarginInsideChart;
     const leftWidgetXBase = chartLeft + 8;
     let leftWidgetX = leftWidgetXBase;
@@ -1151,35 +1158,79 @@ function createChart(element, options = {}) {
         strokeCrosshairLabel(priceX, priceY, priceWidth);
         drawText(priceText, priceX + labelPaddingX, priceY + labelHeight / 2, "left", "middle", labelTextColor);
         if (crosshair.showPriceActionButton) {
-          const buttonSize = clamp(Math.round(crosshair.priceActionButtonSize), 12, 30);
+          const buttonSize = clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4));
           const buttonGap = Math.max(0, Math.round(crosshair.priceActionButtonGap));
-          const buttonX = priceX - buttonGap - buttonSize;
+          const containerPaddingX = 5;
+          const containerWidth = buttonSize + containerPaddingX * 2;
+          const containerX = priceX - buttonGap - containerWidth;
+          const containerY = priceY;
+          const buttonX = containerX + containerPaddingX;
           const buttonY = priceY + (labelHeight - buttonSize) / 2;
           const buttonRadius = crosshair.priceActionButtonRounded ? clamp(Math.round(crosshair.priceActionButtonBorderRadius), 0, buttonSize / 2) : 0;
-          const buttonBorderWidth = Math.max(0, Math.round(crosshair.priceActionButtonBorderWidth));
-          ctx.fillStyle = crosshair.priceActionButtonBackgroundColor;
-          fillRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+          const buttonBorderWidth = Math.max(1, Math.round(labelBorderWidth || 1));
+          const buttonCenterX = buttonX + buttonSize / 2;
+          const buttonCenterY = buttonY + buttonSize / 2;
+          const containerRadius = labelRadius;
+          ctx.fillStyle = labelBackground;
+          fillRoundedRect(Math.round(containerX), Math.round(containerY), containerWidth, labelHeight, containerRadius);
+          if (labelBorderWidth > 0) {
+            ctx.save();
+            ctx.strokeStyle = labelBorderColor;
+            ctx.lineWidth = labelBorderWidth;
+            ctx.setLineDash([]);
+            strokeRoundedRect(Math.round(containerX), Math.round(containerY), containerWidth, labelHeight, containerRadius);
+            ctx.restore();
+          }
           if (buttonBorderWidth > 0) {
             ctx.save();
-            ctx.strokeStyle = crosshair.priceActionButtonBorderColor;
+            ctx.strokeStyle = labelBorderColor;
             ctx.lineWidth = buttonBorderWidth;
             ctx.setLineDash([]);
-            strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+            if (crosshair.priceActionButtonRounded) {
+              ctx.beginPath();
+              ctx.arc(
+                buttonCenterX,
+                buttonCenterY,
+                Math.max(1, buttonSize / 2 - buttonBorderWidth / 2),
+                0,
+                Math.PI * 2
+              );
+              ctx.stroke();
+            } else {
+              strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+            }
+            ctx.restore();
+          }
+          if (crosshair.priceActionButtonIcon !== "text" && crosshair.priceActionButtonText === "+") {
+            const plusHalf = Math.max(3, Math.round(buttonSize * 0.22));
+            const plusThickness = crosshair.priceActionButtonIcon === "plusThin" ? Math.max(1, Math.round(buttonSize * 0.07)) : Math.max(1, Math.round(buttonSize * 0.1));
+            ctx.save();
+            ctx.strokeStyle = labelTextColor;
+            ctx.lineWidth = plusThickness;
+            ctx.lineCap = "round";
+            ctx.setLineDash([]);
+            ctx.beginPath();
+            ctx.moveTo(buttonCenterX - plusHalf, buttonCenterY);
+            ctx.lineTo(buttonCenterX + plusHalf, buttonCenterY);
+            ctx.moveTo(buttonCenterX, buttonCenterY - plusHalf);
+            ctx.lineTo(buttonCenterX, buttonCenterY + plusHalf);
+            ctx.stroke();
             ctx.restore();
+          } else {
+            drawText(
+              crosshair.priceActionButtonText,
+              buttonCenterX,
+              buttonCenterY,
+              "center",
+              "middle",
+              labelTextColor
+            );
           }
-          drawText(
-            crosshair.priceActionButtonText,
-            buttonX + buttonSize / 2,
-            buttonY + buttonSize / 2,
-            "center",
-            "middle",
-            crosshair.priceActionButtonTextColor
-          );
           crosshairPriceActionRegion = {
-            x: buttonX,
-            y: buttonY,
-            width: buttonSize,
-            height: buttonSize,
+            x: containerX,
+            y: containerY,
+            width: containerWidth,
+            height: labelHeight,
             price: Number(hoverPrice.toFixed(mergedOptions.priceDecimals))
           };
         }

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

@@ -72,13 +72,10 @@ interface CrosshairOptions {
     labelBorderWidth?: number;
     labelBorderStyle?: "solid" | "dotted" | "dashed";
     showPriceActionButton?: boolean;
+    priceActionButtonIcon?: "plus" | "plusThin" | "text";
     priceActionButtonText?: string;
     priceActionButtonSize?: number;
     priceActionButtonGap?: number;
-    priceActionButtonBackgroundColor?: string;
-    priceActionButtonTextColor?: string;
-    priceActionButtonBorderColor?: string;
-    priceActionButtonBorderWidth?: number;
     priceActionButtonRounded?: boolean;
     priceActionButtonBorderRadius?: number;
 }
@@ -129,6 +126,7 @@ interface OrderLineOptions {
     labelBorderRadius?: number;
     showCloseButton?: boolean;
     widgetPosition?: "left" | "center" | "right";
+    widgetPaddingRight?: number;
     draggable?: boolean;
     actionButtonText?: string;
     actionButtonAction?: "execute" | "cancel" | "close" | string;

package/dist/hyperprop-charting-library.js

@@ -29,15 +29,12 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   labelBorderWidth: 1,
   labelBorderStyle: "solid",
   showPriceActionButton: false,
+  priceActionButtonIcon: "plusThin",
   priceActionButtonText: "+",
-  priceActionButtonSize: 20,
-  priceActionButtonGap: 6,
-  priceActionButtonBackgroundColor: "#1f2937",
-  priceActionButtonTextColor: "#e2e8f0",
-  priceActionButtonBorderColor: "#475569",
-  priceActionButtonBorderWidth: 1,
+  priceActionButtonSize: 16,
+  priceActionButtonGap: 4,
   priceActionButtonRounded: true,
-  priceActionButtonBorderRadius: 3
+  priceActionButtonBorderRadius: 8
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -83,6 +80,7 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   labelBorderRadius: 3,
   showCloseButton: true,
   widgetPosition: "left",
+  widgetPaddingRight: 10,
   draggable: false,
   actionButtonAction: "execute",
   actionButtonTextColor: "#dbeafe",
@@ -609,7 +607,16 @@ function createChart(element, options = {}) {
     const closeWidth = showCloseButton ? 24 : 0;
     const mainWidgetWidth = qtyWidth + centerWidth + closeWidth;
     const totalWidth = mainWidgetWidth + actionButtonsGap + actionButtonsTotalWidth;
-    const rightMarginInsideChart = 10;
+    const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
+    const crosshairActionInset = crosshair.visible && crosshair.showPriceLabel && crosshair.showPriceActionButton ? Math.max(
+      0,
+      Math.round(crosshair.priceActionButtonGap) + (clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4)) + 10) - 4
+    ) + 6 : 0;
+    const rightMarginInsideChart = Math.max(
+      0,
+      mergedLine.widgetPaddingRight,
+      crosshairActionInset
+    );
     const maxWidgetX = chartRight - totalWidth - rightMarginInsideChart;
     const leftWidgetXBase = chartLeft + 8;
     let leftWidgetX = leftWidgetXBase;
@@ -1127,35 +1134,79 @@ function createChart(element, options = {}) {
         strokeCrosshairLabel(priceX, priceY, priceWidth);
         drawText(priceText, priceX + labelPaddingX, priceY + labelHeight / 2, "left", "middle", labelTextColor);
         if (crosshair.showPriceActionButton) {
-          const buttonSize = clamp(Math.round(crosshair.priceActionButtonSize), 12, 30);
+          const buttonSize = clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4));
           const buttonGap = Math.max(0, Math.round(crosshair.priceActionButtonGap));
-          const buttonX = priceX - buttonGap - buttonSize;
+          const containerPaddingX = 5;
+          const containerWidth = buttonSize + containerPaddingX * 2;
+          const containerX = priceX - buttonGap - containerWidth;
+          const containerY = priceY;
+          const buttonX = containerX + containerPaddingX;
           const buttonY = priceY + (labelHeight - buttonSize) / 2;
           const buttonRadius = crosshair.priceActionButtonRounded ? clamp(Math.round(crosshair.priceActionButtonBorderRadius), 0, buttonSize / 2) : 0;
-          const buttonBorderWidth = Math.max(0, Math.round(crosshair.priceActionButtonBorderWidth));
-          ctx.fillStyle = crosshair.priceActionButtonBackgroundColor;
-          fillRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+          const buttonBorderWidth = Math.max(1, Math.round(labelBorderWidth || 1));
+          const buttonCenterX = buttonX + buttonSize / 2;
+          const buttonCenterY = buttonY + buttonSize / 2;
+          const containerRadius = labelRadius;
+          ctx.fillStyle = labelBackground;
+          fillRoundedRect(Math.round(containerX), Math.round(containerY), containerWidth, labelHeight, containerRadius);
+          if (labelBorderWidth > 0) {
+            ctx.save();
+            ctx.strokeStyle = labelBorderColor;
+            ctx.lineWidth = labelBorderWidth;
+            ctx.setLineDash([]);
+            strokeRoundedRect(Math.round(containerX), Math.round(containerY), containerWidth, labelHeight, containerRadius);
+            ctx.restore();
+          }
           if (buttonBorderWidth > 0) {
             ctx.save();
-            ctx.strokeStyle = crosshair.priceActionButtonBorderColor;
+            ctx.strokeStyle = labelBorderColor;
             ctx.lineWidth = buttonBorderWidth;
             ctx.setLineDash([]);
-            strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+            if (crosshair.priceActionButtonRounded) {
+              ctx.beginPath();
+              ctx.arc(
+                buttonCenterX,
+                buttonCenterY,
+                Math.max(1, buttonSize / 2 - buttonBorderWidth / 2),
+                0,
+                Math.PI * 2
+              );
+              ctx.stroke();
+            } else {
+              strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+            }
+            ctx.restore();
+          }
+          if (crosshair.priceActionButtonIcon !== "text" && crosshair.priceActionButtonText === "+") {
+            const plusHalf = Math.max(3, Math.round(buttonSize * 0.22));
+            const plusThickness = crosshair.priceActionButtonIcon === "plusThin" ? Math.max(1, Math.round(buttonSize * 0.07)) : Math.max(1, Math.round(buttonSize * 0.1));
+            ctx.save();
+            ctx.strokeStyle = labelTextColor;
+            ctx.lineWidth = plusThickness;
+            ctx.lineCap = "round";
+            ctx.setLineDash([]);
+            ctx.beginPath();
+            ctx.moveTo(buttonCenterX - plusHalf, buttonCenterY);
+            ctx.lineTo(buttonCenterX + plusHalf, buttonCenterY);
+            ctx.moveTo(buttonCenterX, buttonCenterY - plusHalf);
+            ctx.lineTo(buttonCenterX, buttonCenterY + plusHalf);
+            ctx.stroke();
             ctx.restore();
+          } else {
+            drawText(
+              crosshair.priceActionButtonText,
+              buttonCenterX,
+              buttonCenterY,
+              "center",
+              "middle",
+              labelTextColor
+            );
           }
-          drawText(
-            crosshair.priceActionButtonText,
-            buttonX + buttonSize / 2,
-            buttonY + buttonSize / 2,
-            "center",
-            "middle",
-            crosshair.priceActionButtonTextColor
-          );
           crosshairPriceActionRegion = {
-            x: buttonX,
-            y: buttonY,
-            width: buttonSize,
-            height: buttonSize,
+            x: containerX,
+            y: containerY,
+            width: containerWidth,
+            height: labelHeight,
             price: Number(hoverPrice.toFixed(mergedOptions.priceDecimals))
           };
         }

package/dist/index.cjs

@@ -53,15 +53,12 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   labelBorderWidth: 1,
   labelBorderStyle: "solid",
   showPriceActionButton: false,
+  priceActionButtonIcon: "plusThin",
   priceActionButtonText: "+",
-  priceActionButtonSize: 20,
-  priceActionButtonGap: 6,
-  priceActionButtonBackgroundColor: "#1f2937",
-  priceActionButtonTextColor: "#e2e8f0",
-  priceActionButtonBorderColor: "#475569",
-  priceActionButtonBorderWidth: 1,
+  priceActionButtonSize: 16,
+  priceActionButtonGap: 4,
   priceActionButtonRounded: true,
-  priceActionButtonBorderRadius: 3
+  priceActionButtonBorderRadius: 8
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -107,6 +104,7 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   labelBorderRadius: 3,
   showCloseButton: true,
   widgetPosition: "left",
+  widgetPaddingRight: 10,
   draggable: false,
   actionButtonAction: "execute",
   actionButtonTextColor: "#dbeafe",
@@ -633,7 +631,16 @@ function createChart(element, options = {}) {
     const closeWidth = showCloseButton ? 24 : 0;
     const mainWidgetWidth = qtyWidth + centerWidth + closeWidth;
     const totalWidth = mainWidgetWidth + actionButtonsGap + actionButtonsTotalWidth;
-    const rightMarginInsideChart = 10;
+    const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
+    const crosshairActionInset = crosshair.visible && crosshair.showPriceLabel && crosshair.showPriceActionButton ? Math.max(
+      0,
+      Math.round(crosshair.priceActionButtonGap) + (clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4)) + 10) - 4
+    ) + 6 : 0;
+    const rightMarginInsideChart = Math.max(
+      0,
+      mergedLine.widgetPaddingRight,
+      crosshairActionInset
+    );
     const maxWidgetX = chartRight - totalWidth - rightMarginInsideChart;
     const leftWidgetXBase = chartLeft + 8;
     let leftWidgetX = leftWidgetXBase;
@@ -1151,35 +1158,79 @@ function createChart(element, options = {}) {
         strokeCrosshairLabel(priceX, priceY, priceWidth);
         drawText(priceText, priceX + labelPaddingX, priceY + labelHeight / 2, "left", "middle", labelTextColor);
         if (crosshair.showPriceActionButton) {
-          const buttonSize = clamp(Math.round(crosshair.priceActionButtonSize), 12, 30);
+          const buttonSize = clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4));
           const buttonGap = Math.max(0, Math.round(crosshair.priceActionButtonGap));
-          const buttonX = priceX - buttonGap - buttonSize;
+          const containerPaddingX = 5;
+          const containerWidth = buttonSize + containerPaddingX * 2;
+          const containerX = priceX - buttonGap - containerWidth;
+          const containerY = priceY;
+          const buttonX = containerX + containerPaddingX;
           const buttonY = priceY + (labelHeight - buttonSize) / 2;
           const buttonRadius = crosshair.priceActionButtonRounded ? clamp(Math.round(crosshair.priceActionButtonBorderRadius), 0, buttonSize / 2) : 0;
-          const buttonBorderWidth = Math.max(0, Math.round(crosshair.priceActionButtonBorderWidth));
-          ctx.fillStyle = crosshair.priceActionButtonBackgroundColor;
-          fillRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+          const buttonBorderWidth = Math.max(1, Math.round(labelBorderWidth || 1));
+          const buttonCenterX = buttonX + buttonSize / 2;
+          const buttonCenterY = buttonY + buttonSize / 2;
+          const containerRadius = labelRadius;
+          ctx.fillStyle = labelBackground;
+          fillRoundedRect(Math.round(containerX), Math.round(containerY), containerWidth, labelHeight, containerRadius);
+          if (labelBorderWidth > 0) {
+            ctx.save();
+            ctx.strokeStyle = labelBorderColor;
+            ctx.lineWidth = labelBorderWidth;
+            ctx.setLineDash([]);
+            strokeRoundedRect(Math.round(containerX), Math.round(containerY), containerWidth, labelHeight, containerRadius);
+            ctx.restore();
+          }
           if (buttonBorderWidth > 0) {
             ctx.save();
-            ctx.strokeStyle = crosshair.priceActionButtonBorderColor;
+            ctx.strokeStyle = labelBorderColor;
             ctx.lineWidth = buttonBorderWidth;
             ctx.setLineDash([]);
-            strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+            if (crosshair.priceActionButtonRounded) {
+              ctx.beginPath();
+              ctx.arc(
+                buttonCenterX,
+                buttonCenterY,
+                Math.max(1, buttonSize / 2 - buttonBorderWidth / 2),
+                0,
+                Math.PI * 2
+              );
+              ctx.stroke();
+            } else {
+              strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+            }
+            ctx.restore();
+          }
+          if (crosshair.priceActionButtonIcon !== "text" && crosshair.priceActionButtonText === "+") {
+            const plusHalf = Math.max(3, Math.round(buttonSize * 0.22));
+            const plusThickness = crosshair.priceActionButtonIcon === "plusThin" ? Math.max(1, Math.round(buttonSize * 0.07)) : Math.max(1, Math.round(buttonSize * 0.1));
+            ctx.save();
+            ctx.strokeStyle = labelTextColor;
+            ctx.lineWidth = plusThickness;
+            ctx.lineCap = "round";
+            ctx.setLineDash([]);
+            ctx.beginPath();
+            ctx.moveTo(buttonCenterX - plusHalf, buttonCenterY);
+            ctx.lineTo(buttonCenterX + plusHalf, buttonCenterY);
+            ctx.moveTo(buttonCenterX, buttonCenterY - plusHalf);
+            ctx.lineTo(buttonCenterX, buttonCenterY + plusHalf);
+            ctx.stroke();
             ctx.restore();
+          } else {
+            drawText(
+              crosshair.priceActionButtonText,
+              buttonCenterX,
+              buttonCenterY,
+              "center",
+              "middle",
+              labelTextColor
+            );
           }
-          drawText(
-            crosshair.priceActionButtonText,
-            buttonX + buttonSize / 2,
-            buttonY + buttonSize / 2,
-            "center",
-            "middle",
-            crosshair.priceActionButtonTextColor
-          );
           crosshairPriceActionRegion = {
-            x: buttonX,
-            y: buttonY,
-            width: buttonSize,
-            height: buttonSize,
+            x: containerX,
+            y: containerY,
+            width: containerWidth,
+            height: labelHeight,
             price: Number(hoverPrice.toFixed(mergedOptions.priceDecimals))
           };
         }

package/dist/index.d.cts

@@ -72,13 +72,10 @@ interface CrosshairOptions {
     labelBorderWidth?: number;
     labelBorderStyle?: "solid" | "dotted" | "dashed";
     showPriceActionButton?: boolean;
+    priceActionButtonIcon?: "plus" | "plusThin" | "text";
     priceActionButtonText?: string;
     priceActionButtonSize?: number;
     priceActionButtonGap?: number;
-    priceActionButtonBackgroundColor?: string;
-    priceActionButtonTextColor?: string;
-    priceActionButtonBorderColor?: string;
-    priceActionButtonBorderWidth?: number;
     priceActionButtonRounded?: boolean;
     priceActionButtonBorderRadius?: number;
 }
@@ -129,6 +126,7 @@ interface OrderLineOptions {
     labelBorderRadius?: number;
     showCloseButton?: boolean;
     widgetPosition?: "left" | "center" | "right";
+    widgetPaddingRight?: number;
     draggable?: boolean;
     actionButtonText?: string;
     actionButtonAction?: "execute" | "cancel" | "close" | string;

package/dist/index.d.ts

@@ -72,13 +72,10 @@ interface CrosshairOptions {
     labelBorderWidth?: number;
     labelBorderStyle?: "solid" | "dotted" | "dashed";
     showPriceActionButton?: boolean;
+    priceActionButtonIcon?: "plus" | "plusThin" | "text";
     priceActionButtonText?: string;
     priceActionButtonSize?: number;
     priceActionButtonGap?: number;
-    priceActionButtonBackgroundColor?: string;
-    priceActionButtonTextColor?: string;
-    priceActionButtonBorderColor?: string;
-    priceActionButtonBorderWidth?: number;
     priceActionButtonRounded?: boolean;
     priceActionButtonBorderRadius?: number;
 }
@@ -129,6 +126,7 @@ interface OrderLineOptions {
     labelBorderRadius?: number;
     showCloseButton?: boolean;
     widgetPosition?: "left" | "center" | "right";
+    widgetPaddingRight?: number;
     draggable?: boolean;
     actionButtonText?: string;
     actionButtonAction?: "execute" | "cancel" | "close" | string;

package/dist/index.js

@@ -29,15 +29,12 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   labelBorderWidth: 1,
   labelBorderStyle: "solid",
   showPriceActionButton: false,
+  priceActionButtonIcon: "plusThin",
   priceActionButtonText: "+",
-  priceActionButtonSize: 20,
-  priceActionButtonGap: 6,
-  priceActionButtonBackgroundColor: "#1f2937",
-  priceActionButtonTextColor: "#e2e8f0",
-  priceActionButtonBorderColor: "#475569",
-  priceActionButtonBorderWidth: 1,
+  priceActionButtonSize: 16,
+  priceActionButtonGap: 4,
   priceActionButtonRounded: true,
-  priceActionButtonBorderRadius: 3
+  priceActionButtonBorderRadius: 8
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -83,6 +80,7 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   labelBorderRadius: 3,
   showCloseButton: true,
   widgetPosition: "left",
+  widgetPaddingRight: 10,
   draggable: false,
   actionButtonAction: "execute",
   actionButtonTextColor: "#dbeafe",
@@ -609,7 +607,16 @@ function createChart(element, options = {}) {
     const closeWidth = showCloseButton ? 24 : 0;
     const mainWidgetWidth = qtyWidth + centerWidth + closeWidth;
     const totalWidth = mainWidgetWidth + actionButtonsGap + actionButtonsTotalWidth;
-    const rightMarginInsideChart = 10;
+    const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
+    const crosshairActionInset = crosshair.visible && crosshair.showPriceLabel && crosshair.showPriceActionButton ? Math.max(
+      0,
+      Math.round(crosshair.priceActionButtonGap) + (clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4)) + 10) - 4
+    ) + 6 : 0;
+    const rightMarginInsideChart = Math.max(
+      0,
+      mergedLine.widgetPaddingRight,
+      crosshairActionInset
+    );
     const maxWidgetX = chartRight - totalWidth - rightMarginInsideChart;
     const leftWidgetXBase = chartLeft + 8;
     let leftWidgetX = leftWidgetXBase;
@@ -1127,35 +1134,79 @@ function createChart(element, options = {}) {
         strokeCrosshairLabel(priceX, priceY, priceWidth);
         drawText(priceText, priceX + labelPaddingX, priceY + labelHeight / 2, "left", "middle", labelTextColor);
         if (crosshair.showPriceActionButton) {
-          const buttonSize = clamp(Math.round(crosshair.priceActionButtonSize), 12, 30);
+          const buttonSize = clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4));
           const buttonGap = Math.max(0, Math.round(crosshair.priceActionButtonGap));
-          const buttonX = priceX - buttonGap - buttonSize;
+          const containerPaddingX = 5;
+          const containerWidth = buttonSize + containerPaddingX * 2;
+          const containerX = priceX - buttonGap - containerWidth;
+          const containerY = priceY;
+          const buttonX = containerX + containerPaddingX;
           const buttonY = priceY + (labelHeight - buttonSize) / 2;
           const buttonRadius = crosshair.priceActionButtonRounded ? clamp(Math.round(crosshair.priceActionButtonBorderRadius), 0, buttonSize / 2) : 0;
-          const buttonBorderWidth = Math.max(0, Math.round(crosshair.priceActionButtonBorderWidth));
-          ctx.fillStyle = crosshair.priceActionButtonBackgroundColor;
-          fillRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+          const buttonBorderWidth = Math.max(1, Math.round(labelBorderWidth || 1));
+          const buttonCenterX = buttonX + buttonSize / 2;
+          const buttonCenterY = buttonY + buttonSize / 2;
+          const containerRadius = labelRadius;
+          ctx.fillStyle = labelBackground;
+          fillRoundedRect(Math.round(containerX), Math.round(containerY), containerWidth, labelHeight, containerRadius);
+          if (labelBorderWidth > 0) {
+            ctx.save();
+            ctx.strokeStyle = labelBorderColor;
+            ctx.lineWidth = labelBorderWidth;
+            ctx.setLineDash([]);
+            strokeRoundedRect(Math.round(containerX), Math.round(containerY), containerWidth, labelHeight, containerRadius);
+            ctx.restore();
+          }
           if (buttonBorderWidth > 0) {
             ctx.save();
-            ctx.strokeStyle = crosshair.priceActionButtonBorderColor;
+            ctx.strokeStyle = labelBorderColor;
             ctx.lineWidth = buttonBorderWidth;
             ctx.setLineDash([]);
-            strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+            if (crosshair.priceActionButtonRounded) {
+              ctx.beginPath();
+              ctx.arc(
+                buttonCenterX,
+                buttonCenterY,
+                Math.max(1, buttonSize / 2 - buttonBorderWidth / 2),
+                0,
+                Math.PI * 2
+              );
+              ctx.stroke();
+            } else {
+              strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+            }
+            ctx.restore();
+          }
+          if (crosshair.priceActionButtonIcon !== "text" && crosshair.priceActionButtonText === "+") {
+            const plusHalf = Math.max(3, Math.round(buttonSize * 0.22));
+            const plusThickness = crosshair.priceActionButtonIcon === "plusThin" ? Math.max(1, Math.round(buttonSize * 0.07)) : Math.max(1, Math.round(buttonSize * 0.1));
+            ctx.save();
+            ctx.strokeStyle = labelTextColor;
+            ctx.lineWidth = plusThickness;
+            ctx.lineCap = "round";
+            ctx.setLineDash([]);
+            ctx.beginPath();
+            ctx.moveTo(buttonCenterX - plusHalf, buttonCenterY);
+            ctx.lineTo(buttonCenterX + plusHalf, buttonCenterY);
+            ctx.moveTo(buttonCenterX, buttonCenterY - plusHalf);
+            ctx.lineTo(buttonCenterX, buttonCenterY + plusHalf);
+            ctx.stroke();
             ctx.restore();
+          } else {
+            drawText(
+              crosshair.priceActionButtonText,
+              buttonCenterX,
+              buttonCenterY,
+              "center",
+              "middle",
+              labelTextColor
+            );
           }
-          drawText(
-            crosshair.priceActionButtonText,
-            buttonX + buttonSize / 2,
-            buttonY + buttonSize / 2,
-            "center",
-            "middle",
-            crosshair.priceActionButtonTextColor
-          );
           crosshairPriceActionRegion = {
-            x: buttonX,
-            y: buttonY,
-            width: buttonSize,
-            height: buttonSize,
+            x: containerX,
+            y: containerY,
+            width: containerWidth,
+            height: labelHeight,
             price: Number(hoverPrice.toFixed(mergedOptions.priceDecimals))
           };
         }

package/docs/API.md

@@ -95,15 +95,14 @@ Top-level options:
 - `labelBorderWidth` (default `1`)
 - `labelBorderStyle` (`"solid" | "dotted" | "dashed"`, default `"solid"`)
 - `showPriceActionButton` (default `false`)
+- `priceActionButtonIcon` (`"plus" | "plusThin" | "text"`, default `"plusThin"`)
 - `priceActionButtonText` (default `"+"`)
-- `priceActionButtonSize` (default `20`)
-- `priceActionButtonGap` (default `6`)
-- `priceActionButtonBackgroundColor` (default `#1f2937`)
-- `priceActionButtonTextColor` (default `#e2e8f0`)
-- `priceActionButtonBorderColor` (default `#475569`)
-- `priceActionButtonBorderWidth` (default `1`)
+- `priceActionButtonSize` (default `16`)
+- `priceActionButtonGap` (default `4`)
 - `priceActionButtonRounded` (default `true`; set `false` for square corners)
-- `priceActionButtonBorderRadius` (default `3`)
+- `priceActionButtonBorderRadius` (default `8`)
+
+Note: the button and its container automatically inherit crosshair label colors/border for a consistent `[button-box][label]` look.
 
 ### `WatermarkOptions`
 
@@ -206,6 +205,7 @@ Common optional fields:
 - `labelBorderRadius?: number` (default `3`)
 - `showCloseButton?: boolean` (default `true`)
 - `widgetPosition?: "left" | "center" | "right"` (default `"left"`)
+- `widgetPaddingRight?: number` (default `10`, extra right margin when `widgetPosition` is `"right"`)
 - `draggable?: boolean` (default `false`)
 
 Legacy single action button:

package/docs/RECIPES.md

@@ -70,7 +70,7 @@ const chart = createChart(root, {
   crosshair: {
     showPriceActionButton: true,
     priceActionButtonText: "+",
-    priceActionButtonGap: 6
+    priceActionButtonGap: 4
   }
 });
 
@@ -86,8 +86,7 @@ Square style example:
 const chart = createChart(root, {
   crosshair: {
     showPriceActionButton: true,
-    priceActionButtonRounded: false,
-    priceActionButtonBorderRadius: 0
+    priceActionButtonRounded: false
   }
 });
 ```

package/package.json

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