hyperprop-charting-library 0.1.138 → 0.1.140

package/dist/index.js

@@ -2821,6 +2821,9 @@ var DEFAULT_OPTIONS = {
   doubleClickAction: "reset",
   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,
@@ -2871,6 +2874,18 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
     ...baseOptions.accessibility,
     ...options.accessibility ?? {}
   },
+  downsampling: {
+    ...baseOptions.downsampling,
+    ...options.downsampling ?? {}
+  },
+  touch: {
+    ...baseOptions.touch,
+    ...options.touch ?? {}
+  },
+  datafeedOptions: {
+    ...baseOptions.datafeedOptions,
+    ...options.datafeedOptions ?? {}
+  },
   crosshair: {
     ...baseOptions.crosshair,
     ...options.crosshair ?? {}
@@ -3045,6 +3060,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;
@@ -3746,6 +3762,150 @@ function createChart(element, options = {}) {
     heikinAshiFingerprint = fingerprint;
     return result;
   };
+  let compareSeriesStates = [];
+  const prepareCompareSeries = (options2) => {
+    const rows = [];
+    for (const point of options2.data ?? []) {
+      const t = new Date(point.t).getTime();
+      const c = Number(point.c);
+      if (Number.isFinite(t) && Number.isFinite(c)) rows.push({ t, c });
+    }
+    rows.sort((a, b) => a.t - b.t);
+    return {
+      options: options2,
+      times: rows.map((row) => row.t),
+      closes: rows.map((row) => row.c),
+      aligned: null,
+      alignedFingerprint: ""
+    };
+  };
+  const mainDataFingerprint = () => {
+    const last = data[data.length - 1];
+    return last ? `${data.length}|${data[0].time.getTime()}|${last.time.getTime()}` : "empty";
+  };
+  const getAlignedCompareValues = (state) => {
+    const fingerprint = `${mainDataFingerprint()}|${state.times.length}|${state.times[state.times.length - 1] ?? 0}`;
+    if (state.aligned && state.alignedFingerprint === fingerprint) {
+      return state.aligned;
+    }
+    const aligned = new Float64Array(data.length).fill(Number.NaN);
+    let cursor = 0;
+    let lastValue = Number.NaN;
+    for (let i = 0; i < data.length; i += 1) {
+      const barTime = data[i].time.getTime();
+      while (cursor < state.times.length && state.times[cursor] <= barTime) {
+        lastValue = state.closes[cursor];
+        cursor += 1;
+      }
+      aligned[i] = lastValue;
+    }
+    state.aligned = aligned;
+    state.alignedFingerprint = fingerprint;
+    return aligned;
+  };
+  const visibleCompareSeries = () => compareSeriesStates.filter((state) => state.options.visible !== false && state.times.length > 0);
+  const setCompareSeries = (series) => {
+    compareSeriesStates = (series ?? []).filter((entry) => entry && entry.id).map(prepareCompareSeries);
+    scheduleDraw({ updateAutoScale: true });
+  };
+  const addCompareSeries = (series) => {
+    if (!series?.id) return;
+    compareSeriesStates = [...compareSeriesStates.filter((state) => state.options.id !== series.id), prepareCompareSeries(series)];
+    scheduleDraw({ updateAutoScale: true });
+  };
+  const removeCompareSeries = (id) => {
+    const next = compareSeriesStates.filter((state) => state.options.id !== id);
+    if (next.length === compareSeriesStates.length) return;
+    compareSeriesStates = next;
+    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, {
@@ -4351,6 +4511,31 @@ function createChart(element, options = {}) {
     const chartType = mergedOptions.chartType;
     const seriesData = chartType === "heikin-ashi" ? getHeikinAshiData() : data;
     const isLineStyleChart = chartType === "line" || chartType === "area" || chartType === "baseline";
+    const comparePlans = [];
+    for (const state of visibleCompareSeries()) {
+      const aligned = getAlignedCompareValues(state);
+      let anchorIndex = -1;
+      for (let index = startIndex; index <= endIndex; index += 1) {
+        if (Number.isFinite(aligned[index] ?? Number.NaN)) {
+          anchorIndex = index;
+          break;
+        }
+      }
+      if (anchorIndex < 0) continue;
+      const baseCompare = aligned[anchorIndex];
+      const baseMain = seriesData[anchorIndex]?.c ?? 0;
+      const usePercent = (state.options.scale ?? "percent") !== "price";
+      const toPrice = usePercent && baseCompare > 0 ? (value) => baseMain * value / baseCompare : (value) => value;
+      let lastNativeValue = Number.NaN;
+      for (let index = endIndex; index >= startIndex; index -= 1) {
+        const value = aligned[index];
+        if (value !== void 0 && Number.isFinite(value)) {
+          lastNativeValue = value;
+          break;
+        }
+      }
+      comparePlans.push({ state, aligned, toPrice, usePercent, baseCompare, lastNativeValue });
+    }
     const skipLatestIndex = mergedOptions.autoScaleIgnoreLatestCandle && data.length > 1 ? data.length - 1 : -1;
     const scanCandleRange = (from, to) => {
       let min = Number.POSITIVE_INFINITY;
@@ -4396,6 +4581,23 @@ function createChart(element, options = {}) {
         maxPrice = Math.max(maxPrice, weightedMax);
       }
     }
+    for (const plan of comparePlans) {
+      if (plan.state.options.includeInAutoScale === false) continue;
+      let compareMin = Number.POSITIVE_INFINITY;
+      let compareMax = Number.NEGATIVE_INFINITY;
+      for (let index = startIndex; index <= endIndex; index += 1) {
+        const value = plan.aligned[index];
+        if (value === void 0 || !Number.isFinite(value)) continue;
+        const price = plan.toPrice(value);
+        if (!Number.isFinite(price)) continue;
+        if (price < compareMin) compareMin = price;
+        if (price > compareMax) compareMax = price;
+      }
+      if (compareMin <= compareMax) {
+        minPrice = Math.min(minPrice, compareMin);
+        maxPrice = Math.max(maxPrice, compareMax);
+      }
+    }
     const priceRange = maxPrice - minPrice || 1;
     const autoMin = minPrice - priceRange * 0.08;
     const autoMax = maxPrice + priceRange * 0.08;
@@ -5507,7 +5709,106 @@ function createChart(element, options = {}) {
       }
       return data[index]?.v;
     };
-    if (isLineStyleChart) {
+    const downsamplingOptions = mergedOptions.downsampling ?? DEFAULT_OPTIONS.downsampling;
+    const downsampleThresholdPx = Math.max(0.2, downsamplingOptions?.thresholdPx ?? 1.5);
+    const shouldDownsample = (downsamplingOptions?.enabled ?? true) && candleSpacing < downsampleThresholdPx && endIndex - startIndex > 2;
+    const seriesColumns = [];
+    if (shouldDownsample) {
+      let current = null;
+      let currentColumn = Number.NaN;
+      for (let index = startIndex; index <= endIndex; index += 1) {
+        const point = seriesData[index];
+        if (!point) continue;
+        const column = Math.round(chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth);
+        if (!current || column !== currentColumn) {
+          currentColumn = column;
+          current = {
+            x: column,
+            open: point.o,
+            high: point.h,
+            low: point.l,
+            close: point.c,
+            minClose: point.c,
+            maxClose: point.c,
+            minCloseIndex: index,
+            maxCloseIndex: index
+          };
+          seriesColumns.push(current);
+          continue;
+        }
+        if (point.h > current.high) current.high = point.h;
+        if (point.l < current.low) current.low = point.l;
+        current.close = point.c;
+        if (point.c < current.minClose) {
+          current.minClose = point.c;
+          current.minCloseIndex = index;
+        }
+        if (point.c > current.maxClose) {
+          current.maxClose = point.c;
+          current.maxCloseIndex = index;
+        }
+      }
+    }
+    if (shouldDownsample && !isLineStyleChart) {
+      const upColumns = new Path2D();
+      const downColumns = new Path2D();
+      for (const column of seriesColumns) {
+        const path = column.close >= column.open ? upColumns : downColumns;
+        const x = column.x + 0.5;
+        const top = crisp(yFromPrice(column.high));
+        const bottom = crisp(yFromPrice(column.low));
+        path.moveTo(x, top);
+        path.lineTo(x, bottom === top ? bottom + 1 : bottom);
+      }
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = mergedOptions.upColor;
+      ctx.stroke(upColumns);
+      ctx.strokeStyle = mergedOptions.downColor;
+      ctx.stroke(downColumns);
+    } else if (shouldDownsample && isLineStyleChart) {
+      const seriesLineWidth = Math.max(1, mergedOptions.lineWidth);
+      const linePath = new Path2D();
+      let started = false;
+      let firstX = 0;
+      let lastX = 0;
+      for (const column of seriesColumns) {
+        const lowFirst = column.minCloseIndex <= column.maxCloseIndex;
+        const first = lowFirst ? column.minClose : column.maxClose;
+        const second = lowFirst ? column.maxClose : column.minClose;
+        const x = column.x;
+        if (!started) {
+          linePath.moveTo(x, yFromPrice(first));
+          firstX = x;
+          started = true;
+        } else {
+          linePath.lineTo(x, yFromPrice(first));
+        }
+        if (second !== first) {
+          linePath.lineTo(x, yFromPrice(second));
+        }
+        lastX = x;
+      }
+      if (started) {
+        if (chartType === "area" || chartType === "baseline") {
+          const baseY = chartType === "baseline" ? yFromPrice(mergedOptions.baselinePrice ?? (yMin + yMax) / 2) : chartBottom;
+          const fillPath = new Path2D(linePath);
+          fillPath.lineTo(lastX, baseY);
+          fillPath.lineTo(firstX, baseY);
+          fillPath.closePath();
+          ctx.save();
+          ctx.globalAlpha = Math.max(0, Math.min(1, mergedOptions.areaFillOpacity));
+          ctx.fillStyle = chartType === "baseline" ? mergedOptions.upColor : mergedOptions.lineColor;
+          ctx.fill(fillPath);
+          ctx.restore();
+        }
+        ctx.save();
+        ctx.strokeStyle = chartType === "baseline" ? mergedOptions.upColor : mergedOptions.lineColor;
+        ctx.lineWidth = seriesLineWidth;
+        ctx.lineJoin = "round";
+        ctx.stroke(linePath);
+        ctx.restore();
+      }
+    } else if (isLineStyleChart) {
       const seriesLineWidth = Math.max(1, mergedOptions.lineWidth);
       const linePath = new Path2D();
       let started = false;
@@ -5673,6 +5974,105 @@ function createChart(element, options = {}) {
         ctx.stroke(downHollowBodies);
       }
     }
+    const compareAxisTags = [];
+    for (const plan of comparePlans) {
+      const color = plan.state.options.color ?? "#f59e0b";
+      const lineWidth = Math.max(1, plan.state.options.lineWidth ?? 1.5);
+      const path = new Path2D();
+      let started = false;
+      let firstX = 0;
+      let lastX = 0;
+      let lastY = 0;
+      let lastPrice = Number.NaN;
+      const emit = (x, y) => {
+        if (!started) {
+          path.moveTo(x, y);
+          firstX = x;
+          started = true;
+        } else {
+          path.lineTo(x, y);
+        }
+        lastX = x;
+        lastY = y;
+      };
+      const xForIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+      if (shouldDownsample) {
+        let column = Number.NaN;
+        let minValue = 0;
+        let maxValue = 0;
+        let minIndex = 0;
+        let maxIndex = 0;
+        let hasColumn = false;
+        const flushColumn = () => {
+          if (!hasColumn) return;
+          const lowFirst = minIndex <= maxIndex;
+          const first = plan.toPrice(lowFirst ? minValue : maxValue);
+          const second = plan.toPrice(lowFirst ? maxValue : minValue);
+          if (Number.isFinite(first)) emit(column, yFromPrice(first));
+          if (Number.isFinite(second) && second !== first) emit(column, yFromPrice(second));
+          lastPrice = plan.toPrice(maxIndex >= minIndex ? maxValue : minValue);
+        };
+        for (let index = startIndex; index <= endIndex; index += 1) {
+          const value = plan.aligned[index];
+          if (value === void 0 || !Number.isFinite(value)) continue;
+          const nextColumn = Math.round(xForIndex(index));
+          if (!hasColumn || nextColumn !== column) {
+            flushColumn();
+            column = nextColumn;
+            minValue = value;
+            maxValue = value;
+            minIndex = index;
+            maxIndex = index;
+            hasColumn = true;
+            continue;
+          }
+          if (value < minValue) {
+            minValue = value;
+            minIndex = index;
+          }
+          if (value > maxValue) {
+            maxValue = value;
+            maxIndex = index;
+          }
+        }
+        flushColumn();
+      } else {
+        for (let index = startIndex; index <= endIndex; index += 1) {
+          const value = plan.aligned[index];
+          if (value === void 0 || !Number.isFinite(value)) continue;
+          const price = plan.toPrice(value);
+          if (!Number.isFinite(price)) continue;
+          lastPrice = price;
+          emit(xForIndex(index), yFromPrice(price));
+        }
+      }
+      if (!started) continue;
+      if (plan.state.options.style === "area") {
+        const fillPath = new Path2D(path);
+        fillPath.lineTo(lastX, chartBottom);
+        fillPath.lineTo(firstX, chartBottom);
+        fillPath.closePath();
+        ctx.save();
+        ctx.globalAlpha = Math.max(0, Math.min(1, mergedOptions.areaFillOpacity)) * 0.6;
+        ctx.fillStyle = color;
+        ctx.fill(fillPath);
+        ctx.restore();
+      }
+      ctx.save();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = lineWidth;
+      ctx.lineJoin = "round";
+      ctx.stroke(path);
+      ctx.restore();
+      if (Number.isFinite(lastPrice)) {
+        const label = plan.state.options.label ?? plan.state.options.id;
+        const nativeLast = plan.lastNativeValue;
+        const usePercentTag = plan.usePercent && plan.baseCompare > 0 && Number.isFinite(nativeLast);
+        const changePct = usePercentTag ? (nativeLast / plan.baseCompare - 1) * 100 : 0;
+        const shortText = usePercentTag ? `${changePct >= 0 ? "+" : ""}${changePct.toFixed(2)}%` : formatPrice(nativeLast);
+        compareAxisTags.push({ y: lastY, text: `${label} ${shortText}`, shortText, color });
+      }
+    }
     const activeOverlayIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "overlay"
     ).sort((a, b) => a.indicator.zIndex - b.indicator.zIndex);
@@ -6447,6 +6847,35 @@ function createChart(element, options = {}) {
       drawText(countdownText, chartRight + 6, (fullChartBottom + height) / 2, "left", "middle", xAxis.textColor);
       ctx.font = prevFont;
     }
+    if (compareAxisTags.length > 0 && width - chartRight > 0) {
+      const prevFont = ctx.font;
+      const tagFontSize = Math.max(9, (resolvedAxis.fontSize ?? 12) - 2);
+      ctx.font = `${tagFontSize}px ${mergedOptions.fontFamily}`;
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "left";
+      const placed = [];
+      const tagHeight = tagFontSize + 6;
+      const gutterWidth = width - chartRight - 4;
+      for (const tag of [...compareAxisTags].sort((a, b) => a.y - b.y)) {
+        const text = measureTextWidth(tag.text) + 10 <= gutterWidth ? tag.text : tag.shortText;
+        const tagWidth = Math.min(gutterWidth, measureTextWidth(text) + 10);
+        if (tagWidth <= 0) continue;
+        let tagY = clamp(tag.y - tagHeight / 2, chartTop, chartBottom - tagHeight);
+        for (const slot of placed) {
+          if (tagY < slot.bottom + 2 && tagY + tagHeight > slot.top - 2) {
+            tagY = slot.bottom + 2;
+          }
+        }
+        placed.push({ top: tagY, bottom: tagY + tagHeight });
+        ctx.save();
+        ctx.fillStyle = tag.color;
+        fillRoundedRect(chartRight + 2, Math.round(tagY), Math.round(tagWidth), tagHeight, 3);
+        ctx.fillStyle = labelTextColorOn(tag.color, "#ffffff");
+        ctx.fillText(text, chartRight + 7, Math.round(tagY + tagHeight / 2));
+        ctx.restore();
+      }
+      ctx.font = prevFont;
+    }
     if (baseCtx) {
       if (baseCanvas.width !== canvas.width || baseCanvas.height !== canvas.height) {
         baseCanvas.width = canvas.width;
@@ -6471,6 +6900,7 @@ function createChart(element, options = {}) {
     };
     paintCrosshairOverlay();
     emitSelectionChangeIfMoved();
+    maybeLoadOlderHistory();
   };
   const paintCrosshairOverlay = () => {
     crosshairPriceActionRegion = null;
@@ -6663,6 +7093,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) {
@@ -7172,6 +7663,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;
@@ -7180,10 +7672,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") {
@@ -7191,10 +7683,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") {
@@ -7205,13 +7697,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") {
@@ -7222,10 +7714,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;
@@ -7235,7 +7727,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" };
           }
         }
@@ -7247,17 +7739,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" };
           }
         }
@@ -7270,30 +7762,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") {
@@ -7307,10 +7799,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);
@@ -7326,10 +7818,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" };
         }
