hyperprop-charting-library 0.1.134 → 0.1.135

package/dist/index.cjs

@@ -2970,8 +2970,11 @@ function createChart(element, options = {}) {
   );
   let activeDrawingTool = null;
   let draftDrawing = null;
+  let measureState = null;
   let drawingDragState = null;
   let drawingsChangeHandler = null;
+  let drawingToolChangeHandler = null;
+  let lastNotifiedDrawingTool = null;
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
   let drawingEditTextHandler = null;
@@ -3564,6 +3567,13 @@ function createChart(element, options = {}) {
         points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
       };
     }
+    if (measureState) {
+      measureState = {
+        ...measureState,
+        start: reanchorDrawingPoint(measureState.start),
+        end: reanchorDrawingPoint(measureState.end)
+      };
+    }
   };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
@@ -3665,6 +3675,22 @@ function createChart(element, options = {}) {
     const pad = (value) => String(value).padStart(2, "0");
     return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
   };
+  const formatTimeSpan = (ms) => {
+    const totalMinutes = Math.max(0, Math.round(ms / 6e4));
+    if (totalMinutes < 1) {
+      return `${Math.max(1, Math.round(ms / 1e3))}s`;
+    }
+    const days = Math.floor(totalMinutes / 1440);
+    const hours = Math.floor(totalMinutes % 1440 / 60);
+    const minutes = totalMinutes % 60;
+    if (days > 0) {
+      return hours > 0 ? `${days}d ${hours}h` : `${days}d`;
+    }
+    if (hours > 0) {
+      return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+    }
+    return `${minutes}m`;
+  };
   const getRightAxisLabelX = (chartRight) => chartRight + 1;
   const getRightAxisLabelWidth = (chartRight, contentWidth) => {
     const scaleWidth = Math.max(0, Math.floor(width - getRightAxisLabelX(chartRight)));
@@ -4033,6 +4059,10 @@ function createChart(element, options = {}) {
   let pendingDrawUpdateAutoScale = false;
   let pendingDrawOverlayOnly = true;
   const scheduleDraw = (options2 = {}) => {
+    if (activeDrawingTool !== lastNotifiedDrawingTool) {
+      lastNotifiedDrawingTool = activeDrawingTool;
+      drawingToolChangeHandler?.(activeDrawingTool);
+    }
     armCountdownHeartbeat();
     const overlayOnly = options2.overlayOnly ?? false;
     pendingDrawOverlayOnly = pendingDrawOverlayOnly && overlayOnly;
@@ -4845,7 +4875,7 @@ function createChart(element, options = {}) {
             const t0 = getTimeForIndex(Math.round(p0.index));
             const t1 = getTimeForIndex(Math.round(p1.index));
             const spanMs = t0 && t1 ? Math.abs(t1.getTime() - t0.getTime()) : 0;
-            labelLines.push(spanMs > 0 ? `${barSpan} bars, ${formatDuration(spanMs)}` : `${barSpan} bars`);
+            labelLines.push(spanMs > 0 ? `${barSpan} bars, ${formatTimeSpan(spanMs)}` : `${barSpan} bars`);
           }
           const pointValue = Number(drawing.pointValue);
           if (Number.isFinite(pointValue) && pointValue > 0) {
@@ -5322,6 +5352,96 @@ function createChart(element, options = {}) {
     if (draftDrawing) {
       drawDrawing(draftDrawing, true);
     }
+    if (measureState) {
+      const mStart = measureState.start;
+      const mEnd = measureState.end;
+      const mx0 = xFromDrawingPoint(mStart);
+      const mx1 = xFromDrawingPoint(mEnd);
+      const my0 = yFromPrice(mStart.price);
+      const my1 = yFromPrice(mEnd.price);
+      const mLeft = Math.min(mx0, mx1);
+      const mRight = Math.max(mx0, mx1);
+      const mTop = Math.min(my0, my1);
+      const mBottom = Math.max(my0, my1);
+      const mUp = mEnd.price >= mStart.price;
+      const mColor = mUp ? "#2962ff" : "#f23645";
+      ctx.save();
+      ctx.fillStyle = hexToRgba(mColor, 0.12);
+      ctx.fillRect(mLeft, mTop, Math.max(1, mRight - mLeft), Math.max(1, mBottom - mTop));
+      ctx.strokeStyle = mColor;
+      ctx.lineWidth = 1;
+      ctx.setLineDash([]);
+      const mArrowHead = 5;
+      const mMidX = (mLeft + mRight) / 2;
+      if (Math.abs(my1 - my0) > mArrowHead * 2) {
+        ctx.beginPath();
+        ctx.moveTo(crisp(mMidX), crisp(my0));
+        ctx.lineTo(crisp(mMidX), crisp(my1));
+        ctx.stroke();
+        const dirY = my1 > my0 ? 1 : -1;
+        ctx.beginPath();
+        ctx.moveTo(mMidX, my1);
+        ctx.lineTo(mMidX - mArrowHead, my1 - dirY * mArrowHead);
+        ctx.moveTo(mMidX, my1);
+        ctx.lineTo(mMidX + mArrowHead, my1 - dirY * mArrowHead);
+        ctx.stroke();
+      }
+      const mMidY = (mTop + mBottom) / 2;
+      if (Math.abs(mx1 - mx0) > mArrowHead * 2) {
+        ctx.beginPath();
+        ctx.moveTo(crisp(mx0), crisp(mMidY));
+        ctx.lineTo(crisp(mx1), crisp(mMidY));
+        ctx.stroke();
+        const dirX = mx1 > mx0 ? 1 : -1;
+        ctx.beginPath();
+        ctx.moveTo(mx1, mMidY);
+        ctx.lineTo(mx1 - dirX * mArrowHead, mMidY - mArrowHead);
+        ctx.moveTo(mx1, mMidY);
+        ctx.lineTo(mx1 - dirX * mArrowHead, mMidY + mArrowHead);
+        ctx.stroke();
+      }
+      const mDiff = mEnd.price - mStart.price;
+      const mBase = Math.abs(mStart.price) > 0 ? Math.abs(mStart.price) : 1;
+      const mPct = mDiff / mBase * 100;
+      const mTick = getConfiguredTickSize();
+      const mTicks = mTick > 0 ? Math.round(mDiff / mTick) : 0;
+      const mSigned = (value, text) => `${value < 0 ? "\u2212" : value > 0 ? "+" : ""}${text}`;
+      const mLines = [
+        mTick > 0 ? `${mSigned(mDiff, formatPrice(Math.abs(mDiff)))} (${mSigned(mPct, `${Math.abs(mPct).toFixed(2)}%`)}) ${mSigned(mTicks, String(Math.abs(mTicks)))}` : `${mSigned(mDiff, formatPrice(Math.abs(mDiff)))} (${mSigned(mPct, `${Math.abs(mPct).toFixed(2)}%`)})`
+      ];
+      const mBars = Math.round(mEnd.index) - Math.round(mStart.index);
+      const mT0 = getTimeForIndex(Math.round(mStart.index));
+      const mT1 = getTimeForIndex(Math.round(mEnd.index));
+      const mSpanMs = mT0 && mT1 ? Math.abs(mT1.getTime() - mT0.getTime()) : 0;
+      mLines.push(
+        mSpanMs > 0 ? `${mSigned(mBars, String(Math.abs(mBars)))} bars, ${formatTimeSpan(mSpanMs)}` : `${mSigned(mBars, String(Math.abs(mBars)))} bars`
+      );
+      const prevMeasureFont = ctx.font;
+      ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+      const mPad = 7;
+      const mLineHeight = 15;
+      const mTextW = Math.max(...mLines.map((line) => measureTextWidth(line)));
+      const mPillW = mTextW + mPad * 2;
+      const mPillH = mLines.length * mLineHeight + mPad;
+      const mPillX = clamp(mMidX - mPillW / 2, chartLeft + 2, chartLeft + chartWidth - mPillW - 2);
+      let mPillY = mUp ? mTop - 8 - mPillH : mBottom + 8;
+      if (mPillY < chartTop + 2) {
+        mPillY = mBottom + 8;
+      }
+      if (mPillY + mPillH > fullChartBottom - 2) {
+        mPillY = Math.max(chartTop + 2, mTop - 8 - mPillH);
+      }
+      ctx.fillStyle = mColor;
+      fillRoundedRect(mPillX, mPillY, mPillW, mPillH, 4);
+      ctx.fillStyle = "#ffffff";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      mLines.forEach((line, lineIndex) => {
+        ctx.fillText(line, mPillX + mPillW / 2, mPillY + mPad / 2 + lineIndex * mLineHeight + mLineHeight / 2);
+      });
+      ctx.font = prevMeasureFont;
+      ctx.restore();
+    }
     if (tradeMarkers.length > 0 && data.length > 0) {
       const visibleStart = Math.floor(xStart) - 1;
       const visibleEnd = Math.ceil(xStart + xSpan) + 1;
@@ -7320,6 +7440,19 @@ function createChart(element, options = {}) {
         return;
       }
     }
+    if (measureState) {
+      if (measureState.dragging) {
+        measureState = { ...measureState, dragging: false };
+        if (activeDrawingTool === "measure") {
+          activeDrawingTool = null;
+          canvas.style.cursor = "default";
+        }
+        scheduleDraw();
+        return;
+      }
+      measureState = null;
+      scheduleDraw();
+    }
     const drawingToolCapturesPointer = activeDrawingTool !== null || draftDrawing !== null;
     if (!drawingToolCapturesPointer) {
       const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
@@ -7394,6 +7527,18 @@ function createChart(element, options = {}) {
     if (region === "outside") {
       return;
     }
+    if (region === "plot" && (activeDrawingTool === "measure" || activeDrawingTool === null && draftDrawing === null && event.shiftKey && event.pointerType === "mouse")) {
+      const measurePoint = drawingPointFromCanvas(point.x, point.y);
+      if (measurePoint) {
+        measureState = { start: measurePoint, end: measurePoint, dragging: true };
+        activePointerId = event.pointerId;
+        capturePointer(event.pointerId);
+        setCrosshairPoint(null);
+        canvas.style.cursor = "crosshair";
+        scheduleDraw();
+        return;
+      }
+    }
     if (region === "plot" && !activeDrawingTool) {
       const drawingHit = getDrawingHit(point.x, point.y);
       if (drawingHit) {
@@ -7489,6 +7634,19 @@ function createChart(element, options = {}) {
       }
       return;
     }
+    if (measureState?.dragging) {
+      if (activePointerId !== null && event.pointerId !== activePointerId) {
+        return;
+      }
+      const nextMeasurePoint = drawingPointFromCanvas(point.x, point.y);
+      if (nextMeasurePoint) {
+        measureState = { ...measureState, end: nextMeasurePoint };
+        setCrosshairPoint(null);
+        canvas.style.cursor = "crosshair";
+        scheduleDraw();
+      }
+      return;
+    }
     if (drawingDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -7719,6 +7877,24 @@ function createChart(element, options = {}) {
     if (event && activePointerId !== null && event.pointerId !== activePointerId) {
       return;
     }
+    if (measureState?.dragging) {
+      const movedMeasure = measureState.start.index !== measureState.end.index || measureState.start.price !== measureState.end.price;
+      if (movedMeasure) {
+        measureState = { ...measureState, dragging: false };
+        if (activeDrawingTool === "measure") {
+          activeDrawingTool = null;
+        }
+        canvas.style.cursor = "default";
+      } else {
+        canvas.style.cursor = "crosshair";
+      }
+      isDragging = false;
+      dragMode = null;
+      activePointerId = null;
+      pointerDownInfo = null;
+      scheduleDraw();
+      return;
+    }
     if (orderDragState) {
       const moved = orderDragState.lastPrice !== orderDragState.startPrice;
       const finalLine = orderLines.find((line) => line.id === orderDragState?.orderId);
@@ -7899,6 +8075,15 @@ function createChart(element, options = {}) {
   canvas.addEventListener("dblclick", onDoubleClick);
   canvas.addEventListener("contextmenu", onContextMenu);
   const onModifierKeyChange = (event) => {
+    if (event.key === "Escape" && event.type === "keydown" && measureState) {
+      measureState = null;
+      if (activeDrawingTool === "measure") {
+        activeDrawingTool = null;
+        canvas.style.cursor = "default";
+      }
+      scheduleDraw();
+      return;
+    }
     const active = event.metaKey || event.ctrlKey;
     const shift = event.shiftKey;
     const changed = active !== magnetModifierActive || shift !== shiftKeyActive;
@@ -8211,17 +8396,29 @@ function createChart(element, options = {}) {
   const setActiveDrawingTool = (tool) => {
     activeDrawingTool = tool;
     draftDrawing = null;
+    measureState = null;
     canvas.style.cursor = tool ? "crosshair" : "default";
     scheduleDraw();
   };
   const getActiveDrawingTool = () => activeDrawingTool;
   const cancelDrawing = () => {
+    let cancelled = false;
     if (draftDrawing) {
       draftDrawing = null;
+      cancelled = true;
+    }
+    if (measureState) {
+      measureState = null;
+      if (activeDrawingTool === "measure") {
+        activeDrawingTool = null;
+        canvas.style.cursor = "default";
+      }
+      cancelled = true;
+    }
+    if (cancelled) {
       scheduleDraw();
-      return true;
     }
-    return false;
+    return cancelled;
   };
   const setTradeMarkers = (markers) => {
     tradeMarkers = Array.isArray(markers) ? markers.slice() : [];
@@ -8273,6 +8470,9 @@ function createChart(element, options = {}) {
   const onDrawingsChange = (handler) => {
     drawingsChangeHandler = handler;
   };
+  const onActiveDrawingToolChange = (handler) => {
+    drawingToolChangeHandler = handler;
+  };
   const onDrawingSelect = (handler) => {
     drawingSelectHandler = handler;
   };
@@ -8359,6 +8559,7 @@ function createChart(element, options = {}) {
     removeDrawing,
     clearDrawings,
     onDrawingsChange,
+    onActiveDrawingToolChange,
     onDrawingSelect,
     onDrawingDoubleClick,
     onDrawingEditText,

package/dist/index.d.cts

@@ -90,7 +90,15 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "rectangle" | "text" | "note";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "rectangle" | "text" | "note"
+/**
+ * TradingView-style ruler. Unlike every other tool it is transient: the
+ * measurement overlay is never added to the drawings list (no
+ * `onDrawingsChange`), and it clears on the next click, on Escape, or when
+ * the tool changes. Also reachable without arming the tool via Shift+drag
+ * on the plot.
+ */
+ | "measure";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -552,6 +560,14 @@ interface ChartInstance {
     removeDrawing: (id: string) => void;
     clearDrawings: () => void;
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
+    /**
+     * Fires whenever the active drawing tool changes — including when the chart
+     * auto-reverts to the cursor after a tool completes (every drawing tool does
+     * this once its shape is placed; the transient `measure` tool does it after
+     * every measurement). Lets host toolbars stay in sync without polling
+     * `getActiveDrawingTool()`.
+     */
+    onActiveDrawingToolChange: (handler: ((tool: DrawingToolType | null) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingEditText: (handler: ((event: DrawingSelectEvent) => void) | null) => void;

package/dist/index.d.ts

@@ -90,7 +90,15 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "rectangle" | "text" | "note";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "rectangle" | "text" | "note"
+/**
+ * TradingView-style ruler. Unlike every other tool it is transient: the
+ * measurement overlay is never added to the drawings list (no
+ * `onDrawingsChange`), and it clears on the next click, on Escape, or when
+ * the tool changes. Also reachable without arming the tool via Shift+drag
+ * on the plot.
+ */
+ | "measure";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -552,6 +560,14 @@ interface ChartInstance {
     removeDrawing: (id: string) => void;
     clearDrawings: () => void;
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
+    /**
+     * Fires whenever the active drawing tool changes — including when the chart
+     * auto-reverts to the cursor after a tool completes (every drawing tool does
+     * this once its shape is placed; the transient `measure` tool does it after
+     * every measurement). Lets host toolbars stay in sync without polling
+     * `getActiveDrawingTool()`.
+     */
+    onActiveDrawingToolChange: (handler: ((tool: DrawingToolType | null) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingEditText: (handler: ((event: DrawingSelectEvent) => void) | null) => void;

package/dist/index.js

@@ -2940,8 +2940,11 @@ function createChart(element, options = {}) {
   );
   let activeDrawingTool = null;
   let draftDrawing = null;
+  let measureState = null;
   let drawingDragState = null;
   let drawingsChangeHandler = null;
+  let drawingToolChangeHandler = null;
+  let lastNotifiedDrawingTool = null;
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
   let drawingEditTextHandler = null;
@@ -3534,6 +3537,13 @@ function createChart(element, options = {}) {
         points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
       };
     }
+    if (measureState) {
+      measureState = {
+        ...measureState,
+        start: reanchorDrawingPoint(measureState.start),
+        end: reanchorDrawingPoint(measureState.end)
+      };
+    }
   };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
@@ -3635,6 +3645,22 @@ function createChart(element, options = {}) {
     const pad = (value) => String(value).padStart(2, "0");
     return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
   };
+  const formatTimeSpan = (ms) => {
+    const totalMinutes = Math.max(0, Math.round(ms / 6e4));
+    if (totalMinutes < 1) {
+      return `${Math.max(1, Math.round(ms / 1e3))}s`;
+    }
+    const days = Math.floor(totalMinutes / 1440);
+    const hours = Math.floor(totalMinutes % 1440 / 60);
+    const minutes = totalMinutes % 60;
+    if (days > 0) {
+      return hours > 0 ? `${days}d ${hours}h` : `${days}d`;
+    }
+    if (hours > 0) {
+      return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+    }
+    return `${minutes}m`;
+  };
   const getRightAxisLabelX = (chartRight) => chartRight + 1;
   const getRightAxisLabelWidth = (chartRight, contentWidth) => {
     const scaleWidth = Math.max(0, Math.floor(width - getRightAxisLabelX(chartRight)));
@@ -4003,6 +4029,10 @@ function createChart(element, options = {}) {
   let pendingDrawUpdateAutoScale = false;
   let pendingDrawOverlayOnly = true;
   const scheduleDraw = (options2 = {}) => {
+    if (activeDrawingTool !== lastNotifiedDrawingTool) {
+      lastNotifiedDrawingTool = activeDrawingTool;
+      drawingToolChangeHandler?.(activeDrawingTool);
+    }
     armCountdownHeartbeat();
     const overlayOnly = options2.overlayOnly ?? false;
     pendingDrawOverlayOnly = pendingDrawOverlayOnly && overlayOnly;
@@ -4815,7 +4845,7 @@ function createChart(element, options = {}) {
             const t0 = getTimeForIndex(Math.round(p0.index));
             const t1 = getTimeForIndex(Math.round(p1.index));
             const spanMs = t0 && t1 ? Math.abs(t1.getTime() - t0.getTime()) : 0;
-            labelLines.push(spanMs > 0 ? `${barSpan} bars, ${formatDuration(spanMs)}` : `${barSpan} bars`);
+            labelLines.push(spanMs > 0 ? `${barSpan} bars, ${formatTimeSpan(spanMs)}` : `${barSpan} bars`);
           }
           const pointValue = Number(drawing.pointValue);
           if (Number.isFinite(pointValue) && pointValue > 0) {
@@ -5292,6 +5322,96 @@ function createChart(element, options = {}) {
     if (draftDrawing) {
       drawDrawing(draftDrawing, true);
     }
+    if (measureState) {
+      const mStart = measureState.start;
+      const mEnd = measureState.end;
+      const mx0 = xFromDrawingPoint(mStart);
+      const mx1 = xFromDrawingPoint(mEnd);
+      const my0 = yFromPrice(mStart.price);
+      const my1 = yFromPrice(mEnd.price);
+      const mLeft = Math.min(mx0, mx1);
+      const mRight = Math.max(mx0, mx1);
+      const mTop = Math.min(my0, my1);
+      const mBottom = Math.max(my0, my1);
+      const mUp = mEnd.price >= mStart.price;
+      const mColor = mUp ? "#2962ff" : "#f23645";
+      ctx.save();
+      ctx.fillStyle = hexToRgba(mColor, 0.12);
+      ctx.fillRect(mLeft, mTop, Math.max(1, mRight - mLeft), Math.max(1, mBottom - mTop));
+      ctx.strokeStyle = mColor;
+      ctx.lineWidth = 1;
+      ctx.setLineDash([]);
+      const mArrowHead = 5;
+      const mMidX = (mLeft + mRight) / 2;
+      if (Math.abs(my1 - my0) > mArrowHead * 2) {
+        ctx.beginPath();
+        ctx.moveTo(crisp(mMidX), crisp(my0));
+        ctx.lineTo(crisp(mMidX), crisp(my1));
+        ctx.stroke();
+        const dirY = my1 > my0 ? 1 : -1;
+        ctx.beginPath();
+        ctx.moveTo(mMidX, my1);
+        ctx.lineTo(mMidX - mArrowHead, my1 - dirY * mArrowHead);
+        ctx.moveTo(mMidX, my1);
+        ctx.lineTo(mMidX + mArrowHead, my1 - dirY * mArrowHead);
+        ctx.stroke();
+      }
+      const mMidY = (mTop + mBottom) / 2;
+      if (Math.abs(mx1 - mx0) > mArrowHead * 2) {
+        ctx.beginPath();
+        ctx.moveTo(crisp(mx0), crisp(mMidY));
+        ctx.lineTo(crisp(mx1), crisp(mMidY));
+        ctx.stroke();
+        const dirX = mx1 > mx0 ? 1 : -1;
+        ctx.beginPath();
+        ctx.moveTo(mx1, mMidY);
+        ctx.lineTo(mx1 - dirX * mArrowHead, mMidY - mArrowHead);
+        ctx.moveTo(mx1, mMidY);
+        ctx.lineTo(mx1 - dirX * mArrowHead, mMidY + mArrowHead);
+        ctx.stroke();
+      }
+      const mDiff = mEnd.price - mStart.price;
+      const mBase = Math.abs(mStart.price) > 0 ? Math.abs(mStart.price) : 1;
+      const mPct = mDiff / mBase * 100;
+      const mTick = getConfiguredTickSize();
+      const mTicks = mTick > 0 ? Math.round(mDiff / mTick) : 0;
+      const mSigned = (value, text) => `${value < 0 ? "\u2212" : value > 0 ? "+" : ""}${text}`;
+      const mLines = [
+        mTick > 0 ? `${mSigned(mDiff, formatPrice(Math.abs(mDiff)))} (${mSigned(mPct, `${Math.abs(mPct).toFixed(2)}%`)}) ${mSigned(mTicks, String(Math.abs(mTicks)))}` : `${mSigned(mDiff, formatPrice(Math.abs(mDiff)))} (${mSigned(mPct, `${Math.abs(mPct).toFixed(2)}%`)})`
+      ];
+      const mBars = Math.round(mEnd.index) - Math.round(mStart.index);
+      const mT0 = getTimeForIndex(Math.round(mStart.index));
+      const mT1 = getTimeForIndex(Math.round(mEnd.index));
+      const mSpanMs = mT0 && mT1 ? Math.abs(mT1.getTime() - mT0.getTime()) : 0;
+      mLines.push(
+        mSpanMs > 0 ? `${mSigned(mBars, String(Math.abs(mBars)))} bars, ${formatTimeSpan(mSpanMs)}` : `${mSigned(mBars, String(Math.abs(mBars)))} bars`
+      );
+      const prevMeasureFont = ctx.font;
+      ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+      const mPad = 7;
+      const mLineHeight = 15;
+      const mTextW = Math.max(...mLines.map((line) => measureTextWidth(line)));
+      const mPillW = mTextW + mPad * 2;
+      const mPillH = mLines.length * mLineHeight + mPad;
+      const mPillX = clamp(mMidX - mPillW / 2, chartLeft + 2, chartLeft + chartWidth - mPillW - 2);
+      let mPillY = mUp ? mTop - 8 - mPillH : mBottom + 8;
+      if (mPillY < chartTop + 2) {
+        mPillY = mBottom + 8;
+      }
+      if (mPillY + mPillH > fullChartBottom - 2) {
+        mPillY = Math.max(chartTop + 2, mTop - 8 - mPillH);
+      }
+      ctx.fillStyle = mColor;
+      fillRoundedRect(mPillX, mPillY, mPillW, mPillH, 4);
+      ctx.fillStyle = "#ffffff";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      mLines.forEach((line, lineIndex) => {
+        ctx.fillText(line, mPillX + mPillW / 2, mPillY + mPad / 2 + lineIndex * mLineHeight + mLineHeight / 2);
+      });
+      ctx.font = prevMeasureFont;
+      ctx.restore();
+    }
     if (tradeMarkers.length > 0 && data.length > 0) {
       const visibleStart = Math.floor(xStart) - 1;
       const visibleEnd = Math.ceil(xStart + xSpan) + 1;
@@ -7290,6 +7410,19 @@ function createChart(element, options = {}) {
         return;
       }
     }
+    if (measureState) {
+      if (measureState.dragging) {
+        measureState = { ...measureState, dragging: false };
+        if (activeDrawingTool === "measure") {
+          activeDrawingTool = null;
+          canvas.style.cursor = "default";
+        }
+        scheduleDraw();
+        return;
+      }
+      measureState = null;
+      scheduleDraw();
+    }
     const drawingToolCapturesPointer = activeDrawingTool !== null || draftDrawing !== null;
     if (!drawingToolCapturesPointer) {
       const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
@@ -7364,6 +7497,18 @@ function createChart(element, options = {}) {
     if (region === "outside") {
       return;
     }
+    if (region === "plot" && (activeDrawingTool === "measure" || activeDrawingTool === null && draftDrawing === null && event.shiftKey && event.pointerType === "mouse")) {
+      const measurePoint = drawingPointFromCanvas(point.x, point.y);
+      if (measurePoint) {
+        measureState = { start: measurePoint, end: measurePoint, dragging: true };
+        activePointerId = event.pointerId;
+        capturePointer(event.pointerId);
+        setCrosshairPoint(null);
+        canvas.style.cursor = "crosshair";
+        scheduleDraw();
+        return;
+      }
+    }
     if (region === "plot" && !activeDrawingTool) {
       const drawingHit = getDrawingHit(point.x, point.y);
       if (drawingHit) {
@@ -7459,6 +7604,19 @@ function createChart(element, options = {}) {
       }
       return;
     }
+    if (measureState?.dragging) {
+      if (activePointerId !== null && event.pointerId !== activePointerId) {
+        return;
+      }
+      const nextMeasurePoint = drawingPointFromCanvas(point.x, point.y);
+      if (nextMeasurePoint) {
+        measureState = { ...measureState, end: nextMeasurePoint };
+        setCrosshairPoint(null);
+        canvas.style.cursor = "crosshair";
+        scheduleDraw();
+      }
+      return;
+    }
     if (drawingDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -7689,6 +7847,24 @@ function createChart(element, options = {}) {
     if (event && activePointerId !== null && event.pointerId !== activePointerId) {
       return;
     }
+    if (measureState?.dragging) {
+      const movedMeasure = measureState.start.index !== measureState.end.index || measureState.start.price !== measureState.end.price;
+      if (movedMeasure) {
+        measureState = { ...measureState, dragging: false };
+        if (activeDrawingTool === "measure") {
+          activeDrawingTool = null;
+        }
+        canvas.style.cursor = "default";
+      } else {
+        canvas.style.cursor = "crosshair";
+      }
+      isDragging = false;
+      dragMode = null;
+      activePointerId = null;
+      pointerDownInfo = null;
+      scheduleDraw();
+      return;
+    }
     if (orderDragState) {
       const moved = orderDragState.lastPrice !== orderDragState.startPrice;
       const finalLine = orderLines.find((line) => line.id === orderDragState?.orderId);
@@ -7869,6 +8045,15 @@ function createChart(element, options = {}) {
   canvas.addEventListener("dblclick", onDoubleClick);
   canvas.addEventListener("contextmenu", onContextMenu);
   const onModifierKeyChange = (event) => {
+    if (event.key === "Escape" && event.type === "keydown" && measureState) {
+      measureState = null;
+      if (activeDrawingTool === "measure") {
+        activeDrawingTool = null;
+        canvas.style.cursor = "default";
+      }
+      scheduleDraw();
+      return;
+    }
     const active = event.metaKey || event.ctrlKey;
     const shift = event.shiftKey;
     const changed = active !== magnetModifierActive || shift !== shiftKeyActive;
@@ -8181,17 +8366,29 @@ function createChart(element, options = {}) {
   const setActiveDrawingTool = (tool) => {
     activeDrawingTool = tool;
     draftDrawing = null;
+    measureState = null;
     canvas.style.cursor = tool ? "crosshair" : "default";
     scheduleDraw();
   };
   const getActiveDrawingTool = () => activeDrawingTool;
   const cancelDrawing = () => {
+    let cancelled = false;
     if (draftDrawing) {
       draftDrawing = null;
+      cancelled = true;
+    }
+    if (measureState) {
+      measureState = null;
+      if (activeDrawingTool === "measure") {
+        activeDrawingTool = null;
+        canvas.style.cursor = "default";
+      }
+      cancelled = true;
+    }
+    if (cancelled) {
       scheduleDraw();
-      return true;
     }
-    return false;
+    return cancelled;
   };
   const setTradeMarkers = (markers) => {
     tradeMarkers = Array.isArray(markers) ? markers.slice() : [];
@@ -8243,6 +8440,9 @@ function createChart(element, options = {}) {
   const onDrawingsChange = (handler) => {
     drawingsChangeHandler = handler;
   };
+  const onActiveDrawingToolChange = (handler) => {
+    drawingToolChangeHandler = handler;
+  };
   const onDrawingSelect = (handler) => {
     drawingSelectHandler = handler;
   };
@@ -8329,6 +8529,7 @@ function createChart(element, options = {}) {
     removeDrawing,
     clearDrawings,
     onDrawingsChange,
+    onActiveDrawingToolChange,
     onDrawingSelect,
     onDrawingDoubleClick,
     onDrawingEditText,