hyperprop-charting-library 0.1.16 → 0.1.17

package/README.md

@@ -60,6 +60,22 @@ const chart = createChart(root, {
 });
 ```
 
+## Crosshair "+" Button
+
+```ts
+const chart = createChart(root, {
+  crosshair: {
+    showPriceActionButton: true,
+    priceActionButtonRounded: false // square button
+  }
+});
+
+chart.onCrosshairPriceAction((event) => {
+  // Frontend decides what to do
+  console.log(event.price);
+});
+```
+
 ## Full Documentation
 
 - API reference: `docs/API.md`
@@ -74,7 +90,7 @@ const chart = createChart(root, {
 - `chart.setData(data)`
 - `chart.setPriceLines(lines)` / `chart.addPriceLine(line)` / `chart.removePriceLine(id)`
 - `chart.setOrderLines(lines)` / `chart.addOrderLine(line)` / `chart.updateOrderLine(id, patch)` / `chart.removeOrderLine(id)`
-- `chart.onOrderAction(handler)` / `chart.onChartClick(handler)` / `chart.onCrosshairMove(handler)`
+- `chart.onOrderAction(handler)` / `chart.onChartClick(handler)` / `chart.onCrosshairMove(handler)` / `chart.onCrosshairPriceAction(handler)`
 - `chart.setDoubleClickEnabled(enabled)` / `chart.setDoubleClickAction(action)`
 - `chart.zoomInX()` / `chart.zoomOutX()` / `chart.panX(bars)` / `chart.resetViewport()`
 - `chart.resize(width, height)` / `chart.destroy()`

package/dist/hyperprop-charting-library.cjs

@@ -51,7 +51,17 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   labelBorderRadius: 3,
   labelBorderColor: "#94a3b8",
   labelBorderWidth: 1,
-  labelBorderStyle: "solid"
+  labelBorderStyle: "solid",
+  showPriceActionButton: false,
+  priceActionButtonText: "+",
+  priceActionButtonSize: 20,
+  priceActionButtonGap: 6,
+  priceActionButtonBackgroundColor: "#1f2937",
+  priceActionButtonTextColor: "#e2e8f0",
+  priceActionButtonBorderColor: "#475569",
+  priceActionButtonBorderWidth: 1,
+  priceActionButtonRounded: true,
+  priceActionButtonBorderRadius: 3
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -163,10 +173,6 @@ var DEFAULT_OPTIONS = {
   },
   dashPatterns: DEFAULT_DASH_PATTERNS
 };
-var BRAND_LOGO_VIEWBOX_WIDTH = 190;
-var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
-var BRAND_LOGO_PATH_A = "M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z";
-var BRAND_LOGO_PATH_B = "M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z";
 function createChart(element, options = {}) {
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
@@ -211,6 +217,8 @@ function createChart(element, options = {}) {
   let orderActionHandler = null;
   let chartClickHandler = null;
   let crosshairMoveHandler = null;
+  let crosshairPriceActionHandler = null;
+  let crosshairPriceActionRegion = null;
   let orderActionRegions = [];
   let orderDragRegions = [];
   let generatedPriceLineId = 1;
@@ -223,8 +231,6 @@ function createChart(element, options = {}) {
   let yMaxOverride = null;
   let autoYMin = null;
   let autoYMax = null;
-  const brandLogoPathA = new Path2D(BRAND_LOGO_PATH_A);
-  const brandLogoPathB = new Path2D(BRAND_LOGO_PATH_B);
   let watermarkImageSrc = null;
   let watermarkImage = null;
   let watermarkImageReady = false;
@@ -802,6 +808,7 @@ function createChart(element, options = {}) {
   const draw = () => {
     orderActionRegions = [];
     orderDragRegions = [];
+    crosshairPriceActionRegion = null;
     const pixelRatio = getPixelRatio();
     canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
@@ -1107,17 +1114,6 @@ function createChart(element, options = {}) {
       });
       drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
     }
-    const brandLogoWidth = 34;
-    const brandLogoHeight = BRAND_LOGO_VIEWBOX_HEIGHT / BRAND_LOGO_VIEWBOX_WIDTH * brandLogoWidth;
-    const brandLogoX = chartLeft + 16;
-    const brandLogoY = chartBottom - brandLogoHeight - 10;
-    ctx.save();
-    ctx.translate(brandLogoX, brandLogoY);
-    ctx.scale(brandLogoWidth / BRAND_LOGO_VIEWBOX_WIDTH, brandLogoHeight / BRAND_LOGO_VIEWBOX_HEIGHT);
-    ctx.fillStyle = "#ffffff";
-    ctx.fill(brandLogoPathA);
-    ctx.fill(brandLogoPathB);
-    ctx.restore();
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
@@ -1154,6 +1150,39 @@ function createChart(element, options = {}) {
         fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, labelRadius);
         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 buttonGap = Math.max(0, Math.round(crosshair.priceActionButtonGap));
+          const buttonX = priceX - buttonGap - buttonSize;
+          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);
+          if (buttonBorderWidth > 0) {
+            ctx.save();
+            ctx.strokeStyle = crosshair.priceActionButtonBorderColor;
+            ctx.lineWidth = buttonBorderWidth;
+            ctx.setLineDash([]);
+            strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+            ctx.restore();
+          }
+          drawText(
+            crosshair.priceActionButtonText,
+            buttonX + buttonSize / 2,
+            buttonY + buttonSize / 2,
+            "center",
+            "middle",
+            crosshair.priceActionButtonTextColor
+          );
+          crosshairPriceActionRegion = {
+            x: buttonX,
+            y: buttonY,
+            width: buttonSize,
+            height: buttonSize,
+            price: Number(hoverPrice.toFixed(mergedOptions.priceDecimals))
+          };
+        }
       }
       if (crosshair.showTimeLabel) {
         const ratio = clamp((cx - chartLeft) / chartWidth, 0, 1);
@@ -1316,6 +1345,16 @@ function createChart(element, options = {}) {
       (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
     );
   };
+  const getCrosshairPriceActionRegion = (x, y) => {
+    if (!crosshairPriceActionRegion) {
+      return null;
+    }
+    const region = crosshairPriceActionRegion;
+    if (x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height) {
+      return region;
+    }
+    return null;
+  };
   const priceFromCanvasY = (y) => {
     if (!drawState) {
       return 0;
@@ -1381,6 +1420,15 @@ function createChart(element, options = {}) {
   let activePointerId = null;
   const onPointerDown = (event) => {
     const point = getCanvasPoint(event);
+    const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+    if (crosshairButtonRegion) {
+      crosshairPriceActionHandler?.({
+        x: point.x,
+        y: point.y,
+        price: crosshairButtonRegion.price
+      });
+      return;
+    }
     const orderRegion = getOrderActionRegion(point.x, point.y);
     if (orderRegion) {
       if (orderRegion.draggable) {
@@ -1493,6 +1541,11 @@ function createChart(element, options = {}) {
       return;
     }
     if (!isDragging || !dragMode) {
+      const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+      if (crosshairButtonRegion) {
+        canvas.style.cursor = "pointer";
+        return;
+      }
       const orderRegion = getOrderActionRegion(point.x, point.y);
       if (orderRegion) {
         canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
@@ -1746,6 +1799,9 @@ function createChart(element, options = {}) {
   const onCrosshairMove = (handler) => {
     crosshairMoveHandler = handler;
   };
+  const onCrosshairPriceAction = (handler) => {
+    crosshairPriceActionHandler = handler;
+  };
   const setDoubleClickEnabled = (enabled) => {
     doubleClickEnabled = enabled;
   };
@@ -1775,6 +1831,7 @@ function createChart(element, options = {}) {
     onOrderAction,
     onChartClick,
     onCrosshairMove,
+    onCrosshairPriceAction,
     zoomInX,
     zoomOutX,
     zoomInY,

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

@@ -71,6 +71,16 @@ interface CrosshairOptions {
     labelBorderColor?: string;
     labelBorderWidth?: number;
     labelBorderStyle?: "solid" | "dotted" | "dashed";
+    showPriceActionButton?: boolean;
+    priceActionButtonText?: string;
+    priceActionButtonSize?: number;
+    priceActionButtonGap?: number;
+    priceActionButtonBackgroundColor?: string;
+    priceActionButtonTextColor?: string;
+    priceActionButtonBorderColor?: string;
+    priceActionButtonBorderWidth?: number;
+    priceActionButtonRounded?: boolean;
+    priceActionButtonBorderRadius?: number;
 }
 interface WatermarkOptions {
     visible?: boolean;
@@ -178,6 +188,11 @@ interface CrosshairMoveEvent {
     time?: string;
     point?: OhlcDataPoint;
 }
+interface CrosshairPriceActionEvent {
+    x: number;
+    y: number;
+    price: number;
+}
 interface TickerLineOptions {
     visible?: boolean;
     style?: "solid" | "dotted" | "dashed";
@@ -199,6 +214,7 @@ interface ChartInstance {
     onOrderAction: (handler: ((event: OrderActionEvent) => void) | null) => void;
     onChartClick: (handler: ((event: ChartClickEvent) => void) | null) => void;
     onCrosshairMove: (handler: ((event: CrosshairMoveEvent) => void) | null) => void;
+    onCrosshairPriceAction: (handler: ((event: CrosshairPriceActionEvent) => void) | null) => void;
     zoomInX: (factor?: number) => void;
     zoomOutX: (factor?: number) => void;
     zoomInY: (factor?: number) => void;
@@ -222,4 +238,4 @@ interface OhlcDataPoint {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type DashPatternOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
+export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };

package/dist/hyperprop-charting-library.js

@@ -27,7 +27,17 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   labelBorderRadius: 3,
   labelBorderColor: "#94a3b8",
   labelBorderWidth: 1,
-  labelBorderStyle: "solid"
+  labelBorderStyle: "solid",
+  showPriceActionButton: false,
+  priceActionButtonText: "+",
+  priceActionButtonSize: 20,
+  priceActionButtonGap: 6,
+  priceActionButtonBackgroundColor: "#1f2937",
+  priceActionButtonTextColor: "#e2e8f0",
+  priceActionButtonBorderColor: "#475569",
+  priceActionButtonBorderWidth: 1,
+  priceActionButtonRounded: true,
+  priceActionButtonBorderRadius: 3
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -139,10 +149,6 @@ var DEFAULT_OPTIONS = {
   },
   dashPatterns: DEFAULT_DASH_PATTERNS
 };
-var BRAND_LOGO_VIEWBOX_WIDTH = 190;
-var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
-var BRAND_LOGO_PATH_A = "M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z";
-var BRAND_LOGO_PATH_B = "M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z";
 function createChart(element, options = {}) {
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
@@ -187,6 +193,8 @@ function createChart(element, options = {}) {
   let orderActionHandler = null;
   let chartClickHandler = null;
   let crosshairMoveHandler = null;
+  let crosshairPriceActionHandler = null;
+  let crosshairPriceActionRegion = null;
   let orderActionRegions = [];
   let orderDragRegions = [];
   let generatedPriceLineId = 1;
@@ -199,8 +207,6 @@ function createChart(element, options = {}) {
   let yMaxOverride = null;
   let autoYMin = null;
   let autoYMax = null;
-  const brandLogoPathA = new Path2D(BRAND_LOGO_PATH_A);
-  const brandLogoPathB = new Path2D(BRAND_LOGO_PATH_B);
   let watermarkImageSrc = null;
   let watermarkImage = null;
   let watermarkImageReady = false;
@@ -778,6 +784,7 @@ function createChart(element, options = {}) {
   const draw = () => {
     orderActionRegions = [];
     orderDragRegions = [];
+    crosshairPriceActionRegion = null;
     const pixelRatio = getPixelRatio();
     canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
@@ -1083,17 +1090,6 @@ function createChart(element, options = {}) {
       });
       drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
     }
-    const brandLogoWidth = 34;
-    const brandLogoHeight = BRAND_LOGO_VIEWBOX_HEIGHT / BRAND_LOGO_VIEWBOX_WIDTH * brandLogoWidth;
-    const brandLogoX = chartLeft + 16;
-    const brandLogoY = chartBottom - brandLogoHeight - 10;
-    ctx.save();
-    ctx.translate(brandLogoX, brandLogoY);
-    ctx.scale(brandLogoWidth / BRAND_LOGO_VIEWBOX_WIDTH, brandLogoHeight / BRAND_LOGO_VIEWBOX_HEIGHT);
-    ctx.fillStyle = "#ffffff";
-    ctx.fill(brandLogoPathA);
-    ctx.fill(brandLogoPathB);
-    ctx.restore();
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
@@ -1130,6 +1126,39 @@ function createChart(element, options = {}) {
         fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, labelRadius);
         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 buttonGap = Math.max(0, Math.round(crosshair.priceActionButtonGap));
+          const buttonX = priceX - buttonGap - buttonSize;
+          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);
+          if (buttonBorderWidth > 0) {
+            ctx.save();
+            ctx.strokeStyle = crosshair.priceActionButtonBorderColor;
+            ctx.lineWidth = buttonBorderWidth;
+            ctx.setLineDash([]);
+            strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+            ctx.restore();
+          }
+          drawText(
+            crosshair.priceActionButtonText,
+            buttonX + buttonSize / 2,
+            buttonY + buttonSize / 2,
+            "center",
+            "middle",
+            crosshair.priceActionButtonTextColor
+          );
+          crosshairPriceActionRegion = {
+            x: buttonX,
+            y: buttonY,
+            width: buttonSize,
+            height: buttonSize,
+            price: Number(hoverPrice.toFixed(mergedOptions.priceDecimals))
+          };
+        }
       }
       if (crosshair.showTimeLabel) {
         const ratio = clamp((cx - chartLeft) / chartWidth, 0, 1);
@@ -1292,6 +1321,16 @@ function createChart(element, options = {}) {
       (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
     );
   };
+  const getCrosshairPriceActionRegion = (x, y) => {
+    if (!crosshairPriceActionRegion) {
+      return null;
+    }
+    const region = crosshairPriceActionRegion;
+    if (x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height) {
+      return region;
+    }
+    return null;
+  };
   const priceFromCanvasY = (y) => {
     if (!drawState) {
       return 0;
@@ -1357,6 +1396,15 @@ function createChart(element, options = {}) {
   let activePointerId = null;
   const onPointerDown = (event) => {
     const point = getCanvasPoint(event);
+    const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+    if (crosshairButtonRegion) {
+      crosshairPriceActionHandler?.({
+        x: point.x,
+        y: point.y,
+        price: crosshairButtonRegion.price
+      });
+      return;
+    }
     const orderRegion = getOrderActionRegion(point.x, point.y);
     if (orderRegion) {
       if (orderRegion.draggable) {
@@ -1469,6 +1517,11 @@ function createChart(element, options = {}) {
       return;
     }
     if (!isDragging || !dragMode) {
+      const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+      if (crosshairButtonRegion) {
+        canvas.style.cursor = "pointer";
+        return;
+      }
       const orderRegion = getOrderActionRegion(point.x, point.y);
       if (orderRegion) {
         canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
@@ -1722,6 +1775,9 @@ function createChart(element, options = {}) {
   const onCrosshairMove = (handler) => {
     crosshairMoveHandler = handler;
   };
+  const onCrosshairPriceAction = (handler) => {
+    crosshairPriceActionHandler = handler;
+  };
   const setDoubleClickEnabled = (enabled) => {
     doubleClickEnabled = enabled;
   };
@@ -1751,6 +1807,7 @@ function createChart(element, options = {}) {
     onOrderAction,
     onChartClick,
     onCrosshairMove,
+    onCrosshairPriceAction,
     zoomInX,
     zoomOutX,
     zoomInY,

package/dist/index.cjs

@@ -51,7 +51,17 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   labelBorderRadius: 3,
   labelBorderColor: "#94a3b8",
   labelBorderWidth: 1,
-  labelBorderStyle: "solid"
+  labelBorderStyle: "solid",
+  showPriceActionButton: false,
+  priceActionButtonText: "+",
+  priceActionButtonSize: 20,
+  priceActionButtonGap: 6,
+  priceActionButtonBackgroundColor: "#1f2937",
+  priceActionButtonTextColor: "#e2e8f0",
+  priceActionButtonBorderColor: "#475569",
+  priceActionButtonBorderWidth: 1,
+  priceActionButtonRounded: true,
+  priceActionButtonBorderRadius: 3
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -163,10 +173,6 @@ var DEFAULT_OPTIONS = {
   },
   dashPatterns: DEFAULT_DASH_PATTERNS
 };
-var BRAND_LOGO_VIEWBOX_WIDTH = 190;
-var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
-var BRAND_LOGO_PATH_A = "M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z";
-var BRAND_LOGO_PATH_B = "M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z";
 function createChart(element, options = {}) {
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
@@ -211,6 +217,8 @@ function createChart(element, options = {}) {
   let orderActionHandler = null;
   let chartClickHandler = null;
   let crosshairMoveHandler = null;
+  let crosshairPriceActionHandler = null;
+  let crosshairPriceActionRegion = null;
   let orderActionRegions = [];
   let orderDragRegions = [];
   let generatedPriceLineId = 1;
@@ -223,8 +231,6 @@ function createChart(element, options = {}) {
   let yMaxOverride = null;
   let autoYMin = null;
   let autoYMax = null;
-  const brandLogoPathA = new Path2D(BRAND_LOGO_PATH_A);
-  const brandLogoPathB = new Path2D(BRAND_LOGO_PATH_B);
   let watermarkImageSrc = null;
   let watermarkImage = null;
   let watermarkImageReady = false;
@@ -802,6 +808,7 @@ function createChart(element, options = {}) {
   const draw = () => {
     orderActionRegions = [];
     orderDragRegions = [];
+    crosshairPriceActionRegion = null;
     const pixelRatio = getPixelRatio();
     canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
@@ -1107,17 +1114,6 @@ function createChart(element, options = {}) {
       });
       drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
     }
-    const brandLogoWidth = 34;
-    const brandLogoHeight = BRAND_LOGO_VIEWBOX_HEIGHT / BRAND_LOGO_VIEWBOX_WIDTH * brandLogoWidth;
-    const brandLogoX = chartLeft + 16;
-    const brandLogoY = chartBottom - brandLogoHeight - 10;
-    ctx.save();
-    ctx.translate(brandLogoX, brandLogoY);
-    ctx.scale(brandLogoWidth / BRAND_LOGO_VIEWBOX_WIDTH, brandLogoHeight / BRAND_LOGO_VIEWBOX_HEIGHT);
-    ctx.fillStyle = "#ffffff";
-    ctx.fill(brandLogoPathA);
-    ctx.fill(brandLogoPathB);
-    ctx.restore();
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
@@ -1154,6 +1150,39 @@ function createChart(element, options = {}) {
         fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, labelRadius);
         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 buttonGap = Math.max(0, Math.round(crosshair.priceActionButtonGap));
+          const buttonX = priceX - buttonGap - buttonSize;
+          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);
+          if (buttonBorderWidth > 0) {
+            ctx.save();
+            ctx.strokeStyle = crosshair.priceActionButtonBorderColor;
+            ctx.lineWidth = buttonBorderWidth;
+            ctx.setLineDash([]);
+            strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+            ctx.restore();
+          }
+          drawText(
+            crosshair.priceActionButtonText,
+            buttonX + buttonSize / 2,
+            buttonY + buttonSize / 2,
+            "center",
+            "middle",
+            crosshair.priceActionButtonTextColor
+          );
+          crosshairPriceActionRegion = {
+            x: buttonX,
+            y: buttonY,
+            width: buttonSize,
+            height: buttonSize,
+            price: Number(hoverPrice.toFixed(mergedOptions.priceDecimals))
+          };
+        }
       }
       if (crosshair.showTimeLabel) {
         const ratio = clamp((cx - chartLeft) / chartWidth, 0, 1);
@@ -1316,6 +1345,16 @@ function createChart(element, options = {}) {
       (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
     );
   };
+  const getCrosshairPriceActionRegion = (x, y) => {
+    if (!crosshairPriceActionRegion) {
+      return null;
+    }
+    const region = crosshairPriceActionRegion;
+    if (x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height) {
+      return region;
+    }
+    return null;
+  };
   const priceFromCanvasY = (y) => {
     if (!drawState) {
       return 0;
@@ -1381,6 +1420,15 @@ function createChart(element, options = {}) {
   let activePointerId = null;
   const onPointerDown = (event) => {
     const point = getCanvasPoint(event);
+    const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+    if (crosshairButtonRegion) {
+      crosshairPriceActionHandler?.({
+        x: point.x,
+        y: point.y,
+        price: crosshairButtonRegion.price
+      });
+      return;
+    }
     const orderRegion = getOrderActionRegion(point.x, point.y);
     if (orderRegion) {
       if (orderRegion.draggable) {
@@ -1493,6 +1541,11 @@ function createChart(element, options = {}) {
       return;
     }
     if (!isDragging || !dragMode) {
+      const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+      if (crosshairButtonRegion) {
+        canvas.style.cursor = "pointer";
+        return;
+      }
       const orderRegion = getOrderActionRegion(point.x, point.y);
       if (orderRegion) {
         canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
@@ -1746,6 +1799,9 @@ function createChart(element, options = {}) {
   const onCrosshairMove = (handler) => {
     crosshairMoveHandler = handler;
   };
+  const onCrosshairPriceAction = (handler) => {
+    crosshairPriceActionHandler = handler;
+  };
   const setDoubleClickEnabled = (enabled) => {
     doubleClickEnabled = enabled;
   };
@@ -1775,6 +1831,7 @@ function createChart(element, options = {}) {
     onOrderAction,
     onChartClick,
     onCrosshairMove,
+    onCrosshairPriceAction,
     zoomInX,
     zoomOutX,
     zoomInY,

package/dist/index.d.cts

@@ -71,6 +71,16 @@ interface CrosshairOptions {
     labelBorderColor?: string;
     labelBorderWidth?: number;
     labelBorderStyle?: "solid" | "dotted" | "dashed";
+    showPriceActionButton?: boolean;
+    priceActionButtonText?: string;
+    priceActionButtonSize?: number;
+    priceActionButtonGap?: number;
+    priceActionButtonBackgroundColor?: string;
+    priceActionButtonTextColor?: string;
+    priceActionButtonBorderColor?: string;
+    priceActionButtonBorderWidth?: number;
+    priceActionButtonRounded?: boolean;
+    priceActionButtonBorderRadius?: number;
 }
 interface WatermarkOptions {
     visible?: boolean;
@@ -178,6 +188,11 @@ interface CrosshairMoveEvent {
     time?: string;
     point?: OhlcDataPoint;
 }
+interface CrosshairPriceActionEvent {
+    x: number;
+    y: number;
+    price: number;
+}
 interface TickerLineOptions {
     visible?: boolean;
     style?: "solid" | "dotted" | "dashed";
@@ -199,6 +214,7 @@ interface ChartInstance {
     onOrderAction: (handler: ((event: OrderActionEvent) => void) | null) => void;
     onChartClick: (handler: ((event: ChartClickEvent) => void) | null) => void;
     onCrosshairMove: (handler: ((event: CrosshairMoveEvent) => void) | null) => void;
+    onCrosshairPriceAction: (handler: ((event: CrosshairPriceActionEvent) => void) | null) => void;
     zoomInX: (factor?: number) => void;
     zoomOutX: (factor?: number) => void;
     zoomInY: (factor?: number) => void;
@@ -222,4 +238,4 @@ interface OhlcDataPoint {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type DashPatternOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
+export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };

package/dist/index.d.ts

@@ -71,6 +71,16 @@ interface CrosshairOptions {
     labelBorderColor?: string;
     labelBorderWidth?: number;
     labelBorderStyle?: "solid" | "dotted" | "dashed";
+    showPriceActionButton?: boolean;
+    priceActionButtonText?: string;
+    priceActionButtonSize?: number;
+    priceActionButtonGap?: number;
+    priceActionButtonBackgroundColor?: string;
+    priceActionButtonTextColor?: string;
+    priceActionButtonBorderColor?: string;
+    priceActionButtonBorderWidth?: number;
+    priceActionButtonRounded?: boolean;
+    priceActionButtonBorderRadius?: number;
 }
 interface WatermarkOptions {
     visible?: boolean;
@@ -178,6 +188,11 @@ interface CrosshairMoveEvent {
     time?: string;
     point?: OhlcDataPoint;
 }
+interface CrosshairPriceActionEvent {
+    x: number;
+    y: number;
+    price: number;
+}
 interface TickerLineOptions {
     visible?: boolean;
     style?: "solid" | "dotted" | "dashed";
@@ -199,6 +214,7 @@ interface ChartInstance {
     onOrderAction: (handler: ((event: OrderActionEvent) => void) | null) => void;
     onChartClick: (handler: ((event: ChartClickEvent) => void) | null) => void;
     onCrosshairMove: (handler: ((event: CrosshairMoveEvent) => void) | null) => void;
+    onCrosshairPriceAction: (handler: ((event: CrosshairPriceActionEvent) => void) | null) => void;
     zoomInX: (factor?: number) => void;
     zoomOutX: (factor?: number) => void;
     zoomInY: (factor?: number) => void;
@@ -222,4 +238,4 @@ interface OhlcDataPoint {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type DashPatternOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
+export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };

package/dist/index.js

@@ -27,7 +27,17 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   labelBorderRadius: 3,
   labelBorderColor: "#94a3b8",
   labelBorderWidth: 1,
-  labelBorderStyle: "solid"
+  labelBorderStyle: "solid",
+  showPriceActionButton: false,
+  priceActionButtonText: "+",
+  priceActionButtonSize: 20,
+  priceActionButtonGap: 6,
+  priceActionButtonBackgroundColor: "#1f2937",
+  priceActionButtonTextColor: "#e2e8f0",
+  priceActionButtonBorderColor: "#475569",
+  priceActionButtonBorderWidth: 1,
+  priceActionButtonRounded: true,
+  priceActionButtonBorderRadius: 3
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -139,10 +149,6 @@ var DEFAULT_OPTIONS = {
   },
   dashPatterns: DEFAULT_DASH_PATTERNS
 };
-var BRAND_LOGO_VIEWBOX_WIDTH = 190;
-var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
-var BRAND_LOGO_PATH_A = "M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z";
-var BRAND_LOGO_PATH_B = "M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z";
 function createChart(element, options = {}) {
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
@@ -187,6 +193,8 @@ function createChart(element, options = {}) {
   let orderActionHandler = null;
   let chartClickHandler = null;
   let crosshairMoveHandler = null;
+  let crosshairPriceActionHandler = null;
+  let crosshairPriceActionRegion = null;
   let orderActionRegions = [];
   let orderDragRegions = [];
   let generatedPriceLineId = 1;
@@ -199,8 +207,6 @@ function createChart(element, options = {}) {
   let yMaxOverride = null;
   let autoYMin = null;
   let autoYMax = null;
-  const brandLogoPathA = new Path2D(BRAND_LOGO_PATH_A);
-  const brandLogoPathB = new Path2D(BRAND_LOGO_PATH_B);
   let watermarkImageSrc = null;
   let watermarkImage = null;
   let watermarkImageReady = false;
@@ -778,6 +784,7 @@ function createChart(element, options = {}) {
   const draw = () => {
     orderActionRegions = [];
     orderDragRegions = [];
+    crosshairPriceActionRegion = null;
     const pixelRatio = getPixelRatio();
     canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
@@ -1083,17 +1090,6 @@ function createChart(element, options = {}) {
       });
       drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
     }
-    const brandLogoWidth = 34;
-    const brandLogoHeight = BRAND_LOGO_VIEWBOX_HEIGHT / BRAND_LOGO_VIEWBOX_WIDTH * brandLogoWidth;
-    const brandLogoX = chartLeft + 16;
-    const brandLogoY = chartBottom - brandLogoHeight - 10;
-    ctx.save();
-    ctx.translate(brandLogoX, brandLogoY);
-    ctx.scale(brandLogoWidth / BRAND_LOGO_VIEWBOX_WIDTH, brandLogoHeight / BRAND_LOGO_VIEWBOX_HEIGHT);
-    ctx.fillStyle = "#ffffff";
-    ctx.fill(brandLogoPathA);
-    ctx.fill(brandLogoPathB);
-    ctx.restore();
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
@@ -1130,6 +1126,39 @@ function createChart(element, options = {}) {
         fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, labelRadius);
         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 buttonGap = Math.max(0, Math.round(crosshair.priceActionButtonGap));
+          const buttonX = priceX - buttonGap - buttonSize;
+          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);
+          if (buttonBorderWidth > 0) {
+            ctx.save();
+            ctx.strokeStyle = crosshair.priceActionButtonBorderColor;
+            ctx.lineWidth = buttonBorderWidth;
+            ctx.setLineDash([]);
+            strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
+            ctx.restore();
+          }
+          drawText(
+            crosshair.priceActionButtonText,
+            buttonX + buttonSize / 2,
+            buttonY + buttonSize / 2,
+            "center",
+            "middle",
+            crosshair.priceActionButtonTextColor
+          );
+          crosshairPriceActionRegion = {
+            x: buttonX,
+            y: buttonY,
+            width: buttonSize,
+            height: buttonSize,
+            price: Number(hoverPrice.toFixed(mergedOptions.priceDecimals))
+          };
+        }
       }
       if (crosshair.showTimeLabel) {
         const ratio = clamp((cx - chartLeft) / chartWidth, 0, 1);
@@ -1292,6 +1321,16 @@ function createChart(element, options = {}) {
       (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
     );
   };
+  const getCrosshairPriceActionRegion = (x, y) => {
+    if (!crosshairPriceActionRegion) {
+      return null;
+    }
+    const region = crosshairPriceActionRegion;
+    if (x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height) {
+      return region;
+    }
+    return null;
+  };
   const priceFromCanvasY = (y) => {
     if (!drawState) {
       return 0;
@@ -1357,6 +1396,15 @@ function createChart(element, options = {}) {
   let activePointerId = null;
   const onPointerDown = (event) => {
     const point = getCanvasPoint(event);
+    const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+    if (crosshairButtonRegion) {
+      crosshairPriceActionHandler?.({
+        x: point.x,
+        y: point.y,
+        price: crosshairButtonRegion.price
+      });
+      return;
+    }
     const orderRegion = getOrderActionRegion(point.x, point.y);
     if (orderRegion) {
       if (orderRegion.draggable) {
@@ -1469,6 +1517,11 @@ function createChart(element, options = {}) {
       return;
     }
     if (!isDragging || !dragMode) {
+      const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+      if (crosshairButtonRegion) {
+        canvas.style.cursor = "pointer";
+        return;
+      }
       const orderRegion = getOrderActionRegion(point.x, point.y);
       if (orderRegion) {
         canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
@@ -1722,6 +1775,9 @@ function createChart(element, options = {}) {
   const onCrosshairMove = (handler) => {
     crosshairMoveHandler = handler;
   };
+  const onCrosshairPriceAction = (handler) => {
+    crosshairPriceActionHandler = handler;
+  };
   const setDoubleClickEnabled = (enabled) => {
     doubleClickEnabled = enabled;
   };
@@ -1751,6 +1807,7 @@ function createChart(element, options = {}) {
     onOrderAction,
     onChartClick,
     onCrosshairMove,
+    onCrosshairPriceAction,
     zoomInX,
     zoomOutX,
     zoomInY,

package/docs/API.md

@@ -94,6 +94,16 @@ Top-level options:
 - `labelBorderColor` (default `#94a3b8`)
 - `labelBorderWidth` (default `1`)
 - `labelBorderStyle` (`"solid" | "dotted" | "dashed"`, default `"solid"`)
