hyperprop-charting-library 0.1.63 → 0.1.65

package/dist/hyperprop-charting-library.cjs

@@ -1065,6 +1065,10 @@ function createChart(element, options = {}) {
   }
   canvas.style.display = "block";
   canvas.style.touchAction = "none";
+  canvas.style.userSelect = "none";
+  canvas.style.setProperty("-webkit-user-select", "none");
+  canvas.style.setProperty("-webkit-touch-callout", "none");
+  canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
@@ -3518,10 +3522,15 @@ function createChart(element, options = {}) {
     }
     const midpoint = getMidpoint(first, second);
     const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    const startYMin = yMinOverride ?? drawState.yMin;
+    const startYMax = yMaxOverride ?? drawState.yMax;
     pinchZoomState = {
       startDistance: Math.max(1, getPointerDistance(first, second)),
       startSpan: xSpan,
-      anchorIndex: drawState.xStart + anchorRatio * xSpan
+      anchorIndex: drawState.xStart + anchorRatio * xSpan,
+      startMidpoint: midpoint,
+      startYMin,
+      startYMax
     };
     isDragging = false;
     dragMode = null;
@@ -3550,11 +3559,19 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
+    const startYRange = pinchZoomState.startYMax - pinchZoomState.startYMin || 1;
+    const priceShift = (midpoint.y - pinchZoomState.startMidpoint.y) / drawState.chartHeight * startYRange;
+    const clampedY = clampYRange(pinchZoomState.startYMin + priceShift, pinchZoomState.startYMax + priceShift);
+    yMinOverride = clampedY.min;
+    yMaxOverride = clampedY.max;
     updateFollowLatest(false);
     emitViewportChange();
     draw();
   };
   const onPointerDown = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -3653,12 +3670,29 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    pointerDownInfo = { pointerId: event.pointerId, x: point.x, y: point.y, region, moved: false };
+    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    pointerDownInfo = {
+      pointerId: event.pointerId,
+      pointerType: event.pointerType,
+      x: point.x,
+      y: point.y,
+      region,
+      moved: false,
+      crosshairDrag
+    };
     lastPointerX = point.x;
     lastPointerY = point.y;
     canvas.setPointerCapture(event.pointerId);
