hyperprop-charting-library 0.1.62 → 0.1.64

package/dist/hyperprop-charting-library.cjs

@@ -1065,9 +1065,14 @@ 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 };
+  let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
   const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
@@ -1289,14 +1294,34 @@ function createChart(element, options = {}) {
     const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
     return `${integerPart}${decimalPart}`;
   };
+  const getMeasuredLabelWidth = (text, paddingX) => {
+    return Math.ceil(ctx.measureText(text).width) + paddingX * 2;
+  };
+  const getStabilizedNumericLabelWidth = (text, paddingX) => {
+    const measured = getMeasuredLabelWidth(text, paddingX);
+    if (!mergedOptions.stabilizePriceLabels || !/\d/.test(text)) {
+      return measured;
+    }
+    let stableWidth = measured;
+    for (const digit of ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]) {
+      stableWidth = Math.max(stableWidth, getMeasuredLabelWidth(text.replace(/\d/g, digit), paddingX));
+    }
+    return stableWidth;
+  };
   const getPriceLabelWidth = (priceText, paddingX) => {
-    const measured = Math.ceil(ctx.measureText(priceText).width) + paddingX * 2;
+    const measured = getStabilizedNumericLabelWidth(priceText, paddingX);
     if (!mergedOptions.stabilizePriceLabels) {
       return measured;
     }
-    const templateWidth = Math.ceil(ctx.measureText(getStabilizedPriceTemplate()).width) + paddingX * 2;
+    const templateWidth = getStabilizedNumericLabelWidth(getStabilizedPriceTemplate(), paddingX);
     return Math.max(measured, templateWidth);
   };
