hyperprop-charting-library 0.1.139 → 0.1.140

package/dist/index.cjs

@@ -2854,6 +2854,8 @@ var DEFAULT_OPTIONS = {
   keyboard: { enabled: true, panBars: 1, deleteSelectedDrawing: true },
   accessibility: { label: "Price chart", description: "", focusable: true },
   downsampling: { enabled: true, thresholdPx: 1.5 },
+  touch: { hitToleranceScale: 2.2, longPressTooltip: true, longPressMs: 400 },
+  datafeedOptions: { prefetchThresholdBars: 150, cooldownMs: 1200, chunkBars: 1500 },
   crosshair: DEFAULT_CROSSHAIR_OPTIONS,
   grid: DEFAULT_GRID_OPTIONS,
   watermark: DEFAULT_WATERMARK_OPTIONS,
@@ -2908,6 +2910,14 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
     ...baseOptions.downsampling,
     ...options.downsampling ?? {}
   },
+  touch: {
+    ...baseOptions.touch,
+    ...options.touch ?? {}
+  },
+  datafeedOptions: {
+    ...baseOptions.datafeedOptions,
+    ...options.datafeedOptions ?? {}
+  },
   crosshair: {
     ...baseOptions.crosshair,
     ...options.crosshair ?? {}
@@ -3082,6 +3092,7 @@ function createChart(element, options = {}) {
   let drawingDoubleClickHandler = null;
   let drawingEditTextHandler = null;
   let selectionChangeHandler = null;
+  let longPressHandler = null;
   let contextMenuHandler = null;
   let keyboardShortcutHandler = null;
   let lastSelectionSignature = null;
@@ -3841,6 +3852,92 @@ function createChart(element, options = {}) {
     scheduleDraw({ updateAutoScale: true });
   };
   const getCompareSeries = () => compareSeriesStates.map((state) => state.options);
+  let datafeed = null;
+  let datafeedUnsubscribe = null;
+  let datafeedLoading = false;
+  let datafeedExhausted = false;
+  let datafeedLastRequestAt = 0;
+  const estimateBarStepMs = () => {
+    if (mergedOptions.timeStepMs > 0) return mergedOptions.timeStepMs;
+    if (data.length < 2) return 6e4;
+    const span = data[data.length - 1].time.getTime() - data[0].time.getTime();
+    return Math.max(1e3, span / (data.length - 1));
+  };
+  const requestDatafeedBars = async (request) => {
+    if (!datafeed) return [];
+    try {
+      return await datafeed.getBars(request) ?? [];
+    } catch (error) {
+      datafeed.onError?.(error, request);
+      return [];
+    }
+  };
+  const maybeLoadOlderHistory = () => {
+    if (!datafeed || datafeedLoading || datafeedExhausted || data.length === 0) return;
+    const options2 = mergedOptions.datafeedOptions ?? DEFAULT_OPTIONS.datafeedOptions;
+    const threshold = options2?.prefetchThresholdBars ?? 150;
+    const cooldown = options2?.cooldownMs ?? 1200;
+    if (Date.now() - datafeedLastRequestAt < cooldown) return;
+    if (xCenter - xSpan / 2 > threshold) return;
+    const stepMs = estimateBarStepMs();
+    const chunk = Math.max(10, options2?.chunkBars ?? 1500);
+    const toMs = data[0].time.getTime();
+    datafeedLoading = true;
+    datafeedLastRequestAt = Date.now();
+    void requestDatafeedBars({
+      fromMs: toMs - chunk * stepMs,
+      toMs,
+      countBack: chunk,
+      firstRequest: false
+    }).then((bars) => {
+      const older = bars.filter((bar) => new Date(bar.t).getTime() < toMs);
+      if (older.length === 0) {
+        datafeedExhausted = true;
+        return;
+      }
+      const merged = [...older, ...data.map((bar) => ({
+        t: bar.time.toISOString(),
+        o: bar.o,
+        h: bar.h,
+        l: bar.l,
+        c: bar.c,
+        ...bar.v === void 0 ? {} : { v: bar.v }
+      }))];
+      setData(merged);
+    }).finally(() => {
+      datafeedLoading = false;
+    });
+  };
+  const setDatafeed = async (nextDatafeed) => {
+    datafeedUnsubscribe?.();
+    datafeedUnsubscribe = null;
+    datafeed = nextDatafeed;
+    datafeedExhausted = false;
+    datafeedLoading = false;
+    datafeedLastRequestAt = 0;
+    if (!nextDatafeed) return;
+    await nextDatafeed.onReady?.();
+    if (datafeed !== nextDatafeed) return;
+    const stepMs = estimateBarStepMs();
+    const countBack = Math.max(50, Math.round(mergedOptions.initialVisibleBars * 3));
+    const toMs = Date.now();
+    datafeedLoading = true;
+    const bars = await requestDatafeedBars({
+      fromMs: toMs - countBack * stepMs,
+      toMs,
+      countBack,
+      firstRequest: true
+    });
+    datafeedLoading = false;
+    if (datafeed !== nextDatafeed) return;
+    if (bars.length > 0) {
+      setData(bars);
+    }
+    const unsubscribe = nextDatafeed.subscribeBars?.((bar) => {
+      if (datafeed === nextDatafeed) upsertBar(bar);
+    });
+    datafeedUnsubscribe = typeof unsubscribe === "function" ? unsubscribe : null;
+  };
   const formatHoverTimeLabel = (time, mode) => {
     if (mode === "time") {
       return time.toLocaleTimeString(void 0, {
@@ -6835,6 +6932,7 @@ function createChart(element, options = {}) {
     };
     paintCrosshairOverlay();
     emitSelectionChangeIfMoved();
+    maybeLoadOlderHistory();
   };
   const paintCrosshairOverlay = () => {
     crosshairPriceActionRegion = null;
@@ -7027,6 +7125,67 @@ function createChart(element, options = {}) {
         drawText(timeText, timeX + labelPaddingX, timeY + timeHeight / 2, "left", "middle", labelTextColor);
       }
     }
+    if (longPressState && (mergedOptions.touch?.longPressTooltip ?? true)) {
+      const index = indexFromCanvasX(cx);
+      const bar = index === null ? void 0 : data[index];
+      if (bar) {
+        const barTime = getTimeForIndex(index);
+        const changeAbs = bar.c - bar.o;
+        const changePct = bar.o !== 0 ? changeAbs / bar.o * 100 : 0;
+        const rows = [
+          ["O", formatPrice(bar.o), null],
+          ["H", formatPrice(bar.h), null],
+          ["L", formatPrice(bar.l), null],
+          ["C", formatPrice(bar.c), null],
+          [
+            "Chg",
+            `${changeAbs >= 0 ? "+" : ""}${formatPrice(changeAbs)} (${changeAbs >= 0 ? "+" : ""}${changePct.toFixed(2)}%)`,
+            changeAbs >= 0 ? mergedOptions.upColor : mergedOptions.downColor
+          ]
+        ];
+        if (bar.v !== void 0) {
+          rows.push([
+            "Vol",
+            bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v)),
+            null
+          ]);
+        }
+        const prevFont = ctx.font;
+        const fontSize = 11;
+        ctx.font = `${fontSize}px ${mergedOptions.fontFamily}`;
+        const headerText = barTime ? formatHoverTimeLabel(barTime, "auto") : "";
+        const rowGap = 3;
+        const padding = 8;
+        const labelColumn = 26;
+        const contentWidth = Math.max(
+          measureTextWidth(headerText),
+          ...rows.map(([, value]) => labelColumn + measureTextWidth(value))
+        );
+        const boxWidth = Math.ceil(contentWidth) + padding * 2;
+        const boxHeight = padding * 2 + (fontSize + rowGap) * (rows.length + (headerText ? 1 : 0)) - rowGap;
+        const fingerGap = 26;
+        const boxX = cx + fingerGap + boxWidth <= chartRight ? cx + fingerGap : Math.max(chartLeft + 4, cx - fingerGap - boxWidth);
+        const boxY = clamp(cy - boxHeight - fingerGap, chartTop + 4, chartBottom - boxHeight - 4);
+        ctx.save();
+        ctx.fillStyle = "rgba(16,17,20,0.94)";
+        fillRoundedRect(Math.round(boxX), Math.round(boxY), boxWidth, boxHeight, 6);
+        ctx.strokeStyle = "rgba(255,255,255,0.14)";
+        ctx.lineWidth = 1;
+        ctx.strokeRect(Math.round(boxX) + 0.5, Math.round(boxY) + 0.5, boxWidth - 1, boxHeight - 1);
+        let textY = boxY + padding + fontSize / 2;
+        if (headerText) {
+          drawText(headerText, boxX + padding, textY, "left", "middle", "rgba(255,255,255,0.55)");
+          textY += fontSize + rowGap;
+        }
+        for (const [label, value, valueColor] of rows) {
+          drawText(label, boxX + padding, textY, "left", "middle", "rgba(255,255,255,0.5)");
+          drawText(value, boxX + padding + labelColumn, textY, "left", "middle", valueColor ?? "#e6e8ee");
+          textY += fontSize + rowGap;
+        }
+        ctx.restore();
+        ctx.font = prevFont;
+      }
+    }
   };
   const drawOverlayOnly = () => {
     if (!baseCtx || !overlayLayout || baseCanvas.width !== canvas.width || baseCanvas.height !== canvas.height || baseCanvas.width === 0) {
@@ -7536,6 +7695,7 @@ function createChart(element, options = {}) {
     return Math.hypot(x - (x1 + t * dx), y - (y1 + t * dy));
   };
   const getDrawingHit = (x, y) => {
+    const hitTolerance = touchInputActive ? Math.max(1, mergedOptions.touch?.hitToleranceScale ?? 2.2) : 1;
     for (let index = drawings.length - 1; index >= 0; index -= 1) {
       const drawing = drawings[index];
       if (!drawing?.visible) continue;
@@ -7544,10 +7704,10 @@ function createChart(element, options = {}) {
         if (!point) continue;
         const lineY = canvasYFromDrawingPrice(point.price);
         const handleX = drawState ? drawState.chartRight - 64 : 0;
-        if (Math.hypot(x - handleX, y - lineY) <= 8) {
+        if (Math.hypot(x - handleX, y - lineY) <= 8 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 0 };
         }
-        if (Math.abs(y - lineY) <= 7) {
+        if (Math.abs(y - lineY) <= 7 * hitTolerance) {
           return { drawing, target: "line" };
         }
       } else if (drawing.type === "vertical-line") {
@@ -7555,10 +7715,10 @@ function createChart(element, options = {}) {
         if (!point) continue;
         const lineX = canvasXFromDrawingPoint(point);
         const handleY = drawState ? (drawState.chartTop + drawState.chartBottom) / 2 : 0;
-        if (Math.hypot(x - lineX, y - handleY) <= 8) {
+        if (Math.hypot(x - lineX, y - handleY) <= 8 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 0 };
         }
-        if (Math.abs(x - lineX) <= 7) {
+        if (Math.abs(x - lineX) <= 7 * hitTolerance) {
           return { drawing, target: "line" };
         }
       } else if (drawing.type === "trendline") {
@@ -7569,13 +7729,13 @@ function createChart(element, options = {}) {
         const y1 = canvasYFromDrawingPrice(first.price);
         const x2 = canvasXFromDrawingPoint(second);
         const y2 = canvasYFromDrawingPrice(second.price);
-        if (Math.hypot(x - x1, y - y1) <= 8) {
+        if (Math.hypot(x - x1, y - y1) <= 8 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 0 };
         }
-        if (Math.hypot(x - x2, y - y2) <= 8) {
+        if (Math.hypot(x - x2, y - y2) <= 8 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 1 };
         }
-        if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+        if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6 * hitTolerance) {
           return { drawing, target: "line" };
         }
       } else if (drawing.type === "ray") {
@@ -7586,10 +7746,10 @@ function createChart(element, options = {}) {
         const y1 = canvasYFromDrawingPrice(first.price);
         const x2 = canvasXFromDrawingPoint(second);
         const y2 = canvasYFromDrawingPrice(second.price);
-        if (Math.hypot(x - x1, y - y1) <= 8) {
+        if (Math.hypot(x - x1, y - y1) <= 8 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 0 };
         }
-        if (Math.hypot(x - x2, y - y2) <= 8) {
+        if (Math.hypot(x - x2, y - y2) <= 8 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 1 };
         }
         const dx = x2 - x1;
@@ -7599,7 +7759,7 @@ function createChart(element, options = {}) {
           const t = Math.max(0, ((x - x1) * dx + (y - y1) * dy) / lengthSq);
           const projX = x1 + t * dx;
           const projY = y1 + t * dy;
-          if (Math.hypot(x - projX, y - projY) <= 6) {
+          if (Math.hypot(x - projX, y - projY) <= 6 * hitTolerance) {
             return { drawing, target: "line" };
           }
         }
@@ -7611,17 +7771,17 @@ function createChart(element, options = {}) {
         const y1 = canvasYFromDrawingPrice(first.price);
         const x2 = canvasXFromDrawingPoint(second);
         const y2 = canvasYFromDrawingPrice(second.price);
-        if (Math.hypot(x - x1, y - y1) <= 9) {
+        if (Math.hypot(x - x1, y - y1) <= 9 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 0 };
         }
-        if (Math.hypot(x - x2, y - y2) <= 9) {
+        if (Math.hypot(x - x2, y - y2) <= 9 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 1 };
         }
         const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
         for (const ratio of fibRatios) {
           const price = first.price + (second.price - first.price) * (1 - ratio);
           const lineY = canvasYFromDrawingPrice(price);
-          if (Math.abs(y - lineY) <= 5) {
+          if (Math.abs(y - lineY) <= 5 * hitTolerance) {
             return { drawing, target: "line" };
           }
         }
@@ -7634,30 +7794,30 @@ function createChart(element, options = {}) {
         const y0 = canvasYFromDrawingPrice(p0.price);
         const x1 = canvasXFromDrawingPoint(p1);
         const y1 = canvasYFromDrawingPrice(p1.price);
-        if (Math.hypot(x - x0, y - y0) <= 8) {
+        if (Math.hypot(x - x0, y - y0) <= 8 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 0 };
         }
-        if (Math.hypot(x - x1, y - y1) <= 8) {
+        if (Math.hypot(x - x1, y - y1) <= 8 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 1 };
         }
         if (p2) {
           const x2 = canvasXFromDrawingPoint(p2);
           const y2 = canvasYFromDrawingPrice(p2.price);
-          if (Math.hypot(x - x2, y - y2) <= 8) {
+          if (Math.hypot(x - x2, y - y2) <= 8 * hitTolerance) {
             return { drawing, target: "handle", pointIndex: 2 };
           }
           const move = p1.price - p0.price;
           const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
           for (const ratio of fibExtRatios) {
             const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
-            if (Math.abs(y - lineY) <= 5) {
+            if (Math.abs(y - lineY) <= 5 * hitTolerance) {
               return { drawing, target: "line" };
             }
           }
-          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 || distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 * hitTolerance || distanceToSegment(x, y, x1, y1, x2, y2) <= 6 * hitTolerance) {
             return { drawing, target: "line" };
           }
-        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
+        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 * hitTolerance) {
           return { drawing, target: "line" };
         }
       } else if (drawing.type === "long-position" || drawing.type === "short-position") {
@@ -7671,10 +7831,10 @@ function createChart(element, options = {}) {
         const entryY = canvasYFromDrawingPrice(entry.price);
         const targetY = canvasYFromDrawingPrice(target.price);
         const stopY = canvasYFromDrawingPrice(stop.price);
-        if (Math.hypot(x - leftX, y - targetY) <= 9) return { drawing, target: "handle", pointIndex: 1 };
-        if (Math.hypot(x - leftX, y - entryY) <= 9) return { drawing, target: "handle", pointIndex: 0 };
-        if (Math.hypot(x - leftX, y - stopY) <= 9) return { drawing, target: "handle", pointIndex: 2 };
-        if (Math.hypot(x - rightX, y - entryY) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        if (Math.hypot(x - leftX, y - targetY) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - leftX, y - entryY) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - leftX, y - stopY) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - rightX, y - entryY) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 3 };
         const x0 = Math.min(leftX, rightX);
         const x1 = Math.max(leftX, rightX);
         const yTop = Math.min(targetY, stopY, entryY);
@@ -7690,10 +7850,10 @@ function createChart(element, options = {}) {
         const px1 = canvasXFromDrawingPoint(p1);
         const y0 = canvasYFromDrawingPrice(p0.price);
         const y1 = canvasYFromDrawingPrice(p1.price);
-        if (Math.hypot(x - px0, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 0 };
-        if (Math.hypot(x - px1, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 1 };
-        if (Math.hypot(x - px0, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 2 };
-        if (Math.hypot(x - px1, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        if (Math.hypot(x - px0, y - y0) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - px0, y - y1) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - px1, y - y0) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 3 };
         if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
           return { drawing, target: "line" };
         }
@@ -7705,16 +7865,16 @@ function createChart(element, options = {}) {
         const px1 = canvasXFromDrawingPoint(p1);
         const y0 = canvasYFromDrawingPrice(p0.price);
         const y1 = canvasYFromDrawingPrice(p1.price);
-        if (Math.hypot(x - px0, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 0 };
-        if (Math.hypot(x - px1, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 1 };
-        if (Math.hypot(x - px0, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 2 };
-        if (Math.hypot(x - px1, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        if (Math.hypot(x - px0, y - y0) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - px0, y - y1) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - px1, y - y0) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 3 };
         const cx = (px0 + px1) / 2;
         const cy = (y0 + y1) / 2;
         const rx = Math.max(1, Math.abs(px1 - px0) / 2);
         const ry = Math.max(1, Math.abs(y1 - y0) / 2);
         const norm = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;
-        if (norm <= 1) {
+        if (norm <= 1 * hitTolerance) {
           return { drawing, target: "line" };
         }
       } else if (drawing.type === "parallel-channel") {
@@ -7726,18 +7886,18 @@ function createChart(element, options = {}) {
         const y0 = canvasYFromDrawingPrice(p0.price);
         const x1 = canvasXFromDrawingPoint(p1);
         const y1 = canvasYFromDrawingPrice(p1.price);
-        if (Math.hypot(x - x0, y - y0) <= 8) return { drawing, target: "handle", pointIndex: 0 };
-        if (Math.hypot(x - x1, y - y1) <= 8) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - x0, y - y0) <= 8 * hitTolerance) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - x1, y - y1) <= 8 * hitTolerance) return { drawing, target: "handle", pointIndex: 1 };
         if (p2) {
           const x2 = canvasXFromDrawingPoint(p2);
           const y2 = canvasYFromDrawingPrice(p2.price);
-          if (Math.hypot(x - x2, y - y2) <= 8) return { drawing, target: "handle", pointIndex: 2 };
+          if (Math.hypot(x - x2, y - y2) <= 8 * hitTolerance) return { drawing, target: "handle", pointIndex: 2 };
           const indexSpan = p1.index - p0.index;
           const slope = indexSpan !== 0 ? (p1.price - p0.price) / indexSpan : 0;
           const offset = p2.price - (p0.price + slope * (p2.index - p0.index));
           const q0y = canvasYFromDrawingPrice(p0.price + offset);
           const q1y = canvasYFromDrawingPrice(p1.price + offset);
-          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 || distanceToSegment(x, y, x0, q0y, x1, q1y) <= 6) {
+          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 * hitTolerance || distanceToSegment(x, y, x0, q0y, x1, q1y) <= 6 * hitTolerance) {
             return { drawing, target: "line" };
           }
           const minX = Math.min(x0, x1);
@@ -7750,7 +7910,7 @@ function createChart(element, options = {}) {
               return { drawing, target: "line" };
             }
           }
-        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
+        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 * hitTolerance) {
           return { drawing, target: "line" };
         }
       } else if (drawing.type === "arrow") {
@@ -7761,13 +7921,13 @@ function createChart(element, options = {}) {
         const y1 = canvasYFromDrawingPrice(first.price);
         const x2 = canvasXFromDrawingPoint(second);
         const y2 = canvasYFromDrawingPrice(second.price);
-        if (Math.hypot(x - x1, y - y1) <= 8) {
+        if (Math.hypot(x - x1, y - y1) <= 8 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 0 };
         }
-        if (Math.hypot(x - x2, y - y2) <= 8) {
+        if (Math.hypot(x - x2, y - y2) <= 8 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 1 };
         }
-        if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+        if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6 * hitTolerance) {
           return { drawing, target: "line" };
         }
       } else if (drawing.type === "brush") {
@@ -7779,7 +7939,7 @@ function createChart(element, options = {}) {
         for (let i = 1; i < pts.length; i += 1) {
           const nextX = canvasXFromDrawingPoint(pts[i]);
           const nextY = canvasYFromDrawingPrice(pts[i].price);
-          if (distanceToSegment(x, y, prevX, prevY, nextX, nextY) <= 7) {
+          if (distanceToSegment(x, y, prevX, prevY, nextX, nextY) <= 7 * hitTolerance) {
             hitBody = true;
             break;
           }
@@ -7797,8 +7957,8 @@ function createChart(element, options = {}) {
         const ay = canvasYFromDrawingPrice(anchor.price);
         const bx = canvasXFromDrawingPoint(boxPoint);
         const by = canvasYFromDrawingPrice(boxPoint.price);
-        if (Math.hypot(x - ax, y - ay) <= 9) return { drawing, target: "handle", pointIndex: 0 };
-        if (Math.hypot(x - bx, y - by) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - ax, y - ay) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - bx, y - by) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 1 };
         const fontSize = Math.max(6, drawing.fontSize);
         const prevFont = ctx.font;
         ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
@@ -7814,7 +7974,7 @@ function createChart(element, options = {}) {
         if (x >= bx && x <= bx + blockW && y >= by && y <= by + blockH) {
           return { drawing, target: "line" };
         }
-        if (distanceToSegment(x, y, bx + blockW / 2, by + blockH / 2, ax, ay) <= 5) {
+        if (distanceToSegment(x, y, bx + blockW / 2, by + blockH / 2, ax, ay) <= 5 * hitTolerance) {
           return { drawing, target: "line" };
         }
       } else if (drawing.type === "price-range") {
@@ -7825,8 +7985,8 @@ function createChart(element, options = {}) {
         const px1 = canvasXFromDrawingPoint(p1);
         const y0 = canvasYFromDrawingPrice(p0.price);
         const y1 = canvasYFromDrawingPrice(p1.price);
-        if (Math.hypot(x - px0, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 0 };
-        if (Math.hypot(x - px1, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - px0, y - y0) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 1 };
         if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
           return { drawing, target: "line" };
         }
@@ -7835,7 +7995,7 @@ function createChart(element, options = {}) {
         if (!anchor) continue;
         const ax = canvasXFromDrawingPoint(anchor);
         const ay = canvasYFromDrawingPrice(anchor.price);
-        if (Math.hypot(x - ax, y - ay) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - ax, y - ay) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 0 };
         const fontSize = Math.max(6, drawing.fontSize);
         const prevFont = ctx.font;
         ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
@@ -7930,8 +8090,9 @@ function createChart(element, options = {}) {
     if (!drawState || x < drawState.chartLeft || x > drawState.chartRight) {
       return null;
     }
+    const dividerTolerance = touchInputActive ? 4 * Math.max(1, mergedOptions.touch?.hitToleranceScale ?? 2.2) : 4;
     for (const pane of paneLayoutInfos) {
-      if (pane.visible && Math.abs(y - pane.top) <= 4) {
+      if (pane.visible && Math.abs(y - pane.top) <= dividerTolerance) {
         return { id: pane.id, heightPx: pane.bottom - pane.top };
       }
     }
@@ -8424,7 +8585,43 @@ function createChart(element, options = {}) {
   let lastPointerX = 0;
   let lastPointerY = 0;
   let activePointerId = null;
+  let touchInputActive = false;
   const touchPointers = /* @__PURE__ */ new Map();
+  let longPressTimerId = null;
+  let longPressState = null;
+  const cancelLongPressTimer = () => {
+    if (longPressTimerId !== null) {
+      clearTimeout(longPressTimerId);
+      longPressTimerId = null;
+    }
+  };
+  const emitLongPress = (x, y, scrubbing) => {
+    if (!longPressHandler) return;
+    const rect = canvas.getBoundingClientRect();
+    const index = indexFromCanvasX(x);
+    const barTime = index === null ? null : getTimeForIndex(index);
+    const bar = index === null ? void 0 : data[index];
+    longPressHandler({
+      x,
+      y,
+      clientX: rect.left + x,
+      clientY: rect.top + y,
+      scrubbing,
+      ...getHitRegion(x, y) === "plot" ? { price: roundToPricePrecision(priceFromCanvasY(y)) } : {},
+      ...index === null ? {} : { index },
+      ...barTime ? { time: barTime.toISOString() } : {},
+      ...bar ? {
+        point: {
+          t: bar.time.toISOString(),
+          o: bar.o,
+          h: bar.h,
+          l: bar.l,
+          c: bar.c,
+          ...bar.v === void 0 ? {} : { v: bar.v }
+        }
+      } : {}
+    });
+  };
   let pinchZoomState = null;
   const getTouchPair = () => {
     const points = Array.from(touchPointers.values());
@@ -8490,7 +8687,8 @@ function createChart(element, options = {}) {
     }
   };
   const onPointerDown = (event) => {
-    if (event.pointerType === "touch" || event.pointerType === "pen") {
+    touchInputActive = event.pointerType === "touch" || event.pointerType === "pen";
+    if (touchInputActive) {
       event.preventDefault();
     }
     if (mergedOptions.accessibility?.focusable !== false && document.activeElement !== canvas) {
@@ -8507,9 +8705,25 @@ function createChart(element, options = {}) {
       capturePointer(event.pointerId);
       const touchPair = getTouchPair();
       if (touchPair) {
+        cancelLongPressTimer();
+        longPressState = null;
         beginPinchZoom(touchPair[0], touchPair[1]);
         return;
       }
+      cancelLongPressTimer();
+      longPressState = null;
+      const touchOptions = mergedOptions.touch ?? {};
+      const wantsTooltip = touchOptions.longPressTooltip !== false || longPressHandler !== null;
+      if (wantsTooltip && !activeDrawingTool && !draftDrawing && getHitRegion(point.x, point.y) === "plot") {
+        const pointerId = event.pointerId;
+        longPressTimerId = window.setTimeout(() => {
+          longPressTimerId = null;
+          longPressState = { pointerId, x: point.x, y: point.y };
+          setCrosshairPoint(point);
+          scheduleDraw({ overlayOnly: true });
+          emitLongPress(point.x, point.y, false);
+        }, Math.max(120, touchOptions.longPressMs ?? 400));
+      }
     }
     if (measureState) {
       if (measureState.dragging) {
@@ -8675,7 +8889,10 @@ function createChart(element, options = {}) {
   };
   const onPointerMove = (event) => {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
+      touchInputActive = true;
       event.preventDefault();
+    } else if (event.pointerType === "mouse") {
+      touchInputActive = false;
     }
     magnetModifierActive = event.metaKey || event.ctrlKey;
     shiftKeyActive = event.shiftKey;
@@ -8684,6 +8901,8 @@ function createChart(element, options = {}) {
       touchPointers.set(event.pointerId, point);
       const touchPair = getTouchPair();
       if (touchPair) {
+        cancelLongPressTimer();
+        longPressState = null;
         if (!pinchZoomState) {
           beginPinchZoom(touchPair[0], touchPair[1]);
         }
@@ -8693,6 +8912,21 @@ function createChart(element, options = {}) {
       if (pinchZoomState) {
         return;
       }
+      if (longPressState && longPressState.pointerId === event.pointerId) {
+        longPressState = { ...longPressState, x: point.x, y: point.y };
+        setCrosshairPoint(point);
+        emitCrosshairMove(point.x, point.y, getHitRegion(point.x, point.y) === "plot" ? "plot" : "plot");
+        scheduleDraw({ overlayOnly: true });
+        emitLongPress(point.x, point.y, true);
+        return;
+      }
+      if (longPressTimerId !== null) {
+        const dx = point.x - (pointerDownInfo?.x ?? point.x);
+        const dy = point.y - (pointerDownInfo?.y ?? point.y);
+        if (dx * dx + dy * dy > 36) {
+          cancelLongPressTimer();
+        }
+      }
     }
     if (pointerDownInfo && pointerDownInfo.pointerId === event.pointerId && !pointerDownInfo.moved) {
       const dx = point.x - pointerDownInfo.x;
@@ -8956,6 +9190,18 @@ function createChart(element, options = {}) {
     lastPointerY = point.y;
   };
   const endPointerDrag = (event) => {
+    cancelLongPressTimer();
+    if (longPressState && (!event || event.pointerId === longPressState.pointerId)) {
+      longPressState = null;
+      touchPointers.delete(event?.pointerId ?? -1);
+      setCrosshairPoint(null);
+      isDragging = false;
+      dragMode = null;
+      activePointerId = null;
+      pointerDownInfo = null;
+      scheduleDraw({ overlayOnly: true });
+      return;
+    }
     if (event?.pointerType === "touch") {
       touchPointers.delete(event.pointerId);
       if (pinchZoomState) {
@@ -9772,6 +10018,9 @@ function createChart(element, options = {}) {
   const onKeyboardShortcut = (handler) => {
     keyboardShortcutHandler = handler;
   };
+  const onLongPress = (handler) => {
+    longPressHandler = handler;
+  };
   const focus = () => {
     canvas.focus({ preventScroll: true });
   };
@@ -9825,6 +10074,10 @@ function createChart(element, options = {}) {
     return canvas.toDataURL(options2.type ?? "image/png", options2.quality);
   };
   const destroy = () => {
+    cancelLongPressTimer();
+    datafeedUnsubscribe?.();
+    datafeedUnsubscribe = null;
+    datafeed = null;
     cancelKineticPan();
     if (smoothingRafId !== null) {
       cancelAnimationFrame(smoothingRafId);
@@ -9916,6 +10169,8 @@ function createChart(element, options = {}) {
     addCompareSeries,
     removeCompareSeries,
     getCompareSeries,
+    setDatafeed,
+    onLongPress,
     cancelDrawing,
     setTradeMarkers,
     setSelectedDrawing,