+    if (crosshairDrag) {
+      canvas.style.cursor = "crosshair";
+      setCrosshairPoint(point);
+      emitCrosshairMove(point.x, point.y, "plot");
+    }
   };
   const onPointerMove = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -3681,6 +3715,16 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (pointerDownInfo?.crosshairDrag && pointerDownInfo.pointerId === event.pointerId) {
+      if (getHitRegion(point.x, point.y) === "plot") {
+        canvas.style.cursor = "crosshair";
+        setCrosshairPoint(point);
+        emitCrosshairMove(point.x, point.y, "plot");
+        lastPointerX = point.x;
+        lastPointerY = point.y;
+      }
+      return;
+    }
     if (drawingDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -3894,7 +3938,13 @@ function createChart(element, options = {}) {
     activePointerId = null;
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
-      if (!pointerDownInfo.moved) {
+      if (pointerDownInfo.crosshairDrag) {
+        const point = getCanvasPoint(event);
+        if (getHitRegion(point.x, point.y) === "plot") {
+          setCrosshairPoint(point);
+          emitCrosshairMove(point.x, point.y, "plot");
+        }
+      } else if (!pointerDownInfo.moved) {
         const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
@@ -3941,6 +3991,7 @@ function createChart(element, options = {}) {
     zoomX(factor, point.x);
   };
   const onDoubleClick = (event) => {
+    event.preventDefault();
     if (!doubleClickEnabled) {
       return;
     }
@@ -3966,6 +4017,9 @@ function createChart(element, options = {}) {
     }
     resetViewport();
   };
+  const onContextMenu = (event) => {
+    event.preventDefault();
+  };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -3973,6 +4027,7 @@ function createChart(element, options = {}) {
   canvas.addEventListener("pointerleave", endPointerDrag);
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
+  canvas.addEventListener("contextmenu", onContextMenu);
   const updateOptions = (nextOptions) => {
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
@@ -4270,6 +4325,7 @@ function createChart(element, options = {}) {
     canvas.removeEventListener("pointerleave", endPointerDrag);
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dblclick", onDoubleClick);
+    canvas.removeEventListener("contextmenu", onContextMenu);
     element.innerHTML = "";
   };
   draw();

package/dist/hyperprop-charting-library.js

@@ -1041,6 +1041,10 @@ function createChart(element, options = {}) {
   }
   canvas.style.display = "block";
   canvas.style.touchAction = "none";
+  canvas.style.userSelect = "none";
+  canvas.style.setProperty("-webkit-user-select", "none");
+  canvas.style.setProperty("-webkit-touch-callout", "none");
+  canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
@@ -3494,10 +3498,15 @@ function createChart(element, options = {}) {
     }
     const midpoint = getMidpoint(first, second);
     const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    const startYMin = yMinOverride ?? drawState.yMin;
+    const startYMax = yMaxOverride ?? drawState.yMax;
     pinchZoomState = {
       startDistance: Math.max(1, getPointerDistance(first, second)),
       startSpan: xSpan,
-      anchorIndex: drawState.xStart + anchorRatio * xSpan
+      anchorIndex: drawState.xStart + anchorRatio * xSpan,
+      startMidpoint: midpoint,
+      startYMin,
+      startYMax
     };
     isDragging = false;
     dragMode = null;
@@ -3526,11 +3535,19 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
+    const startYRange = pinchZoomState.startYMax - pinchZoomState.startYMin || 1;
+    const priceShift = (midpoint.y - pinchZoomState.startMidpoint.y) / drawState.chartHeight * startYRange;
+    const clampedY = clampYRange(pinchZoomState.startYMin + priceShift, pinchZoomState.startYMax + priceShift);
+    yMinOverride = clampedY.min;
+    yMaxOverride = clampedY.max;
     updateFollowLatest(false);
     emitViewportChange();
     draw();
   };
   const onPointerDown = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -3629,12 +3646,29 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    pointerDownInfo = { pointerId: event.pointerId, x: point.x, y: point.y, region, moved: false };
+    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    pointerDownInfo = {
+      pointerId: event.pointerId,
+      pointerType: event.pointerType,
+      x: point.x,
+      y: point.y,
+      region,
+      moved: false,
+      crosshairDrag
+    };
     lastPointerX = point.x;
     lastPointerY = point.y;
     canvas.setPointerCapture(event.pointerId);
+    if (crosshairDrag) {
+      canvas.style.cursor = "crosshair";
+      setCrosshairPoint(point);
+      emitCrosshairMove(point.x, point.y, "plot");
+    }
   };
   const onPointerMove = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -3657,6 +3691,16 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (pointerDownInfo?.crosshairDrag && pointerDownInfo.pointerId === event.pointerId) {
+      if (getHitRegion(point.x, point.y) === "plot") {
+        canvas.style.cursor = "crosshair";
+        setCrosshairPoint(point);
+        emitCrosshairMove(point.x, point.y, "plot");
+        lastPointerX = point.x;
+        lastPointerY = point.y;
+      }
+      return;
+    }
     if (drawingDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -3870,7 +3914,13 @@ function createChart(element, options = {}) {
     activePointerId = null;
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
-      if (!pointerDownInfo.moved) {
+      if (pointerDownInfo.crosshairDrag) {
+        const point = getCanvasPoint(event);
+        if (getHitRegion(point.x, point.y) === "plot") {
+          setCrosshairPoint(point);
+          emitCrosshairMove(point.x, point.y, "plot");
+        }
+      } else if (!pointerDownInfo.moved) {
         const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
@@ -3917,6 +3967,7 @@ function createChart(element, options = {}) {
     zoomX(factor, point.x);
   };
   const onDoubleClick = (event) => {
+    event.preventDefault();
     if (!doubleClickEnabled) {
       return;
     }
@@ -3942,6 +3993,9 @@ function createChart(element, options = {}) {
     }
     resetViewport();
   };
+  const onContextMenu = (event) => {
+    event.preventDefault();
+  };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -3949,6 +4003,7 @@ function createChart(element, options = {}) {
   canvas.addEventListener("pointerleave", endPointerDrag);
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
+  canvas.addEventListener("contextmenu", onContextMenu);
   const updateOptions = (nextOptions) => {
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
@@ -4246,6 +4301,7 @@ function createChart(element, options = {}) {
     canvas.removeEventListener("pointerleave", endPointerDrag);
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dblclick", onDoubleClick);
+    canvas.removeEventListener("contextmenu", onContextMenu);
     element.innerHTML = "";
   };
   draw();

package/dist/index.cjs

@@ -1065,6 +1065,10 @@ function createChart(element, options = {}) {
   }
   canvas.style.display = "block";
   canvas.style.touchAction = "none";
+  canvas.style.userSelect = "none";
+  canvas.style.setProperty("-webkit-user-select", "none");
+  canvas.style.setProperty("-webkit-touch-callout", "none");
+  canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
@@ -3518,10 +3522,15 @@ function createChart(element, options = {}) {
     }
     const midpoint = getMidpoint(first, second);
     const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    const startYMin = yMinOverride ?? drawState.yMin;
+    const startYMax = yMaxOverride ?? drawState.yMax;
     pinchZoomState = {
       startDistance: Math.max(1, getPointerDistance(first, second)),
       startSpan: xSpan,
-      anchorIndex: drawState.xStart + anchorRatio * xSpan
+      anchorIndex: drawState.xStart + anchorRatio * xSpan,
+      startMidpoint: midpoint,
+      startYMin,
+      startYMax
     };
     isDragging = false;
     dragMode = null;
@@ -3550,11 +3559,19 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
+    const startYRange = pinchZoomState.startYMax - pinchZoomState.startYMin || 1;
+    const priceShift = (midpoint.y - pinchZoomState.startMidpoint.y) / drawState.chartHeight * startYRange;
+    const clampedY = clampYRange(pinchZoomState.startYMin + priceShift, pinchZoomState.startYMax + priceShift);
+    yMinOverride = clampedY.min;
+    yMaxOverride = clampedY.max;
     updateFollowLatest(false);
     emitViewportChange();
     draw();
   };
   const onPointerDown = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -3653,12 +3670,29 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    pointerDownInfo = { pointerId: event.pointerId, x: point.x, y: point.y, region, moved: false };
+    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    pointerDownInfo = {
+      pointerId: event.pointerId,
+      pointerType: event.pointerType,
+      x: point.x,
+      y: point.y,
+      region,
+      moved: false,
+      crosshairDrag
+    };
     lastPointerX = point.x;
     lastPointerY = point.y;
     canvas.setPointerCapture(event.pointerId);
+    if (crosshairDrag) {
+      canvas.style.cursor = "crosshair";
+      setCrosshairPoint(point);
+      emitCrosshairMove(point.x, point.y, "plot");
+    }
   };
   const onPointerMove = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -3681,6 +3715,16 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (pointerDownInfo?.crosshairDrag && pointerDownInfo.pointerId === event.pointerId) {
+      if (getHitRegion(point.x, point.y) === "plot") {
+        canvas.style.cursor = "crosshair";
+        setCrosshairPoint(point);
+        emitCrosshairMove(point.x, point.y, "plot");
+        lastPointerX = point.x;
+        lastPointerY = point.y;
+      }
+      return;
+    }
     if (drawingDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -3894,7 +3938,13 @@ function createChart(element, options = {}) {
     activePointerId = null;
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
-      if (!pointerDownInfo.moved) {
+      if (pointerDownInfo.crosshairDrag) {
+        const point = getCanvasPoint(event);
+        if (getHitRegion(point.x, point.y) === "plot") {
+          setCrosshairPoint(point);
+          emitCrosshairMove(point.x, point.y, "plot");
+        }
+      } else if (!pointerDownInfo.moved) {
         const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
@@ -3941,6 +3991,7 @@ function createChart(element, options = {}) {
     zoomX(factor, point.x);
   };
   const onDoubleClick = (event) => {
+    event.preventDefault();
     if (!doubleClickEnabled) {
       return;
     }
@@ -3966,6 +4017,9 @@ function createChart(element, options = {}) {
     }
     resetViewport();
   };
+  const onContextMenu = (event) => {
+    event.preventDefault();
+  };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -3973,6 +4027,7 @@ function createChart(element, options = {}) {
   canvas.addEventListener("pointerleave", endPointerDrag);
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
+  canvas.addEventListener("contextmenu", onContextMenu);
   const updateOptions = (nextOptions) => {
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
@@ -4270,6 +4325,7 @@ function createChart(element, options = {}) {
     canvas.removeEventListener("pointerleave", endPointerDrag);
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dblclick", onDoubleClick);
+    canvas.removeEventListener("contextmenu", onContextMenu);
     element.innerHTML = "";
   };
   draw();

package/dist/index.js

@@ -1041,6 +1041,10 @@ function createChart(element, options = {}) {
   }
   canvas.style.display = "block";
   canvas.style.touchAction = "none";
+  canvas.style.userSelect = "none";
+  canvas.style.setProperty("-webkit-user-select", "none");
+  canvas.style.setProperty("-webkit-touch-callout", "none");
+  canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
@@ -3494,10 +3498,15 @@ function createChart(element, options = {}) {
     }
     const midpoint = getMidpoint(first, second);
     const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    const startYMin = yMinOverride ?? drawState.yMin;
+    const startYMax = yMaxOverride ?? drawState.yMax;
     pinchZoomState = {
       startDistance: Math.max(1, getPointerDistance(first, second)),
       startSpan: xSpan,
-      anchorIndex: drawState.xStart + anchorRatio * xSpan
+      anchorIndex: drawState.xStart + anchorRatio * xSpan,
+      startMidpoint: midpoint,
+      startYMin,
+      startYMax
     };
     isDragging = false;
     dragMode = null;
@@ -3526,11 +3535,19 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
+    const startYRange = pinchZoomState.startYMax - pinchZoomState.startYMin || 1;
+    const priceShift = (midpoint.y - pinchZoomState.startMidpoint.y) / drawState.chartHeight * startYRange;
+    const clampedY = clampYRange(pinchZoomState.startYMin + priceShift, pinchZoomState.startYMax + priceShift);
+    yMinOverride = clampedY.min;
+    yMaxOverride = clampedY.max;
     updateFollowLatest(false);
     emitViewportChange();
     draw();
   };
   const onPointerDown = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -3629,12 +3646,29 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    pointerDownInfo = { pointerId: event.pointerId, x: point.x, y: point.y, region, moved: false };
+    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    pointerDownInfo = {
+      pointerId: event.pointerId,
+      pointerType: event.pointerType,
+      x: point.x,
+      y: point.y,
+      region,
+      moved: false,
+      crosshairDrag
+    };
     lastPointerX = point.x;
     lastPointerY = point.y;
     canvas.setPointerCapture(event.pointerId);
+    if (crosshairDrag) {
+      canvas.style.cursor = "crosshair";
+      setCrosshairPoint(point);
+      emitCrosshairMove(point.x, point.y, "plot");
+    }
   };
   const onPointerMove = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -3657,6 +3691,16 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (pointerDownInfo?.crosshairDrag && pointerDownInfo.pointerId === event.pointerId) {
+      if (getHitRegion(point.x, point.y) === "plot") {
+        canvas.style.cursor = "crosshair";
+        setCrosshairPoint(point);
+        emitCrosshairMove(point.x, point.y, "plot");
+        lastPointerX = point.x;
+        lastPointerY = point.y;
+      }
+      return;
+    }
     if (drawingDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -3870,7 +3914,13 @@ function createChart(element, options = {}) {
     activePointerId = null;
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
-      if (!pointerDownInfo.moved) {
+      if (pointerDownInfo.crosshairDrag) {
+        const point = getCanvasPoint(event);
+        if (getHitRegion(point.x, point.y) === "plot") {
+          setCrosshairPoint(point);
+          emitCrosshairMove(point.x, point.y, "plot");
+        }
+      } else if (!pointerDownInfo.moved) {
         const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
@@ -3917,6 +3967,7 @@ function createChart(element, options = {}) {
     zoomX(factor, point.x);
   };
   const onDoubleClick = (event) => {
+    event.preventDefault();
     if (!doubleClickEnabled) {
       return;
     }
@@ -3942,6 +3993,9 @@ function createChart(element, options = {}) {
     }
     resetViewport();
   };
+  const onContextMenu = (event) => {
+    event.preventDefault();
+  };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -3949,6 +4003,7 @@ function createChart(element, options = {}) {
   canvas.addEventListener("pointerleave", endPointerDrag);
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
+  canvas.addEventListener("contextmenu", onContextMenu);
   const updateOptions = (nextOptions) => {
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
@@ -4246,6 +4301,7 @@ function createChart(element, options = {}) {
     canvas.removeEventListener("pointerleave", endPointerDrag);
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dblclick", onDoubleClick);
+    canvas.removeEventListener("contextmenu", onContextMenu);
     element.innerHTML = "";
   };
   draw();

package/package.json

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