+  const getStableLabelWidth = (text, paddingX) => {
+    return getStabilizedNumericLabelWidth(text, paddingX);
+  };
+  const resetRightMarginCache = () => {
+    cachedRightMargin = margin.right;
+  };
   const parseData = (nextData) => {
     const dedupedByTime = /* @__PURE__ */ new Map();
     for (const point of nextData) {
@@ -1822,22 +1847,33 @@ function createChart(element, options = {}) {
     const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
     const estimateRightMargin = () => {
       const paddingX = Math.max(4, labels.labelPaddingX);
-      const measure = (text) => Math.ceil(ctx.measureText(text).width) + paddingX * 2;
       let required = margin.right - 1;
+      const includeWidth = (contentWidth) => {
+        if (Number.isFinite(contentWidth)) {
+          required = Math.max(required, contentWidth);
+        }
+      };
       const include = (text) => {
         const normalized = text?.trim();
         if (normalized) {
-          required = Math.max(required, measure(normalized));
+          includeWidth(getStableLabelWidth(normalized, paddingX));
+        }
+      };
+      const includePrice = (price) => {
+        if (Number.isFinite(price)) {
+          includeWidth(getPriceLabelWidth(formatPrice(price), paddingX));
         }
       };
       const ticker2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
       const lastPoint2 = data[data.length - 1];
       if ((ticker2.visible ?? true) && labels.showLastPrice && lastPoint2) {
-        include(formatPrice(lastPoint2.c));
+        const tickerPrice2 = ticker2.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint2.c;
+        includePrice(tickerPrice2);
         if (ticker2.labelSubtext) include(String(ticker2.labelSubtext));
         for (const subtext of ticker2.labelSubtexts ?? []) {
           include(String(subtext));
         }
+        if (ticker2.showCountdownInLabel) include("88:88");
       }
       if (labels.showSymbolName) {
         include(labels.symbolName);
@@ -1859,18 +1895,24 @@ function createChart(element, options = {}) {
       for (const line of priceLines) {
         const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
         if (mergedLine.visible && Number.isFinite(mergedLine.price)) {
-          include(mergedLine.label ?? formatPrice(mergedLine.price));
+          if (mergedLine.label) {
+            include(mergedLine.label);
+          } else {
+            includePrice(mergedLine.price);
+          }
         }
       }
       for (const line of orderLines) {
         const mergedLine = { ...DEFAULT_ORDER_LINE_OPTIONS, ...line };
         const renderPrice = mergedLine.behavior === "follow" && Number.isFinite(mergedLine.followPrice) ? mergedLine.followPrice : mergedLine.price;
         if (mergedLine.visible && Number.isFinite(renderPrice)) {
-          include(formatPrice(renderPrice));
+          includePrice(renderPrice);
         }
       }
       const maxRightMargin = Math.max(margin.right, width - margin.left - 160);
-      return Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      const nextRightMargin = Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      cachedRightMargin = Math.max(cachedRightMargin, nextRightMargin);
+      return Math.min(maxRightMargin, cachedRightMargin);
     };
     const rightMargin = estimateRightMargin();
     const chartLeft = margin.left;
@@ -3517,6 +3559,9 @@ function createChart(element, options = {}) {
     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);
@@ -3615,12 +3660,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);
@@ -3643,6 +3705,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;
@@ -3856,7 +3928,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,
@@ -3903,6 +3981,7 @@ function createChart(element, options = {}) {
     zoomX(factor, point.x);
   };
   const onDoubleClick = (event) => {
+    event.preventDefault();
     if (!doubleClickEnabled) {
       return;
     }
@@ -3928,6 +4007,9 @@ function createChart(element, options = {}) {
     }
     resetViewport();
   };
+  const onContextMenu = (event) => {
+    event.preventDefault();
+  };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -3935,6 +4017,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;
@@ -3943,6 +4026,7 @@ function createChart(element, options = {}) {
     width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
     height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
     const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
@@ -3969,6 +4053,7 @@ function createChart(element, options = {}) {
       height = nextHeight;
     }
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     draw();
   };
   const setData = (nextData) => {
@@ -3985,6 +4070,7 @@ function createChart(element, options = {}) {
       tickerPriceTarget = null;
       smoothedTickerVolume = null;
       tickerVolumeTarget = null;
+      resetRightMarginCache();
       resetYViewport();
       draw();
       return;
@@ -4018,6 +4104,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `line-${index + 1}`
     }));
+    resetRightMarginCache();
     draw();
   };
   const addPriceLine = (line) => {
@@ -4028,6 +4115,7 @@ function createChart(element, options = {}) {
   };
   const removePriceLine = (id) => {
     priceLines = priceLines.filter((line) => line.id !== id);
+    resetRightMarginCache();
     draw();
   };
   const setOrderLines = (lines) => {
@@ -4035,6 +4123,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `order-${index + 1}`
     }));
+    resetRightMarginCache();
     const activeIds = new Set(orderLines.map((line) => line.id));
     for (const id of Array.from(orderWidgetWidthById.keys())) {
       if (!activeIds.has(id)) {
@@ -4062,6 +4151,7 @@ function createChart(element, options = {}) {
     orderLines = orderLines.filter((line) => line.id !== id);
     orderWidgetWidthById.delete(id);
     orderPriceTagWidthById.delete(id);
+    resetRightMarginCache();
     draw();
   };
   const onOrderAction = (handler) => {
@@ -4225,6 +4315,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,9 +1041,14 @@ 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 };
+  let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
   const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
@@ -1265,14 +1270,34 @@ function createChart(element, options = {}) {
     const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
     return `${integerPart}${decimalPart}`;
   };
+  const getMeasuredLabelWidth = (text, paddingX) => {
+    return Math.ceil(ctx.measureText(text).width) + paddingX * 2;
+  };
+  const getStabilizedNumericLabelWidth = (text, paddingX) => {
+    const measured = getMeasuredLabelWidth(text, paddingX);
+    if (!mergedOptions.stabilizePriceLabels || !/\d/.test(text)) {
+      return measured;
+    }
+    let stableWidth = measured;
+    for (const digit of ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]) {
+      stableWidth = Math.max(stableWidth, getMeasuredLabelWidth(text.replace(/\d/g, digit), paddingX));
+    }
+    return stableWidth;
+  };
   const getPriceLabelWidth = (priceText, paddingX) => {
-    const measured = Math.ceil(ctx.measureText(priceText).width) + paddingX * 2;
+    const measured = getStabilizedNumericLabelWidth(priceText, paddingX);
     if (!mergedOptions.stabilizePriceLabels) {
       return measured;
     }
-    const templateWidth = Math.ceil(ctx.measureText(getStabilizedPriceTemplate()).width) + paddingX * 2;
+    const templateWidth = getStabilizedNumericLabelWidth(getStabilizedPriceTemplate(), paddingX);
     return Math.max(measured, templateWidth);
   };
+  const getStableLabelWidth = (text, paddingX) => {
+    return getStabilizedNumericLabelWidth(text, paddingX);
+  };
+  const resetRightMarginCache = () => {
+    cachedRightMargin = margin.right;
+  };
   const parseData = (nextData) => {
     const dedupedByTime = /* @__PURE__ */ new Map();
     for (const point of nextData) {
@@ -1798,22 +1823,33 @@ function createChart(element, options = {}) {
     const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
     const estimateRightMargin = () => {
       const paddingX = Math.max(4, labels.labelPaddingX);
-      const measure = (text) => Math.ceil(ctx.measureText(text).width) + paddingX * 2;
       let required = margin.right - 1;
+      const includeWidth = (contentWidth) => {
+        if (Number.isFinite(contentWidth)) {
+          required = Math.max(required, contentWidth);
+        }
+      };
       const include = (text) => {
         const normalized = text?.trim();
         if (normalized) {
-          required = Math.max(required, measure(normalized));
+          includeWidth(getStableLabelWidth(normalized, paddingX));
+        }
+      };
+      const includePrice = (price) => {
+        if (Number.isFinite(price)) {
+          includeWidth(getPriceLabelWidth(formatPrice(price), paddingX));
         }
       };
       const ticker2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
       const lastPoint2 = data[data.length - 1];
       if ((ticker2.visible ?? true) && labels.showLastPrice && lastPoint2) {
-        include(formatPrice(lastPoint2.c));
+        const tickerPrice2 = ticker2.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint2.c;
+        includePrice(tickerPrice2);
         if (ticker2.labelSubtext) include(String(ticker2.labelSubtext));
         for (const subtext of ticker2.labelSubtexts ?? []) {
           include(String(subtext));
         }
+        if (ticker2.showCountdownInLabel) include("88:88");
       }
       if (labels.showSymbolName) {
         include(labels.symbolName);
@@ -1835,18 +1871,24 @@ function createChart(element, options = {}) {
       for (const line of priceLines) {
         const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
         if (mergedLine.visible && Number.isFinite(mergedLine.price)) {
-          include(mergedLine.label ?? formatPrice(mergedLine.price));
+          if (mergedLine.label) {
+            include(mergedLine.label);
+          } else {
+            includePrice(mergedLine.price);
+          }
         }
       }
       for (const line of orderLines) {
         const mergedLine = { ...DEFAULT_ORDER_LINE_OPTIONS, ...line };
         const renderPrice = mergedLine.behavior === "follow" && Number.isFinite(mergedLine.followPrice) ? mergedLine.followPrice : mergedLine.price;
         if (mergedLine.visible && Number.isFinite(renderPrice)) {
-          include(formatPrice(renderPrice));
+          includePrice(renderPrice);
         }
       }
       const maxRightMargin = Math.max(margin.right, width - margin.left - 160);
-      return Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      const nextRightMargin = Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      cachedRightMargin = Math.max(cachedRightMargin, nextRightMargin);
+      return Math.min(maxRightMargin, cachedRightMargin);
     };
     const rightMargin = estimateRightMargin();
     const chartLeft = margin.left;
@@ -3493,6 +3535,9 @@ function createChart(element, options = {}) {
     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);
@@ -3591,12 +3636,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);
@@ -3619,6 +3681,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;
@@ -3832,7 +3904,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,
@@ -3879,6 +3957,7 @@ function createChart(element, options = {}) {
     zoomX(factor, point.x);
   };
   const onDoubleClick = (event) => {
+    event.preventDefault();
     if (!doubleClickEnabled) {
       return;
     }
@@ -3904,6 +3983,9 @@ function createChart(element, options = {}) {
     }
     resetViewport();
   };
+  const onContextMenu = (event) => {
+    event.preventDefault();
+  };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -3911,6 +3993,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;
@@ -3919,6 +4002,7 @@ function createChart(element, options = {}) {
     width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
     height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
     const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
@@ -3945,6 +4029,7 @@ function createChart(element, options = {}) {
       height = nextHeight;
     }
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     draw();
   };
   const setData = (nextData) => {
@@ -3961,6 +4046,7 @@ function createChart(element, options = {}) {
       tickerPriceTarget = null;
       smoothedTickerVolume = null;
       tickerVolumeTarget = null;
+      resetRightMarginCache();
       resetYViewport();
       draw();
       return;
@@ -3994,6 +4080,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `line-${index + 1}`
     }));
+    resetRightMarginCache();
     draw();
   };
   const addPriceLine = (line) => {
@@ -4004,6 +4091,7 @@ function createChart(element, options = {}) {
   };
   const removePriceLine = (id) => {
     priceLines = priceLines.filter((line) => line.id !== id);
+    resetRightMarginCache();
     draw();
   };
   const setOrderLines = (lines) => {
@@ -4011,6 +4099,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `order-${index + 1}`
     }));
+    resetRightMarginCache();
     const activeIds = new Set(orderLines.map((line) => line.id));
     for (const id of Array.from(orderWidgetWidthById.keys())) {
       if (!activeIds.has(id)) {
@@ -4038,6 +4127,7 @@ function createChart(element, options = {}) {
     orderLines = orderLines.filter((line) => line.id !== id);
     orderWidgetWidthById.delete(id);
     orderPriceTagWidthById.delete(id);
+    resetRightMarginCache();
     draw();
   };
   const onOrderAction = (handler) => {
@@ -4201,6 +4291,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,9 +1065,14 @@ 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 };
+  let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
   const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
@@ -1289,14 +1294,34 @@ function createChart(element, options = {}) {
     const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
     return `${integerPart}${decimalPart}`;
   };
+  const getMeasuredLabelWidth = (text, paddingX) => {
+    return Math.ceil(ctx.measureText(text).width) + paddingX * 2;
+  };
+  const getStabilizedNumericLabelWidth = (text, paddingX) => {
+    const measured = getMeasuredLabelWidth(text, paddingX);
+    if (!mergedOptions.stabilizePriceLabels || !/\d/.test(text)) {
+      return measured;
+    }
+    let stableWidth = measured;
+    for (const digit of ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]) {
+      stableWidth = Math.max(stableWidth, getMeasuredLabelWidth(text.replace(/\d/g, digit), paddingX));
+    }
+    return stableWidth;
+  };
   const getPriceLabelWidth = (priceText, paddingX) => {
-    const measured = Math.ceil(ctx.measureText(priceText).width) + paddingX * 2;
+    const measured = getStabilizedNumericLabelWidth(priceText, paddingX);
     if (!mergedOptions.stabilizePriceLabels) {
       return measured;
     }
-    const templateWidth = Math.ceil(ctx.measureText(getStabilizedPriceTemplate()).width) + paddingX * 2;
+    const templateWidth = getStabilizedNumericLabelWidth(getStabilizedPriceTemplate(), paddingX);
     return Math.max(measured, templateWidth);
   };
+  const getStableLabelWidth = (text, paddingX) => {
+    return getStabilizedNumericLabelWidth(text, paddingX);
+  };
+  const resetRightMarginCache = () => {
+    cachedRightMargin = margin.right;
+  };
   const parseData = (nextData) => {
     const dedupedByTime = /* @__PURE__ */ new Map();
     for (const point of nextData) {
@@ -1822,22 +1847,33 @@ function createChart(element, options = {}) {
     const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
     const estimateRightMargin = () => {
       const paddingX = Math.max(4, labels.labelPaddingX);
-      const measure = (text) => Math.ceil(ctx.measureText(text).width) + paddingX * 2;
       let required = margin.right - 1;
+      const includeWidth = (contentWidth) => {
+        if (Number.isFinite(contentWidth)) {
+          required = Math.max(required, contentWidth);
+        }
+      };
       const include = (text) => {
         const normalized = text?.trim();
         if (normalized) {
-          required = Math.max(required, measure(normalized));
+          includeWidth(getStableLabelWidth(normalized, paddingX));
+        }
+      };
+      const includePrice = (price) => {
+        if (Number.isFinite(price)) {
+          includeWidth(getPriceLabelWidth(formatPrice(price), paddingX));
         }
       };
       const ticker2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
       const lastPoint2 = data[data.length - 1];
       if ((ticker2.visible ?? true) && labels.showLastPrice && lastPoint2) {
-        include(formatPrice(lastPoint2.c));
+        const tickerPrice2 = ticker2.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint2.c;
+        includePrice(tickerPrice2);
         if (ticker2.labelSubtext) include(String(ticker2.labelSubtext));
         for (const subtext of ticker2.labelSubtexts ?? []) {
           include(String(subtext));
         }
+        if (ticker2.showCountdownInLabel) include("88:88");
       }
       if (labels.showSymbolName) {
         include(labels.symbolName);
@@ -1859,18 +1895,24 @@ function createChart(element, options = {}) {
       for (const line of priceLines) {
         const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
         if (mergedLine.visible && Number.isFinite(mergedLine.price)) {
-          include(mergedLine.label ?? formatPrice(mergedLine.price));
+          if (mergedLine.label) {
+            include(mergedLine.label);
+          } else {
+            includePrice(mergedLine.price);
+          }
         }
       }
       for (const line of orderLines) {
         const mergedLine = { ...DEFAULT_ORDER_LINE_OPTIONS, ...line };
         const renderPrice = mergedLine.behavior === "follow" && Number.isFinite(mergedLine.followPrice) ? mergedLine.followPrice : mergedLine.price;
         if (mergedLine.visible && Number.isFinite(renderPrice)) {
-          include(formatPrice(renderPrice));
+          includePrice(renderPrice);
         }
       }
       const maxRightMargin = Math.max(margin.right, width - margin.left - 160);
-      return Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      const nextRightMargin = Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      cachedRightMargin = Math.max(cachedRightMargin, nextRightMargin);
+      return Math.min(maxRightMargin, cachedRightMargin);
     };
     const rightMargin = estimateRightMargin();
     const chartLeft = margin.left;
@@ -3517,6 +3559,9 @@ function createChart(element, options = {}) {
     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);
@@ -3615,12 +3660,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);
@@ -3643,6 +3705,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;
@@ -3856,7 +3928,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,
@@ -3903,6 +3981,7 @@ function createChart(element, options = {}) {
     zoomX(factor, point.x);
   };
   const onDoubleClick = (event) => {
+    event.preventDefault();
     if (!doubleClickEnabled) {
       return;
     }
@@ -3928,6 +4007,9 @@ function createChart(element, options = {}) {
     }
     resetViewport();
   };
+  const onContextMenu = (event) => {
+    event.preventDefault();
+  };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -3935,6 +4017,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;
@@ -3943,6 +4026,7 @@ function createChart(element, options = {}) {
     width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
     height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
     const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
@@ -3969,6 +4053,7 @@ function createChart(element, options = {}) {
       height = nextHeight;
     }
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     draw();
   };
   const setData = (nextData) => {
@@ -3985,6 +4070,7 @@ function createChart(element, options = {}) {
       tickerPriceTarget = null;
       smoothedTickerVolume = null;
       tickerVolumeTarget = null;
+      resetRightMarginCache();
       resetYViewport();
       draw();
       return;
@@ -4018,6 +4104,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `line-${index + 1}`
     }));
+    resetRightMarginCache();
     draw();
   };
   const addPriceLine = (line) => {
@@ -4028,6 +4115,7 @@ function createChart(element, options = {}) {
   };
   const removePriceLine = (id) => {
     priceLines = priceLines.filter((line) => line.id !== id);
+    resetRightMarginCache();
     draw();
   };
   const setOrderLines = (lines) => {
@@ -4035,6 +4123,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `order-${index + 1}`
     }));
+    resetRightMarginCache();
     const activeIds = new Set(orderLines.map((line) => line.id));
     for (const id of Array.from(orderWidgetWidthById.keys())) {
       if (!activeIds.has(id)) {
@@ -4062,6 +4151,7 @@ function createChart(element, options = {}) {
     orderLines = orderLines.filter((line) => line.id !== id);
     orderWidgetWidthById.delete(id);
     orderPriceTagWidthById.delete(id);
+    resetRightMarginCache();
     draw();
   };
   const onOrderAction = (handler) => {
@@ -4225,6 +4315,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,9 +1041,14 @@ 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 };
+  let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
   const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
@@ -1265,14 +1270,34 @@ function createChart(element, options = {}) {
     const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
     return `${integerPart}${decimalPart}`;
   };
+  const getMeasuredLabelWidth = (text, paddingX) => {
+    return Math.ceil(ctx.measureText(text).width) + paddingX * 2;
+  };
+  const getStabilizedNumericLabelWidth = (text, paddingX) => {
+    const measured = getMeasuredLabelWidth(text, paddingX);
+    if (!mergedOptions.stabilizePriceLabels || !/\d/.test(text)) {
+      return measured;
+    }
+    let stableWidth = measured;
+    for (const digit of ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]) {
+      stableWidth = Math.max(stableWidth, getMeasuredLabelWidth(text.replace(/\d/g, digit), paddingX));
+    }
+    return stableWidth;
+  };
   const getPriceLabelWidth = (priceText, paddingX) => {
-    const measured = Math.ceil(ctx.measureText(priceText).width) + paddingX * 2;
+    const measured = getStabilizedNumericLabelWidth(priceText, paddingX);
     if (!mergedOptions.stabilizePriceLabels) {
       return measured;
     }
-    const templateWidth = Math.ceil(ctx.measureText(getStabilizedPriceTemplate()).width) + paddingX * 2;
+    const templateWidth = getStabilizedNumericLabelWidth(getStabilizedPriceTemplate(), paddingX);
     return Math.max(measured, templateWidth);
   };
+  const getStableLabelWidth = (text, paddingX) => {
+    return getStabilizedNumericLabelWidth(text, paddingX);
+  };
+  const resetRightMarginCache = () => {
+    cachedRightMargin = margin.right;
+  };
   const parseData = (nextData) => {
     const dedupedByTime = /* @__PURE__ */ new Map();
     for (const point of nextData) {
@@ -1798,22 +1823,33 @@ function createChart(element, options = {}) {
     const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
     const estimateRightMargin = () => {
       const paddingX = Math.max(4, labels.labelPaddingX);
-      const measure = (text) => Math.ceil(ctx.measureText(text).width) + paddingX * 2;
       let required = margin.right - 1;
+      const includeWidth = (contentWidth) => {
+        if (Number.isFinite(contentWidth)) {
+          required = Math.max(required, contentWidth);
+        }
+      };
       const include = (text) => {
         const normalized = text?.trim();
         if (normalized) {
-          required = Math.max(required, measure(normalized));
+          includeWidth(getStableLabelWidth(normalized, paddingX));
+        }
+      };
+      const includePrice = (price) => {
+        if (Number.isFinite(price)) {
+          includeWidth(getPriceLabelWidth(formatPrice(price), paddingX));
         }
       };
       const ticker2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
       const lastPoint2 = data[data.length - 1];
       if ((ticker2.visible ?? true) && labels.showLastPrice && lastPoint2) {
-        include(formatPrice(lastPoint2.c));
+        const tickerPrice2 = ticker2.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint2.c;
+        includePrice(tickerPrice2);
         if (ticker2.labelSubtext) include(String(ticker2.labelSubtext));
         for (const subtext of ticker2.labelSubtexts ?? []) {
           include(String(subtext));
         }
+        if (ticker2.showCountdownInLabel) include("88:88");
       }
       if (labels.showSymbolName) {
         include(labels.symbolName);
@@ -1835,18 +1871,24 @@ function createChart(element, options = {}) {
       for (const line of priceLines) {
         const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
         if (mergedLine.visible && Number.isFinite(mergedLine.price)) {
-          include(mergedLine.label ?? formatPrice(mergedLine.price));
+          if (mergedLine.label) {
+            include(mergedLine.label);
+          } else {
+            includePrice(mergedLine.price);
+          }
         }
       }
       for (const line of orderLines) {
         const mergedLine = { ...DEFAULT_ORDER_LINE_OPTIONS, ...line };
         const renderPrice = mergedLine.behavior === "follow" && Number.isFinite(mergedLine.followPrice) ? mergedLine.followPrice : mergedLine.price;
         if (mergedLine.visible && Number.isFinite(renderPrice)) {
-          include(formatPrice(renderPrice));
+          includePrice(renderPrice);
         }
       }
       const maxRightMargin = Math.max(margin.right, width - margin.left - 160);
-      return Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      const nextRightMargin = Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      cachedRightMargin = Math.max(cachedRightMargin, nextRightMargin);
+      return Math.min(maxRightMargin, cachedRightMargin);
     };
     const rightMargin = estimateRightMargin();
     const chartLeft = margin.left;
@@ -3493,6 +3535,9 @@ function createChart(element, options = {}) {
     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);
@@ -3591,12 +3636,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);
@@ -3619,6 +3681,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;
@@ -3832,7 +3904,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,
@@ -3879,6 +3957,7 @@ function createChart(element, options = {}) {
     zoomX(factor, point.x);
   };
   const onDoubleClick = (event) => {
+    event.preventDefault();
     if (!doubleClickEnabled) {
       return;
     }
@@ -3904,6 +3983,9 @@ function createChart(element, options = {}) {
     }
     resetViewport();
   };
+  const onContextMenu = (event) => {
+    event.preventDefault();
+  };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -3911,6 +3993,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;
@@ -3919,6 +4002,7 @@ function createChart(element, options = {}) {
     width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
     height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
     const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
@@ -3945,6 +4029,7 @@ function createChart(element, options = {}) {
       height = nextHeight;
     }
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     draw();
   };
   const setData = (nextData) => {
@@ -3961,6 +4046,7 @@ function createChart(element, options = {}) {
       tickerPriceTarget = null;
       smoothedTickerVolume = null;
       tickerVolumeTarget = null;
+      resetRightMarginCache();
       resetYViewport();
       draw();
       return;
@@ -3994,6 +4080,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `line-${index + 1}`
     }));
+    resetRightMarginCache();
     draw();
   };
   const addPriceLine = (line) => {
@@ -4004,6 +4091,7 @@ function createChart(element, options = {}) {
   };
   const removePriceLine = (id) => {
     priceLines = priceLines.filter((line) => line.id !== id);
+    resetRightMarginCache();
     draw();
   };
   const setOrderLines = (lines) => {
@@ -4011,6 +4099,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `order-${index + 1}`
     }));
+    resetRightMarginCache();
     const activeIds = new Set(orderLines.map((line) => line.id));
     for (const id of Array.from(orderWidgetWidthById.keys())) {
       if (!activeIds.has(id)) {
@@ -4038,6 +4127,7 @@ function createChart(element, options = {}) {
     orderLines = orderLines.filter((line) => line.id !== id);
     orderWidgetWidthById.delete(id);
     orderPriceTagWidthById.delete(id);
+    resetRightMarginCache();
     draw();
   };
   const onOrderAction = (handler) => {
@@ -4201,6 +4291,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.62",
+  "version": "0.1.64",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",