+- `showPriceActionButton` (default `false`)
+- `priceActionButtonText` (default `"+"`)
+- `priceActionButtonSize` (default `20`)
+- `priceActionButtonGap` (default `6`)
+- `priceActionButtonBackgroundColor` (default `#1f2937`)
+- `priceActionButtonTextColor` (default `#e2e8f0`)
+- `priceActionButtonBorderColor` (default `#475569`)
+- `priceActionButtonBorderWidth` (default `1`)
+- `priceActionButtonRounded` (default `true`; set `false` for square corners)
+- `priceActionButtonBorderRadius` (default `3`)
 
 ### `WatermarkOptions`
 
@@ -243,6 +253,7 @@ Connector/fill visuals:
 - `onOrderAction(handler: ((event: OrderActionEvent) => void) | null): void`
 - `onChartClick(handler: ((event: ChartClickEvent) => void) | null): void`
 - `onCrosshairMove(handler: ((event: CrosshairMoveEvent) => void) | null): void`
+- `onCrosshairPriceAction(handler: ((event: CrosshairPriceActionEvent) => void) | null): void`
 - `zoomInX(factor?: number): void` (default factor `1.25`)
 - `zoomOutX(factor?: number): void` (default factor `1.25`)
 - `zoomInY(factor?: number): void` (default factor `1.25`)