@@ -7341,16 +7833,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") {
@@ -7362,18 +7854,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);
@@ -7386,7 +7878,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") {
@@ -7397,13 +7889,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") {
@@ -7415,7 +7907,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;
           }
@@ -7433,8 +7925,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}`;
@@ -7450,7 +7942,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") {
@@ -7461,8 +7953,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" };
         }
@@ -7471,7 +7963,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}`;
@@ -7566,8 +8058,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 };
       }
     }
@@ -8060,7 +8553,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());
@@ -8126,7 +8655,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) {
@@ -8143,9 +8673,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) {
@@ -8311,7 +8857,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;
@@ -8320,6 +8869,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]);
         }
@@ -8329,6 +8880,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;
@@ -8592,6 +9158,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) {
@@ -9408,6 +9986,9 @@ function createChart(element, options = {}) {
   const onKeyboardShortcut = (handler) => {
     keyboardShortcutHandler = handler;
   };
+  const onLongPress = (handler) => {
+    longPressHandler = handler;
+  };
   const focus = () => {
     canvas.focus({ preventScroll: true });
   };
@@ -9461,6 +10042,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);
@@ -9548,6 +10133,12 @@ function createChart(element, options = {}) {
     getMagnetMode,
     setPriceScale,
     getPriceScale,
+    setCompareSeries,
+    addCompareSeries,
+    removeCompareSeries,
+    getCompareSeries,
+    setDatafeed,
+    onLongPress,
     cancelDrawing,
     setTradeMarkers,
     setSelectedDrawing,