package/docs/EVENTS.md

@@ -109,6 +109,33 @@ type CrosshairMoveEvent = {
 
 ---
 
+## `onCrosshairPriceAction`
+
+Register:
+
+```ts
+chart.onCrosshairPriceAction((event) => {
+  // frontend action (open order ticket, quick action, etc)
+});
+```
+
+Payload type:
+
+```ts
+type CrosshairPriceActionEvent = {
+  x: number;
+  y: number;
+  price: number;
+};
+```
+
+### Notes
+
+- Fires when the optional crosshair price action button (default text `"+"`) is clicked.
+- Enable button rendering via `crosshair.showPriceActionButton: true`.
+
+---
+
 ## Double-click integration
 
 Set behavior:

package/docs/RECIPES.md

@@ -63,6 +63,35 @@ const chart = createChart(root, {
 });
 ```
 
+## Add crosshair "+" action button
+
+```ts
+const chart = createChart(root, {
+  crosshair: {
+    showPriceActionButton: true,
+    priceActionButtonText: "+",
+    priceActionButtonGap: 6
+  }
+});
+
+chart.onCrosshairPriceAction((event) => {
+  // Handle in app/frontend (place order modal, quick ticket, etc.)
+  console.log("crosshair + clicked at price", event.price);
+});
+```
+
+Square style example:
+
+```ts
+const chart = createChart(root, {
+  crosshair: {
+    showPriceActionButton: true,
+    priceActionButtonRounded: false,
+    priceActionButtonBorderRadius: 0
+  }
+});
+```
+
 ## Add a draggable pending limit line
 
 ```ts

package/package.json

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