hyperprop-charting-library 0.1.120 → 0.1.121

package/dist/hyperprop-charting-library.js

@@ -189,8 +189,12 @@ var DEFAULT_OPTIONS = {
   tickSize: 0,
   candleColorMode: "openClose",
   candleColorEpsilon: -1,
-  autoScaleSmoothing: 0.16,
+  // 0 = deterministic scale (lightweight-charts behavior): the y-range is a
+  // pure function of the visible data, so it can never drift or "breathe".
+  // Values > 0 re-enable eased contraction for hosts that prefer it.
+  autoScaleSmoothing: 0,
   autoScaleIgnoreLatestCandle: true,
+  kineticScroll: { touch: true, mouse: false },
   pinOutOfRangeLines: false,
   doubleClickEnabled: true,
   doubleClickAction: "reset",
@@ -589,6 +593,26 @@ var drawOverlaySeries = (ctx, renderContext, values, color, width) => {
   }
   ctx.restore();
 };
+var rangeOfSeries = (seriesList, startIndex, endIndex, skipIndex) => {
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  for (const series of seriesList) {
+    for (let idx = startIndex; idx <= endIndex; idx += 1) {
+      if (idx === skipIndex) continue;
+      const value = series[idx];
+      if (value == null || !Number.isFinite(value)) continue;
+      if (value < min) min = value;
+      if (value > max) max = value;
+    }
+  }
+  return min <= max ? { min, max } : null;
+};
+var maAutoscaleRange = (cacheKeyPrefix, compute, defaultLength) => (data, startIndex, endIndex, inputs, skipIndex) => {
+  const length = clampIndicatorLength(inputs.length, defaultLength);
+  const source = inputs.source ?? "close";
+  const series = withCachedSeries(`${cacheKeyPrefix}|${length}|${source}`, data, () => compute(data, length, source));
+  return rangeOfSeries([series], startIndex, endIndex, skipIndex);
+};
 var fillBetweenSeries = (ctx, renderContext, upper, lower, color, opacity) => {
   if (!renderContext.yFromPrice || opacity <= 0) return;
   const yFromPrice = renderContext.yFromPrice;
@@ -806,7 +830,8 @@ var BUILTIN_SMA_INDICATOR = {
       () => computeSmaSeries(renderContext.data, length, inputs.source ?? "close")
     );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#60a5fa", Number(inputs.width) || 2);
-  }
+  },
+  getAutoscaleRange: maAutoscaleRange("sma", computeSmaSeries, 20)
 };
 var BUILTIN_EMA_INDICATOR = {
   id: "ema",
@@ -821,7 +846,8 @@ var BUILTIN_EMA_INDICATOR = {
       () => computeEmaSeries(renderContext.data, length, inputs.source ?? "close")
     );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#f59e0b", Number(inputs.width) || 2);
-  }
+  },
+  getAutoscaleRange: maAutoscaleRange("ema", computeEmaSeries, 20)
 };
 var BUILTIN_WMA_INDICATOR = {
   id: "wma",
@@ -836,7 +862,8 @@ var BUILTIN_WMA_INDICATOR = {
       () => computeWmaSeries(renderContext.data, length, inputs.source ?? "close")
     );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#a78bfa", Number(inputs.width) || 2);
-  }
+  },
+  getAutoscaleRange: maAutoscaleRange("wma", computeWmaSeries, 20)
 };
 var BUILTIN_VWMA_INDICATOR = {
   id: "vwma",
@@ -851,7 +878,8 @@ var BUILTIN_VWMA_INDICATOR = {
       () => computeVwmaSeries(renderContext.data, length, inputs.source ?? "close")
     );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#ef4444", Number(inputs.width) || 2);
-  }
+  },
+  getAutoscaleRange: maAutoscaleRange("vwma", computeVwmaSeries, 20)
 };
 var BUILTIN_RMA_INDICATOR = {
   id: "rma",
@@ -866,7 +894,8 @@ var BUILTIN_RMA_INDICATOR = {
       () => computeRmaSeries(renderContext.data, length, inputs.source ?? "close")
     );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#22c55e", Number(inputs.width) || 2);
-  }
+  },
+  getAutoscaleRange: maAutoscaleRange("rma", computeRmaSeries, 14)
 };
 var BUILTIN_HMA_INDICATOR = {
   id: "hma",
@@ -881,7 +910,8 @@ var BUILTIN_HMA_INDICATOR = {
       () => computeHmaSeries(renderContext.data, length, inputs.source ?? "close")
     );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#14b8a6", Number(inputs.width) || 2);
-  }
+  },
+  getAutoscaleRange: maAutoscaleRange("hma", computeHmaSeries, 21)
 };
 var BUILTIN_VWAP_INDICATOR = {
   id: "vwap",
@@ -922,6 +952,27 @@ var BUILTIN_VWAP_INDICATOR = {
       drawOverlaySeries(ctx, renderContext, lower, bandColor, 1);
     }
     drawOverlaySeries(ctx, renderContext, vwap, inputs.color ?? "#f59e0b", Number(inputs.width) || 2);
+  },
+  getAutoscaleRange: (data, startIndex, endIndex, inputs, skipIndex) => {
+    const vwap = withCachedSeries("vwap|line", data, () => computeVwapSeries(data, "vwap"));
+    if (!inputs.showBands) {
+      return rangeOfSeries([vwap], startIndex, endIndex, skipIndex);
+    }
+    const sigma = withCachedSeries("vwap|sigma", data, () => computeVwapSeries(data, "sigma"));
+    const multiplier = Math.max(0.1, Number(inputs.bandMultiplier) || 1);
+    let min = Number.POSITIVE_INFINITY;
+    let max = Number.NEGATIVE_INFINITY;
+    for (let idx = startIndex; idx <= endIndex; idx += 1) {
+      if (idx === skipIndex) continue;
+      const value = vwap[idx];
+      const s = sigma[idx];
+      if (value == null || s == null) continue;
+      const lo = value - multiplier * s;
+      const hi = value + multiplier * s;
+      if (lo < min) min = lo;
+      if (hi > max) max = hi;
+    }
+    return min <= max ? { min, max } : null;
   }
 };
 var BUILTIN_BOLLINGER_INDICATOR = {
@@ -963,7 +1014,23 @@ var BUILTIN_BOLLINGER_INDICATOR = {
     fillBetweenSeries(ctx, renderContext, upper, lower, bandColor, Number(inputs.fillOpacity) || 0.05);
     drawOverlaySeries(ctx, renderContext, upper, bandColor, width);
     drawOverlaySeries(ctx, renderContext, lower, bandColor, width);
-    drawOverlaySeries(ctx, renderContext, basis, inputs.basisColor ?? "#f59e0b", width);
+    drawOverlaySeries(ctx, renderContext, basis, inputs.basisColor ?? "#ec4899", width);
+  },
+  getAutoscaleRange: (data, startIndex, endIndex, inputs, skipIndex) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const multiplier = Math.max(0.1, Number(inputs.multiplier) || 2);
+    const source = inputs.source ?? "close";
+    const upper = withCachedSeries(
+      `bb|upper|${length}|${multiplier}|${source}`,
+      data,
+      () => computeBollingerSeries(data, length, multiplier, source, "upper")
+    );
+    const lower = withCachedSeries(
+      `bb|lower|${length}|${multiplier}|${source}`,
+      data,
+      () => computeBollingerSeries(data, length, multiplier, source, "lower")
+    );
+    return rangeOfSeries([upper, lower], startIndex, endIndex, skipIndex);
   }
 };
 var BUILTIN_STDDEV_INDICATOR = {
@@ -1056,6 +1123,20 @@ var BUILTIN_INDICATORS = [
 ];
 function createChart(element, options = {}) {
   let mergedOptions = mergeChartOptions(DEFAULT_OPTIONS, options);
+  let resolvedAxis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.axis ?? {} };
+  let resolvedXAxis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.xAxis ?? {} };
+  let resolvedYAxis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.yAxis ?? {} };
+  let resolvedLabels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
+  let resolvedGrid = { ...DEFAULT_GRID_OPTIONS, ...mergedOptions.grid ?? {} };
+  let resolvedCrosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
+  const refreshResolvedOptions = () => {
+    resolvedAxis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.axis ?? {} };
+    resolvedXAxis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.xAxis ?? {} };
+    resolvedYAxis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.yAxis ?? {} };
+    resolvedLabels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
+    resolvedGrid = { ...DEFAULT_GRID_OPTIONS, ...mergedOptions.grid ?? {} };
+    resolvedCrosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
+  };
   let width = mergedOptions.width;
   let height = mergedOptions.height;
   let data = [];
@@ -1092,8 +1173,11 @@ function createChart(element, options = {}) {
       pane: indicator.pane ?? plugin?.pane ?? "overlay",
       ...indicator.paneHeightRatio === void 0 ? {} : { paneHeightRatio: indicator.paneHeightRatio },
       zIndex: Math.round(Number(indicator.zIndex) || 0),
-      excludeFromAutoscale: indicator.excludeFromAutoscale ?? true,
-      overlayScaleWeight: Math.min(1, Math.max(0, Number(indicator.overlayScaleWeight) || 0.25)),
+      // Overlay series participate in autoscale by default (lightweight-charts
+      // semantics): bands and MAs expand the price range instead of clipping
+      // at the chart edge. Hosts can still opt out per indicator.
+      excludeFromAutoscale: indicator.excludeFromAutoscale ?? false,
+      overlayScaleWeight: indicator.overlayScaleWeight === void 0 ? 1 : Math.min(1, Math.max(0, Number(indicator.overlayScaleWeight) || 0)),
       inputs: {
         ...defaults,
         ...indicator.inputs ?? {}
@@ -1295,6 +1379,9 @@ function createChart(element, options = {}) {
   canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
+  const baseCanvas = document.createElement("canvas");
+  const baseCtx = baseCanvas.getContext("2d");
+  let overlayLayout = null;
   const margin = { top: 16, right: 72, bottom: 26, left: 12 };
   let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
@@ -1334,6 +1421,20 @@ function createChart(element, options = {}) {
   const clamp = (value, min, max) => {
     return Math.min(max, Math.max(min, value));
   };
+  const textWidthCache = /* @__PURE__ */ new Map();
+  const measureTextWidth = (text) => {
+    const key = `${ctx.font}\0${text}`;
+    const cached = textWidthCache.get(key);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const width2 = ctx.measureText(text).width;
+    if (textWidthCache.size >= 4096) {
+      textWidthCache.clear();
+    }
+    textWidthCache.set(key, width2);
+    return width2;
+  };
   const resetLabelSlots = (enabled) => {
     noOverlappingLineLabels = enabled;
     rightAxisLabelSlots = [];
@@ -1536,7 +1637,7 @@ function createChart(element, options = {}) {
     return `${integerPart}${decimalPart}`;
   };
   const getMeasuredLabelWidth = (text, paddingX) => {
-    return Math.ceil(ctx.measureText(text).width) + paddingX * 2;
+    return Math.ceil(measureTextWidth(text)) + paddingX * 2;
   };
   const getStabilizedNumericLabelWidth = (text, paddingX) => {
     const measured = getMeasuredLabelWidth(text, paddingX);
@@ -1777,11 +1878,11 @@ function createChart(element, options = {}) {
       return;
     }
     const labelText = mergedLine.label ?? formatPrice(mergedLine.price);
-    const axis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.axis ?? {} };
+    const axis = resolvedAxis;
     ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
     const labelPaddingX = 8;
     const labelHeight = 20;
-    const measuredLabelWidth = mergedLine.label === void 0 ? getPriceLabelWidth(labelText, labelPaddingX) : Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
+    const measuredLabelWidth = mergedLine.label === void 0 ? getPriceLabelWidth(labelText, labelPaddingX) : Math.ceil(measureTextWidth(labelText)) + labelPaddingX * 2;
     const labelWidth = getRightAxisLabelWidth(chartRight, measuredLabelWidth);
     const labelX = getRightAxisLabelX(chartRight);
     const labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
@@ -1876,7 +1977,7 @@ function createChart(element, options = {}) {
     const closeAction = mergedLine.type === "market" ? "close" : "cancel";
     const showCloseButton = mergedLine.showCloseButton;
     const actionButtonText = mergedLine.actionButtonText;
-    const axis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.axis ?? {} };
+    const axis = resolvedAxis;
     ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
     const legacyButton = actionButtonText ? [
       {
@@ -1898,7 +1999,7 @@ function createChart(element, options = {}) {
     const actionButtonMetrics = actionButtons.map((button) => {
       const paddingX = Math.max(2, button.paddingX ?? mergedLine.actionButtonPaddingX);
       const minWidth = Math.max(16, button.minWidth ?? mergedLine.actionButtonMinWidth);
-      const width2 = Math.max(minWidth, Math.ceil(ctx.measureText(button.text).width) + paddingX * 2);
+      const width2 = Math.max(minWidth, Math.ceil(measureTextWidth(button.text)) + paddingX * 2);
       return { button, width: width2 };
     });
     const actionButtonInnerGap = actionButtonMetrics.length > 1 ? Math.max(0, mergedLine.actionButtonsInnerGap) : 0;
@@ -1906,8 +2007,8 @@ function createChart(element, options = {}) {
     const actionButtonsGap = actionButtonMetrics.length > 0 ? Math.max(0, mergedLine.actionButtonsGroupGap) : 0;
     const segmentPaddingX = 8;
     const labelHeight = 22;
-    const qtyWidth = qtyText ? Math.ceil(ctx.measureText(qtyText).width) + segmentPaddingX * 2 : 0;
-    const centerMeasuredWidth = Math.ceil(ctx.measureText(centerText).width) + segmentPaddingX * 2;
+    const qtyWidth = qtyText ? Math.ceil(measureTextWidth(qtyText)) + segmentPaddingX * 2 : 0;
+    const centerMeasuredWidth = Math.ceil(measureTextWidth(centerText)) + segmentPaddingX * 2;
     const centerWidth = mergedLine.id === void 0 ? centerMeasuredWidth : Math.max(centerMeasuredWidth, orderWidgetWidthById.get(mergedLine.id) ?? 0);
     if (mergedLine.id) {
       orderWidgetWidthById.set(mergedLine.id, centerWidth);
@@ -1915,7 +2016,7 @@ function createChart(element, options = {}) {
     const closeWidth = showCloseButton ? 24 : 0;
     const mainWidgetWidth = qtyWidth + centerWidth + closeWidth;
     const totalWidth = mainWidgetWidth + actionButtonsGap + actionButtonsTotalWidth;
-    const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
+    const crosshair = resolvedCrosshair;
     const crosshairActionInset = crosshair.visible && crosshair.showPriceLabel && crosshair.showPriceActionButton ? Math.max(
       0,
       Math.round(crosshair.priceActionButtonGap) + (clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4)) + 10) - 4
@@ -2096,20 +2197,29 @@ function createChart(element, options = {}) {
       }
     }
     crosshairPoint = point;
-    scheduleDraw();
+    scheduleDraw({ overlayOnly: true });
   };
   let drawRafId = null;
   let pendingDrawUpdateAutoScale = false;
+  let pendingDrawOverlayOnly = true;
   const scheduleDraw = (options2 = {}) => {
-    pendingDrawUpdateAutoScale = pendingDrawUpdateAutoScale || (options2.updateAutoScale ?? true);
+    const overlayOnly = options2.overlayOnly ?? false;
+    pendingDrawOverlayOnly = pendingDrawOverlayOnly && overlayOnly;
+    pendingDrawUpdateAutoScale = pendingDrawUpdateAutoScale || !overlayOnly && (options2.updateAutoScale ?? true);
     if (drawRafId !== null) {
       return;
     }
     drawRafId = requestAnimationFrame(() => {
       drawRafId = null;
       const updateAutoScale = pendingDrawUpdateAutoScale;
+      const flushOverlayOnly = pendingDrawOverlayOnly;
       pendingDrawUpdateAutoScale = false;
-      draw({ updateAutoScale });
+      pendingDrawOverlayOnly = true;
+      if (flushOverlayOnly) {
+        drawOverlayOnly();
+      } else {
+        draw({ updateAutoScale });
+      }
     });
   };
   const draw = (options2 = {}) => {
@@ -2123,15 +2233,15 @@ function createChart(element, options = {}) {
     canvas.width = Math.floor(width * pixelRatio);
     canvas.height = Math.floor(height * pixelRatio);
     ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-    const axis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.axis ?? {} };
-    const xAxis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.xAxis ?? {} };
-    const yAxis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.yAxis ?? {} };
+    const axis = resolvedAxis;
+    const xAxis = resolvedXAxis;
+    const yAxis = resolvedYAxis;
     const xAxisFontSize = Math.max(8, xAxis.fontSize);
     const yAxisFontSize = Math.max(8, yAxis.fontSize);
     ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
     ctx.fillStyle = mergedOptions.backgroundColor;
     ctx.fillRect(0, 0, width, height);
-    const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
+    const labels = resolvedLabels;
     const estimateRightMargin = () => {
       const paddingX = Math.max(4, labels.labelPaddingX);
       let required = margin.right - 1;
@@ -2244,6 +2354,7 @@ function createChart(element, options = {}) {
         yMax: 0
       };
       drawText("Load OHLC data to render chart", chartLeft + 10, chartTop + 20, "left", "middle", "#64748b");
+      overlayLayout = null;
       return;
     }
     clampXViewport();
@@ -2251,62 +2362,39 @@ function createChart(element, options = {}) {
     const xEnd = xStart + xSpan;
     const startIndex = Math.max(0, Math.floor(xStart));
     const endIndex = Math.min(data.length - 1, Math.ceil(xEnd) - 1);
-    const visibleData = data.slice(startIndex, endIndex + 1);
-    let priceSource = visibleData.length > 0 ? visibleData : data;
-    if (mergedOptions.autoScaleIgnoreLatestCandle && data.length > 1) {
-      const latestIndex = data.length - 1;
-      const filtered = priceSource.filter((_, offset) => startIndex + offset !== latestIndex);
-      if (filtered.length > 0) {
-        priceSource = filtered;
-      } else {
-        const fallbackWindow = 120;
-        const fallbackStart = Math.max(0, latestIndex - fallbackWindow);
-        const fallback = data.slice(fallbackStart, latestIndex);
-        if (fallback.length > 0) {
-          priceSource = fallback;
-        }
+    const skipLatestIndex = mergedOptions.autoScaleIgnoreLatestCandle && data.length > 1 ? data.length - 1 : -1;
+    const scanCandleRange = (from, to) => {
+      let min = Number.POSITIVE_INFINITY;
+      let max = Number.NEGATIVE_INFINITY;
+      for (let idx = from; idx <= to; idx += 1) {
+        if (idx === skipLatestIndex) continue;
+        const point = data[idx];
+        if (!point) continue;
+        if (point.l < min) min = point.l;
+        if (point.h > max) max = point.h;
       }
+      return min <= max ? { min, max } : null;
+    };
+    let candleRange = scanCandleRange(startIndex, endIndex);
+    if (!candleRange) {
+      const latestIndex = data.length - 1;
+      candleRange = scanCandleRange(Math.max(0, latestIndex - 120), latestIndex - 1) ?? scanCandleRange(0, latestIndex) ?? { min: data[latestIndex].l, max: data[latestIndex].h };
     }
-    let minPrice = Math.min(...priceSource.map((point) => point.l));
-    let maxPrice = Math.max(...priceSource.map((point) => point.h));
+    let minPrice = candleRange.min;
+    let maxPrice = candleRange.max;
     if (overlayIndicatorsForScale.length > 0) {
-      for (const { indicator } of overlayIndicatorsForScale) {
+      for (const { indicator, plugin } of overlayIndicatorsForScale) {
         if (indicator.excludeFromAutoscale) {
           continue;
         }
-        const type = indicator.type;
-        const inputs = indicator.inputs;
-        const source = inputs.source ?? "close";
-        const length = clampIndicatorLength(inputs.length ?? 14, 14);
-        let series = null;
-        if (type === "sma") series = withCachedSeries(`sma|${length}|${source}`, data, () => computeSmaSeries(data, length, source));
-        if (type === "ema") series = withCachedSeries(`ema|${length}|${source}`, data, () => computeEmaSeries(data, length, source));
-        if (type === "wma") series = withCachedSeries(`wma|${length}|${source}`, data, () => computeWmaSeries(data, length, source));
-        if (type === "vwma") series = withCachedSeries(`vwma|${length}|${source}`, data, () => computeVwmaSeries(data, length, source));
-        if (type === "rma") series = withCachedSeries(`rma|${length}|${source}`, data, () => computeRmaSeries(data, length, source));
-        if (type === "hma") series = withCachedSeries(`hma|${length}|${source}`, data, () => computeHmaSeries(data, length, source));
-        if (!series) {
-          continue;
-        }
-        const visibleValues = [];
-        for (let idx = startIndex; idx <= endIndex; idx += 1) {
-          if (mergedOptions.autoScaleIgnoreLatestCandle && data.length > 1 && idx === data.length - 1) {
-            continue;
-          }
-          const value = series[idx];
-          if (Number.isFinite(value ?? Number.NaN)) {
-            visibleValues.push(value);
-          }
-        }
-        if (visibleValues.length === 0) {
+        const range = plugin.getAutoscaleRange?.(data, startIndex, endIndex, indicator.inputs, skipLatestIndex);
+        if (!range || !Number.isFinite(range.min) || !Number.isFinite(range.max)) {
           continue;
         }
-        const seriesMin = Math.min(...visibleValues);
-        const seriesMax = Math.max(...visibleValues);
         const weight = Math.min(1, Math.max(0, indicator.overlayScaleWeight));
         const currentMid = (minPrice + maxPrice) / 2;
-        const weightedMin = currentMid + (seriesMin - currentMid) * weight;
-        const weightedMax = currentMid + (seriesMax - currentMid) * weight;
+        const weightedMin = currentMid + (range.min - currentMid) * weight;
+        const weightedMax = currentMid + (range.max - currentMid) * weight;
         minPrice = Math.min(minPrice, weightedMin);
         maxPrice = Math.max(maxPrice, weightedMax);
       }
@@ -2381,7 +2469,7 @@ function createChart(element, options = {}) {
       ctx.save();
       const prevFont = ctx.font;
       ctx.font = `500 12px ${mergedOptions.fontFamily}`;
-      const textWidth = ctx.measureText(labelText).width;
+      const textWidth = measureTextWidth(labelText);
       const paddingX = 6;
       const bgWidth = textWidth + paddingX * 2;
       const bgHeight = 18;
@@ -2547,7 +2635,7 @@ function createChart(element, options = {}) {
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
           levelLines.forEach((level, index) => {
             const labelText = `${level.ratio} (${formatPrice(level.price)})`;
-            const textWidth = ctx.measureText(labelText).width;
+            const textWidth = measureTextWidth(labelText);
             const padding = 4;
             const bgX = lineLeft + 4;
             const bgY = level.y - 9;
@@ -2620,7 +2708,7 @@ function createChart(element, options = {}) {
             ctx.font = `500 11px ${mergedOptions.fontFamily}`;
             levelLines.forEach((level, index) => {
               const labelText = `${level.ratio} (${formatPrice(level.price)})`;
-              const textWidth = ctx.measureText(labelText).width;
+              const textWidth = measureTextWidth(labelText);
               const padding = 4;
               const bgX = chartLeft + 4;
               const bgY = level.y - 9;
@@ -2763,8 +2851,8 @@ function createChart(element, options = {}) {
               const padding = 6;
               const lineH = 14;
               const isDigit = (ch) => ch >= "0" && ch <= "9";
-              const digitW = ctx.measureText("0").width;
-              const charAdvance = (ch) => isDigit(ch) ? digitW : ctx.measureText(ch).width;
+              const digitW = measureTextWidth("0");
+              const charAdvance = (ch) => isDigit(ch) ? digitW : measureTextWidth(ch);
               const lineWidth = (line) => {
                 let w = 0;
                 for (const ch of line) w += charAdvance(ch);
@@ -2787,11 +2875,11 @@ function createChart(element, options = {}) {
                 const y = startY + lineIndex * lineH;
                 for (const ch of line) {
                   if (isDigit(ch)) {
-                    ctx.fillText(ch, x + (digitW - ctx.measureText(ch).width) / 2, y);
+                    ctx.fillText(ch, x + (digitW - measureTextWidth(ch)) / 2, y);
                     x += digitW;
                   } else {
                     ctx.fillText(ch, x, y);
-                    x += ctx.measureText(ch).width;
+                    x += measureTextWidth(ch);
                   }
                 }
               });
@@ -2923,7 +3011,7 @@ function createChart(element, options = {}) {
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
           const padding = 6;
           const lineHeight = 15;
-          const textW = Math.max(...labelLines.map((line) => ctx.measureText(line).width));
+          const textW = Math.max(...labelLines.map((line) => measureTextWidth(line)));
           const pillW = textW + padding * 2;
           const pillH = labelLines.length * lineHeight + padding;
           const pillX = midX - pillW / 2;
@@ -2959,7 +3047,7 @@ function createChart(element, options = {}) {
           ctx.textBaseline = "middle";
           const lines = (drawing.label ?? "").split("\n");
           const lineH = Math.round(fontSize * 1.35);
-          const textW = Math.max(1, ...lines.map((line) => ctx.measureText(line).width));
+          const textW = Math.max(1, ...lines.map((line) => measureTextWidth(line)));
           const padX = isNote ? 8 : 2;
           const padY = isNote ? 6 : 1;
           const blockW = textW + padX * 2;
@@ -3041,47 +3129,114 @@ function createChart(element, options = {}) {
       Math.max(1, candleSpacing - 1),
       Math.max(candleMinWidth, Math.floor(candleSpacing * candleBodyWidthRatio))
     );
-    const grid = { ...DEFAULT_GRID_OPTIONS, ...mergedOptions.grid ?? {} };
+    const grid = resolvedGrid;
     const gridOpacity = clamp(grid.opacity, 0, 1);
     const yTickCountInput = grid.yTickCount ?? grid.horizontalTickCount;
     const yTicks = Math.max(1, Math.floor(yTickCountInput));
     const gridColor = grid.color ?? mergedOptions.gridColor;
+    const priceTicks = [];
+    {
+      const targetStep = yRange / Math.max(1, yTicks);
+      let step;
+      if (targetStep > 0 && Number.isFinite(targetStep)) {
+        const base = Math.pow(10, Math.floor(Math.log10(targetStep)));
+        const frac = targetStep / base;
+        step = (frac <= 1 ? 1 : frac <= 2 ? 2 : frac <= 2.5 ? 2.5 : frac <= 5 ? 5 : 10) * base;
+        const instrumentTick = getConfiguredTickSize();
+        if (instrumentTick > 0 && step < instrumentTick * 1e6) {
+          step = Math.max(instrumentTick, Math.round(step / instrumentTick) * instrumentTick);
+        }
+      } else {
+        step = 1;
+      }
+      const firstTick = Math.ceil(yMin / step) * step;
+      for (let i = 0; ; i += 1) {
+        const price = firstTick + i * step;
+        if (price > yMax + step * 1e-6) break;
+        priceTicks.push(price);
+        if (priceTicks.length > 200) break;
+      }
+    }
     if (grid.horizontalLines) {
       ctx.save();
       ctx.globalAlpha = gridOpacity;
-      for (let tick = 0; tick <= yTicks; tick += 1) {
-        const ratio = tick / yTicks;
-        const price = yMin + yRange * ratio;
+      ctx.strokeStyle = gridColor;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      for (const price of priceTicks) {
         const y = yFromPrice(price);
-        ctx.strokeStyle = gridColor;
-        ctx.lineWidth = 1;
-        ctx.beginPath();
         ctx.moveTo(crisp(chartLeft), crisp(y));
         ctx.lineTo(crisp(chartRight), crisp(y));
-        ctx.stroke();
       }
+      ctx.stroke();
       ctx.restore();
     }
-    const minLabelSpacingPx = Math.max(72, candleSpacing * 6);
-    const autoLabelCount = Math.max(2, Math.floor(chartWidth / minLabelSpacingPx));
-    const xTickCountInput = grid.xTickCount ?? autoLabelCount;
-    const xTickCount = Math.max(2, Math.floor(xTickCountInput));
-    const rawStep = xSpan / xTickCount;
-    const xStep = Math.max(1, Math.ceil(rawStep));
-    const visibleTickStart = Math.floor(xStart);
+    const minLabelSpacingPx = Math.max(60, Math.min(120, chartWidth / Math.max(2, Math.floor(grid.xTickCount ?? 8))));
+    const visibleTickStart = Math.max(0, Math.floor(xStart));
     const visibleTickEnd = Math.ceil(xEnd) - 1;
-    const tickStartIndex = Math.ceil(visibleTickStart / xStep) * xStep;
-    if (grid.verticalLines) {
+    const timeTicks = [];
+    {
+      const weightBuckets = [[], [], [], [], [], [], [], [], [], []];
+      let prevTime = visibleTickStart > 0 ? getTimeForIndex(visibleTickStart - 1) : null;
+      for (let index = visibleTickStart; index <= visibleTickEnd; index += 1) {
+        const time = getTimeForIndex(index);
+        if (!time) {
+          prevTime = null;
+          continue;
+        }
+        let weight = 0;
+        if (!prevTime) {
+          weight = 7;
+        } else {
+          if (prevTime.getFullYear() !== time.getFullYear()) weight = 9;
+          else if (prevTime.getMonth() !== time.getMonth()) weight = 8;
+          else if (prevTime.getDate() !== time.getDate()) weight = 7;
+          else {
+            const prevMinutes = prevTime.getHours() * 60 + prevTime.getMinutes();
+            const curMinutes = time.getHours() * 60 + time.getMinutes();
+            const crossed = (span) => Math.floor(prevMinutes / span) !== Math.floor(curMinutes / span);
+            if (crossed(360)) weight = 6;
+            else if (crossed(60)) weight = 5;
+            else if (crossed(30)) weight = 4;
+            else if (crossed(15)) weight = 3;
+            else if (crossed(5)) weight = 2;
+            else weight = 1;
+          }
+        }
+        weightBuckets[weight].push(index);
+        prevTime = time;
+      }
+      const placedXs = [];
+      const maxMarks = Math.floor(chartWidth / minLabelSpacingPx) + 2;
+      for (let weight = 9; weight >= 1 && timeTicks.length < maxMarks; weight -= 1) {
+        for (const index of weightBuckets[weight]) {
+          const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+          let fits = true;
+          for (const placedX of placedXs) {
+            if (Math.abs(placedX - x) < minLabelSpacingPx) {
+              fits = false;
+              break;
+            }
+          }
+          if (!fits) continue;
+          placedXs.push(x);
+          timeTicks.push({ index, weight, x });
+          if (timeTicks.length >= maxMarks) break;
+        }
+      }
+      timeTicks.sort((a, b) => a.index - b.index);
+    }
+    if (grid.verticalLines && timeTicks.length > 0) {
       ctx.save();
       ctx.globalAlpha = gridOpacity;
-      for (let index = tickStartIndex; index <= visibleTickEnd; index += xStep) {
-        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
-        ctx.strokeStyle = gridColor;
-        ctx.beginPath();
-        ctx.moveTo(crisp(x), crisp(chartTop));
-        ctx.lineTo(crisp(x), crisp(fullChartBottom));
-        ctx.stroke();
+      ctx.strokeStyle = gridColor;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      for (const tick of timeTicks) {
+        ctx.moveTo(crisp(tick.x), crisp(chartTop));
+        ctx.lineTo(crisp(tick.x), crisp(fullChartBottom));
       }
+      ctx.stroke();
       ctx.restore();
     }
     if (grid.sessionSeparators && data.length > 1) {
@@ -3119,38 +3274,45 @@ function createChart(element, options = {}) {
       }
       return data[index]?.v;
     };
-    for (let index = startIndex; index <= endIndex; index += 1) {
-      const point = data[index];
-      if (!point) {
-        continue;
+    {
+      const upWicks = new Path2D();
+      const downWicks = new Path2D();
+      const upBodies = new Path2D();
+      const downBodies = new Path2D();
+      for (let index = startIndex; index <= endIndex; index += 1) {
+        const point = data[index];
+        if (!point) {
+          continue;
+        }
+        const isLastCandle = useSmoothedCandle && index === lastDataIndex;
+        const actualDirection = point.c >= point.o ? "up" : "down";
+        const displayClose = isLastCandle ? actualDirection === "up" ? Math.max(point.o, smoothedTickerPrice) : Math.min(point.o, smoothedTickerPrice) : point.c;
+        const displayHigh = isLastCandle ? actualDirection === "up" ? Math.max(point.h, displayClose) : point.h : point.h;
+        const displayLow = isLastCandle ? actualDirection === "up" ? point.l : Math.min(point.l, displayClose) : point.l;
+        const centerX = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        const direction = isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
+        const isUp = direction === "up";
+        const roundedCenterX = Math.round(centerX);
+        const wicks = isUp ? upWicks : downWicks;
+        wicks.moveTo(roundedCenterX + 0.5, crisp(yFromPrice(displayHigh)));
+        wicks.lineTo(roundedCenterX + 0.5, crisp(yFromPrice(displayLow)));
+        const bodyLeft = roundedCenterX - Math.floor(bodyWidth / 2);
+        const openYPx = Math.round(yFromPrice(point.o));
+        const closeYPx = Math.round(yFromPrice(displayClose));
+        const bodyIsUp = displayClose >= point.o;
+        const bodyTop = bodyIsUp ? Math.min(closeYPx, openYPx - 1) : openYPx;
+        const bodyBottom = bodyIsUp ? openYPx : Math.max(closeYPx, openYPx + 1);
+        (isUp ? upBodies : downBodies).rect(bodyLeft, bodyTop, bodyWidth, bodyBottom - bodyTop);
       }
-      const isLastCandle = useSmoothedCandle && index === lastDataIndex;
-      const actualDirection = point.c >= point.o ? "up" : "down";
-      const displayClose = isLastCandle ? actualDirection === "up" ? Math.max(point.o, smoothedTickerPrice) : Math.min(point.o, smoothedTickerPrice) : point.c;
-      const displayHigh = isLastCandle ? actualDirection === "up" ? Math.max(point.h, displayClose) : point.h : point.h;
-      const displayLow = isLastCandle ? actualDirection === "up" ? point.l : Math.min(point.l, displayClose) : point.l;
-      const centerX = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
-      const openY = yFromPrice(point.o);
-      const closeY = yFromPrice(displayClose);
-      const highY = yFromPrice(displayHigh);
-      const lowY = yFromPrice(displayLow);
-      const direction = isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
-      const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
-      const roundedCenterX = Math.round(centerX);
-      ctx.strokeStyle = candleColor;
       ctx.lineWidth = candleWickWidth;
-      ctx.beginPath();
-      ctx.moveTo(roundedCenterX + 0.5, crisp(highY));
-      ctx.lineTo(roundedCenterX + 0.5, crisp(lowY));
-      ctx.stroke();
-      const bodyLeft = roundedCenterX - Math.floor(bodyWidth / 2);
-      const openYPx = Math.round(openY);
-      const closeYPx = Math.round(closeY);
-      const bodyIsUp = displayClose >= point.o;
-      const bodyTop = bodyIsUp ? Math.min(closeYPx, openYPx - 1) : openYPx;
-      const bodyBottom = bodyIsUp ? openYPx : Math.max(closeYPx, openYPx + 1);
-      ctx.fillStyle = candleColor;
-      ctx.fillRect(bodyLeft, bodyTop, bodyWidth, bodyBottom - bodyTop);
+      ctx.strokeStyle = mergedOptions.upColor;
+      ctx.stroke(upWicks);
+      ctx.fillStyle = mergedOptions.upColor;
+      ctx.fill(upBodies);
+      ctx.strokeStyle = mergedOptions.downColor;
+      ctx.stroke(downWicks);
+      ctx.fillStyle = mergedOptions.downColor;
+      ctx.fill(downBodies);
     }
     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"
@@ -3268,56 +3430,6 @@ function createChart(element, options = {}) {
       ctx.textAlign = prevAlign;
       ctx.textBaseline = prevBaseline;
     }
-    const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
-    if (crosshair.visible && crosshairPoint) {
-      const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
-      const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
-      if (crosshair.mode === "dot") {
-        ctx.save();
-        ctx.fillStyle = crosshair.color;
-        ctx.beginPath();
-        ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
-        ctx.fill();
-        ctx.restore();
-      } else {
-        ctx.save();
-        ctx.strokeStyle = crosshair.color;
-        ctx.lineWidth = Math.max(1, crosshair.width);
-        applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
-        if (crosshair.showVertical) {
-          ctx.beginPath();
-          ctx.moveTo(crisp(cx), crisp(chartTop));
-          ctx.lineTo(crisp(cx), crisp(chartBottom));
-          ctx.stroke();
-        }
-        if (crosshair.showHorizontal) {
-          ctx.beginPath();
-          ctx.moveTo(crisp(chartLeft), crisp(cy));
-          ctx.lineTo(crisp(chartRight), crisp(cy));
-          ctx.stroke();
-        }
-        ctx.restore();
-      }
-      if (crosshair.sideHintLeft || crosshair.sideHintRight) {
-        ctx.save();
-        ctx.font = `600 11px ${mergedOptions.fontFamily}`;
-        ctx.textBaseline = "middle";
-        ctx.setLineDash([]);
-        const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
-        const hintGap = 8;
-        if (crosshair.sideHintLeft) {
-          ctx.fillStyle = crosshair.sideHintLeftColor;
-          ctx.textAlign = "right";
-          ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
-        }
-        if (crosshair.sideHintRight) {
-          ctx.fillStyle = crosshair.sideHintRightColor;
-          ctx.textAlign = "left";
-          ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
-        }
-        ctx.restore();
-      }
-    }
     ctx.restore();
     const positionAxisGutter = Math.max(0, width - chartRight);
     if (positionAxisGutter > 0) {
@@ -3430,7 +3542,7 @@ function createChart(element, options = {}) {
               const text = label.text ?? formatPaneValue(label.value);
               const labelPaddingX = 7;
               const labelHeight = Math.max(16, yAxisFontSize + 8);
-              const labelWidth = getRightAxisLabelWidth(chartRight, Math.ceil(ctx.measureText(text).width) + labelPaddingX * 2);
+              const labelWidth = getRightAxisLabelWidth(chartRight, Math.ceil(measureTextWidth(text)) + labelPaddingX * 2);
               const labelX = getRightAxisLabelX(chartRight);
               const labelY = clamp(yFromPaneValue(label.value) - labelHeight / 2, paneTop + 2, paneBottom - labelHeight - 2);
               ctx.fillStyle = label.backgroundColor ?? label.color ?? labels.backgroundColor;
@@ -3442,18 +3554,6 @@ function createChart(element, options = {}) {
         }
       });
     }
-    if (crosshair.visible && crosshairPoint && crosshair.showVertical) {
-      const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
-      ctx.save();
-      ctx.strokeStyle = crosshair.color;
-      ctx.lineWidth = Math.max(1, crosshair.width);
-      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
-      ctx.beginPath();
-      ctx.moveTo(crisp(cx), crisp(chartTop));
-      ctx.lineTo(crisp(cx), crisp(fullChartBottom));
-      ctx.stroke();
-      ctx.restore();
-    }
     ctx.strokeStyle = axis.lineColor;
     ctx.lineWidth = Math.max(1, axis.lineWidth);
     ctx.beginPath();
@@ -3463,13 +3563,13 @@ function createChart(element, options = {}) {
     ctx.lineTo(crisp(chartRight), crisp(fullChartBottom));
     ctx.stroke();
     const priceScaleTickLabelInset = yAxisFontSize / 2 + 3;
-    for (let tick = 0; tick <= yTicks; tick += 1) {
-      const ratio = tick / yTicks;
-      const price = yMin + yRange * ratio;
-      const y = clamp(yFromPrice(price), chartTop + priceScaleTickLabelInset, chartBottom - priceScaleTickLabelInset);
+    {
       const prevFont = ctx.font;
       ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
-      drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
+      for (const price of priceTicks) {
+        const y = clamp(yFromPrice(price), chartTop + priceScaleTickLabelInset, chartBottom - priceScaleTickLabelInset);
+        drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
+      }
       ctx.font = prevFont;
     }
     resetLabelSlots(labels.noOverlapping);
@@ -3578,9 +3678,15 @@ function createChart(element, options = {}) {
         });
       }
     }
-    if (labels.showHighLow && visibleData.length > 0) {
-      const visibleHigh = Math.max(...visibleData.map((point) => point.h));
-      const visibleLow = Math.min(...visibleData.map((point) => point.l));
+    if (labels.showHighLow && endIndex >= startIndex) {
+      let visibleHigh = Number.NEGATIVE_INFINITY;
+      let visibleLow = Number.POSITIVE_INFINITY;
+      for (let idx = startIndex; idx <= endIndex; idx += 1) {
+        const point = data[idx];
+        if (!point) continue;
+        if (point.h > visibleHigh) visibleHigh = point.h;
+        if (point.l < visibleLow) visibleLow = point.l;
+      }
       addPriceAxisLabel({
         text: `H ${formatPrice(visibleHigh)}`,
         price: visibleHigh,
@@ -3633,12 +3739,12 @@ function createChart(element, options = {}) {
         const subtextFontSize = label.subtextFontSize !== void 0 && label.subtextFontSize > 0 ? Math.max(8, Math.round(label.subtextFontSize)) : priceLabelFontSize;
         const subtextLineGap = 5;
         const labelHeight = baseLabelHeight + (subtexts.length > 0 ? subtexts.length * subtextFontSize + subtexts.length * subtextLineGap : 0);
-        const primaryWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        const primaryWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(measureTextWidth(label.text)) + labelPaddingX * 2;
         let subtextWidth = 0;
         if (subtexts.length > 0) {
           const baseFont = ctx.font;
           ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
-          subtextWidth = Math.max(...subtexts.map((subtext) => Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2));
+          subtextWidth = Math.max(...subtexts.map((subtext) => Math.ceil(measureTextWidth(subtext)) + labelPaddingX * 2));
           ctx.font = baseFont;
         }
         const labelTextWidth = Math.max(primaryWidth, subtextWidth);
@@ -3742,21 +3848,15 @@ function createChart(element, options = {}) {
         ctx.font = prevFont;
       }
     }
-    const axisStepMs = getTimeStepMs();
-    const axisIntraday = axisStepMs > 0 && axisStepMs < 24 * 60 * 60 * 1e3;
-    let prevAxisTickTime = null;
-    for (let index = tickStartIndex; index <= visibleTickEnd; index += xStep) {
-      const tickTime = getTimeForIndex(index);
-      if (!tickTime) {
-        continue;
-      }
-      const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
-      const isNewDay = !prevAxisTickTime || prevAxisTickTime.getDate() !== tickTime.getDate() || prevAxisTickTime.getMonth() !== tickTime.getMonth() || prevAxisTickTime.getFullYear() !== tickTime.getFullYear();
-      const timeLabel = axisIntraday && !isNewDay ? tickTime.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", hour12: false }) : tickTime.toLocaleDateString(void 0, { month: "short", day: "numeric" });
-      prevAxisTickTime = tickTime;
+    {
       const prevFont = ctx.font;
       ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
-      drawText(timeLabel, x, (fullChartBottom + height) / 2, "center", "middle", xAxis.textColor);
+      for (const tick of timeTicks) {
+        const tickTime = getTimeForIndex(tick.index);
+        if (!tickTime) continue;
+        const timeLabel = tick.weight >= 9 ? String(tickTime.getFullYear()) : tick.weight === 8 ? tickTime.toLocaleDateString(void 0, { month: "short" }) : tick.weight === 7 ? tickTime.toLocaleDateString(void 0, { month: "short", day: "numeric" }) : tickTime.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", hour12: false });
+        drawText(timeLabel, tick.x, (fullChartBottom + height) / 2, "center", "middle", xAxis.textColor);
+      }
       ctx.font = prevFont;
     }
     if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
@@ -3769,137 +3869,229 @@ function createChart(element, options = {}) {
       drawText(countdownText, chartRight + 6, (fullChartBottom + height) / 2, "left", "middle", xAxis.textColor);
       ctx.font = prevFont;
     }
-    if (crosshair.visible && crosshairPoint) {
-      const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
-      const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
-      const labelPaddingX = 8;
-      const labelHeight = 20;
-      const labelRadius = Math.max(0, crosshair.labelBorderRadius);
-      const labelBackground = crosshair.labelBackgroundColor;
-      const labelTextColor = crosshair.labelTextColor;
-      const labelBorderColor = crosshair.labelBorderColor;
-      const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
-      const labelBorderStyle = crosshair.labelBorderStyle;
-      const strokeCrosshairLabel = (x, y, widthValue, heightValue = labelHeight) => {
-        if (labelBorderWidth <= 0) {
-          return;
-        }
-        ctx.save();
-        ctx.strokeStyle = labelBorderColor;
-        ctx.lineWidth = labelBorderWidth;
-        applyDashPattern(
-          labelBorderStyle,
-          dashPatterns.borderDotted,
-          dashPatterns.borderDashed
-        );
-        strokeRoundedRect(Math.round(x), Math.round(y), widthValue, heightValue, labelRadius);
-        ctx.restore();
-      };
-      if (crosshair.showPriceLabel) {
-        const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
-        const priceText = formatPrice(hoverPrice);
-        const priceWidth = getRightAxisLabelWidth(chartRight, getPriceLabelWidth(priceText, labelPaddingX));
-        const priceX = getRightAxisLabelX(chartRight);
-        const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
+    if (baseCtx) {
+      if (baseCanvas.width !== canvas.width || baseCanvas.height !== canvas.height) {
+        baseCanvas.width = canvas.width;
+        baseCanvas.height = canvas.height;
+      }
+      baseCtx.setTransform(1, 0, 0, 1, 0, 0);
+      baseCtx.clearRect(0, 0, baseCanvas.width, baseCanvas.height);
+      baseCtx.drawImage(canvas, 0, 0);
+    }
+    overlayLayout = {
+      chartLeft,
+      chartTop,
+      chartRight,
+      chartBottom,
+      chartWidth,
+      chartHeight,
+      fullChartBottom,
+      yMin,
+      yRange,
+      xStart,
+      xSpan
+    };
+    paintCrosshairOverlay();
+  };
+  const paintCrosshairOverlay = () => {
+    crosshairPriceActionRegion = null;
+    const layout = overlayLayout;
+    const crosshair = resolvedCrosshair;
+    if (!layout || !crosshair.visible || !crosshairPoint) {
+      return;
+    }
+    const { chartLeft, chartTop, chartRight, chartBottom, chartWidth, chartHeight, fullChartBottom, yMin, yRange, xStart, xSpan: xSpan2 } = layout;
+    const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
+    const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(chartLeft, chartTop, chartWidth, Math.max(0, chartBottom - chartTop));
+    ctx.clip();
+    if (crosshair.mode === "dot") {
+      ctx.fillStyle = crosshair.color;
+      ctx.beginPath();
+      ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
+      ctx.fill();
+    } else {
+      ctx.strokeStyle = crosshair.color;
+      ctx.lineWidth = Math.max(1, crosshair.width);
+      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+      if (crosshair.showHorizontal) {
+        ctx.beginPath();
+        ctx.moveTo(crisp(chartLeft), crisp(cy));
+        ctx.lineTo(crisp(chartRight), crisp(cy));
+        ctx.stroke();
+      }
+    }
+    if (crosshair.sideHintLeft || crosshair.sideHintRight) {
+      ctx.save();
+      ctx.font = `600 11px ${mergedOptions.fontFamily}`;
+      ctx.textBaseline = "middle";
+      ctx.setLineDash([]);
+      const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
+      const hintGap = 8;
+      if (crosshair.sideHintLeft) {
+        ctx.fillStyle = crosshair.sideHintLeftColor;
+        ctx.textAlign = "right";
+        ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
+      }
+      if (crosshair.sideHintRight) {
+        ctx.fillStyle = crosshair.sideHintRightColor;
+        ctx.textAlign = "left";
+        ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
+      }
+      ctx.restore();
+    }
+    ctx.restore();
+    if (crosshair.showVertical) {
+      ctx.save();
+      ctx.strokeStyle = crosshair.color;
+      ctx.lineWidth = Math.max(1, crosshair.width);
+      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+      ctx.beginPath();
+      ctx.moveTo(crisp(cx), crisp(chartTop));
+      ctx.lineTo(crisp(cx), crisp(fullChartBottom));
+      ctx.stroke();
+      ctx.restore();
+    }
+    const labelPaddingX = 8;
+    const labelHeight = 20;
+    const labelRadius = Math.max(0, crosshair.labelBorderRadius);
+    const labelBackground = crosshair.labelBackgroundColor;
+    const labelTextColor = crosshair.labelTextColor;
+    const labelBorderColor = crosshair.labelBorderColor;
+    const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
+    const labelBorderStyle = crosshair.labelBorderStyle;
+    const strokeCrosshairLabel = (x, y, widthValue, heightValue = labelHeight) => {
+      if (labelBorderWidth <= 0) {
+        return;
+      }
+      ctx.save();
+      ctx.strokeStyle = labelBorderColor;
+      ctx.lineWidth = labelBorderWidth;
+      applyDashPattern(
+        labelBorderStyle,
+        dashPatterns.borderDotted,
+        dashPatterns.borderDashed
+      );
+      strokeRoundedRect(Math.round(x), Math.round(y), widthValue, heightValue, labelRadius);
+      ctx.restore();
+    };
+    if (crosshair.showPriceLabel) {
+      const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
+      const priceText = formatPrice(hoverPrice);
+      const priceWidth = getRightAxisLabelWidth(chartRight, getPriceLabelWidth(priceText, labelPaddingX));
+      const priceX = getRightAxisLabelX(chartRight);
+      const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
+      ctx.fillStyle = labelBackground;
+      fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, labelRadius);
+      strokeCrosshairLabel(priceX, priceY, priceWidth);
+      drawText(priceText, priceX + labelPaddingX, priceY + labelHeight / 2, "left", "middle", labelTextColor);
+      if (crosshair.showPriceActionButton) {
+        const buttonSize = clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4));
+        const buttonGap = Math.max(0, Math.round(crosshair.priceActionButtonGap));
+        const containerPaddingX = 5;
+        const containerWidth = buttonSize + containerPaddingX * 2;
+        const containerX = priceX - buttonGap - containerWidth;
+        const containerY = priceY;
+        const buttonX = containerX + containerPaddingX;
+        const buttonY = priceY + (labelHeight - buttonSize) / 2;
+        const buttonRadius = crosshair.priceActionButtonRounded ? clamp(Math.round(crosshair.priceActionButtonBorderRadius), 0, buttonSize / 2) : 0;
+        const buttonBorderWidth = Math.max(1, Math.round(labelBorderWidth || 1));
+        const buttonCenterX = buttonX + buttonSize / 2;
+        const buttonCenterY = buttonY + buttonSize / 2;
+        const containerRadius = labelRadius;
         ctx.fillStyle = labelBackground;
-        fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, labelRadius);
-        strokeCrosshairLabel(priceX, priceY, priceWidth);
-        drawText(priceText, priceX + labelPaddingX, priceY + labelHeight / 2, "left", "middle", labelTextColor);
-        if (crosshair.showPriceActionButton) {
-          const buttonSize = clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4));
-          const buttonGap = Math.max(0, Math.round(crosshair.priceActionButtonGap));
-          const containerPaddingX = 5;
-          const containerWidth = buttonSize + containerPaddingX * 2;
-          const containerX = priceX - buttonGap - containerWidth;
-          const containerY = priceY;
-          const buttonX = containerX + containerPaddingX;
-          const buttonY = priceY + (labelHeight - buttonSize) / 2;
-          const buttonRadius = crosshair.priceActionButtonRounded ? clamp(Math.round(crosshair.priceActionButtonBorderRadius), 0, buttonSize / 2) : 0;
-          const buttonBorderWidth = Math.max(1, Math.round(labelBorderWidth || 1));
-          const buttonCenterX = buttonX + buttonSize / 2;
-          const buttonCenterY = buttonY + buttonSize / 2;
-          const containerRadius = labelRadius;
-          ctx.fillStyle = labelBackground;
-          fillRoundedRect(Math.round(containerX), Math.round(containerY), containerWidth, labelHeight, containerRadius);
-          if (labelBorderWidth > 0) {
-            ctx.save();
-            ctx.strokeStyle = labelBorderColor;
-            ctx.lineWidth = labelBorderWidth;
-            ctx.setLineDash([]);
-            strokeRoundedRect(Math.round(containerX), Math.round(containerY), containerWidth, labelHeight, containerRadius);
-            ctx.restore();
-          }
-          if (buttonBorderWidth > 0) {
-            ctx.save();
-            ctx.strokeStyle = labelBorderColor;
-            ctx.lineWidth = buttonBorderWidth;
-            ctx.setLineDash([]);
-            if (crosshair.priceActionButtonRounded) {
-              ctx.beginPath();
-              ctx.arc(
-                buttonCenterX,
-                buttonCenterY,
-                Math.max(1, buttonSize / 2 - buttonBorderWidth / 2),
-                0,
-                Math.PI * 2
-              );
-              ctx.stroke();
-            } else {
-              strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
-            }
-            ctx.restore();
-          }
-          if (crosshair.priceActionButtonIcon !== "text" && crosshair.priceActionButtonText === "+") {
-            const plusHalf = Math.max(3, Math.round(buttonSize * 0.22));
-            const plusThickness = crosshair.priceActionButtonIcon === "plusThin" ? Math.max(1, Math.round(buttonSize * 0.07)) : Math.max(1, Math.round(buttonSize * 0.1));
-            ctx.save();
-            ctx.strokeStyle = labelTextColor;
-            ctx.lineWidth = plusThickness;
-            ctx.lineCap = "round";
-            ctx.setLineDash([]);
+        fillRoundedRect(Math.round(containerX), Math.round(containerY), containerWidth, labelHeight, containerRadius);
+        if (labelBorderWidth > 0) {
+          ctx.save();
+          ctx.strokeStyle = labelBorderColor;
+          ctx.lineWidth = labelBorderWidth;
+          ctx.setLineDash([]);
+          strokeRoundedRect(Math.round(containerX), Math.round(containerY), containerWidth, labelHeight, containerRadius);
+          ctx.restore();
+        }
+        if (buttonBorderWidth > 0) {
+          ctx.save();
+          ctx.strokeStyle = labelBorderColor;
+          ctx.lineWidth = buttonBorderWidth;
+          ctx.setLineDash([]);
+          if (crosshair.priceActionButtonRounded) {
             ctx.beginPath();
-            ctx.moveTo(buttonCenterX - plusHalf, buttonCenterY);
-            ctx.lineTo(buttonCenterX + plusHalf, buttonCenterY);
-            ctx.moveTo(buttonCenterX, buttonCenterY - plusHalf);
-            ctx.lineTo(buttonCenterX, buttonCenterY + plusHalf);
-            ctx.stroke();
-            ctx.restore();
-          } else {
-            drawText(
-              crosshair.priceActionButtonText,
+            ctx.arc(
               buttonCenterX,
               buttonCenterY,
-              "center",
-              "middle",
-              labelTextColor
+              Math.max(1, buttonSize / 2 - buttonBorderWidth / 2),
+              0,
+              Math.PI * 2
             );
+            ctx.stroke();
+          } else {
+            strokeRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, buttonRadius);
           }
-          crosshairPriceActionRegion = {
-            x: containerX,
-            y: containerY,
-            width: containerWidth,
-            height: labelHeight,
-            price: Number(hoverPrice.toFixed(mergedOptions.priceDecimals))
-          };
+          ctx.restore();
         }
-      }
-      if (crosshair.showTimeLabel) {
-        const ratio = clamp((cx - chartLeft) / chartWidth, 0, 1);
-        const hoverIndex = Math.round(xStart + ratio * xSpan - 0.5);
-        const hoverTime = getTimeForIndex(hoverIndex);
-        if (hoverTime) {
-          const timeText = formatHoverTimeLabel(hoverTime, crosshair.timeLabelFormat);
-          const timeWidth = Math.ceil(ctx.measureText(timeText).width) + labelPaddingX * 2;
-          const timeX = clamp(cx - timeWidth / 2, chartLeft, chartRight - timeWidth);
-          const timeY = fullChartBottom + 1;
-          const timeHeight = Math.max(labelHeight, Math.floor(height - timeY));
-          ctx.fillStyle = labelBackground;
-          fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, timeHeight, labelRadius);
-          strokeCrosshairLabel(timeX, timeY, timeWidth, timeHeight);
-          drawText(timeText, timeX + labelPaddingX, timeY + timeHeight / 2, "left", "middle", labelTextColor);
+        if (crosshair.priceActionButtonIcon !== "text" && crosshair.priceActionButtonText === "+") {
+          const plusHalf = Math.max(3, Math.round(buttonSize * 0.22));
+          const plusThickness = crosshair.priceActionButtonIcon === "plusThin" ? Math.max(1, Math.round(buttonSize * 0.07)) : Math.max(1, Math.round(buttonSize * 0.1));
+          ctx.save();
+          ctx.strokeStyle = labelTextColor;
+          ctx.lineWidth = plusThickness;
+          ctx.lineCap = "round";
+          ctx.setLineDash([]);
+          ctx.beginPath();
+          ctx.moveTo(buttonCenterX - plusHalf, buttonCenterY);
+          ctx.lineTo(buttonCenterX + plusHalf, buttonCenterY);
+          ctx.moveTo(buttonCenterX, buttonCenterY - plusHalf);
+          ctx.lineTo(buttonCenterX, buttonCenterY + plusHalf);
+          ctx.stroke();
+          ctx.restore();
+        } else {
+          drawText(
+            crosshair.priceActionButtonText,
+            buttonCenterX,
+            buttonCenterY,
+            "center",
+            "middle",
+            labelTextColor
+          );
         }
+        crosshairPriceActionRegion = {
+          x: containerX,
+          y: containerY,
+          width: containerWidth,
+          height: labelHeight,
+          price: Number(hoverPrice.toFixed(mergedOptions.priceDecimals))
+        };
       }
     }
+    if (crosshair.showTimeLabel) {
+      const ratio = clamp((cx - chartLeft) / chartWidth, 0, 1);
+      const hoverIndex = Math.round(xStart + ratio * xSpan2 - 0.5);
+      const hoverTime = getTimeForIndex(hoverIndex);
+      if (hoverTime) {
+        const timeText = formatHoverTimeLabel(hoverTime, crosshair.timeLabelFormat);
+        const timeWidth = Math.ceil(measureTextWidth(timeText)) + labelPaddingX * 2;
+        const timeX = clamp(cx - timeWidth / 2, chartLeft, chartRight - timeWidth);
+        const timeY = fullChartBottom + 1;
+        const timeHeight = Math.max(labelHeight, Math.floor(height - timeY));
+        ctx.fillStyle = labelBackground;
+        fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, timeHeight, labelRadius);
+        strokeCrosshairLabel(timeX, timeY, timeWidth, timeHeight);
+        drawText(timeText, timeX + labelPaddingX, timeY + timeHeight / 2, "left", "middle", labelTextColor);
+      }
+    }
+  };
+  const drawOverlayOnly = () => {
+    if (!baseCtx || !overlayLayout || baseCanvas.width !== canvas.width || baseCanvas.height !== canvas.height || baseCanvas.width === 0) {
+      draw({ updateAutoScale: false });
+      return;
+    }
+    const pixelRatio = getPixelRatio();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.drawImage(baseCanvas, 0, 0);
+    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+    paintCrosshairOverlay();
   };
   const zoomX = (factor, anchorX) => {
     if (!drawState || data.length === 0) {
@@ -3990,6 +4182,59 @@ function createChart(element, options = {}) {
     }
     scheduleDraw();
   };
+  let kineticRafId = null;
+  const panVelocitySamples = [];
+  const cancelKineticPan = () => {
+    if (kineticRafId !== null) {
+      cancelAnimationFrame(kineticRafId);
+      kineticRafId = null;
+    }
+  };
+  const recordPanVelocitySample = (x) => {
+    const now = performance.now();
+    panVelocitySamples.push({ t: now, x });
+    while (panVelocitySamples.length > 0 && now - panVelocitySamples[0].t > 120) {
+      panVelocitySamples.shift();
+    }
+  };
+  const startKineticPan = (initialVelocityPxPerMs) => {
+    cancelKineticPan();
+    let velocity = initialVelocityPxPerMs;
+    let lastTime = performance.now();
+    const stepFn = (now) => {
+      kineticRafId = null;
+      const dt = Math.min(64, Math.max(1, now - lastTime));
+      lastTime = now;
+      const centerBefore = xCenter;
+      pan(velocity * dt, 0, true, false);
+      velocity *= Math.exp(-dt / 325);
+      if (Math.abs(velocity) < 0.02 || xCenter === centerBefore) {
+        return;
+      }
+      kineticRafId = requestAnimationFrame(stepFn);
+    };
+    kineticRafId = requestAnimationFrame(stepFn);
+  };
+  const maybeStartKineticPan = (pointerType) => {
+    const config = mergedOptions.kineticScroll ?? DEFAULT_OPTIONS.kineticScroll;
+    const enabled = pointerType === "touch" || pointerType === "pen" ? config?.touch !== false : config?.mouse === true;
+    if (!enabled || panVelocitySamples.length < 2) {
+      panVelocitySamples.length = 0;
+      return;
+    }
+    const first = panVelocitySamples[0];
+    const last = panVelocitySamples[panVelocitySamples.length - 1];
+    panVelocitySamples.length = 0;
+    const elapsed = last.t - first.t;
+    if (elapsed <= 0 || performance.now() - last.t > 100) {
+      return;
+    }
+    const velocity = (last.x - first.x) / elapsed;
+    if (Math.abs(velocity) < 0.1) {
+      return;
+    }
+    startKineticPan(clamp(velocity, -4, 4));
+  };
   const resetYViewport = () => {
     yMinOverride = null;
     yMaxOverride = null;
@@ -4049,6 +4294,7 @@ function createChart(element, options = {}) {
     scheduleDraw();
   };
   const resetViewport = () => {
+    cancelKineticPan();
     fitXViewport();
     resetYViewport();
     updateFollowLatest(true);
@@ -4058,6 +4304,7 @@ function createChart(element, options = {}) {
   const isFollowingLatest = () => followLatest;
   const setFollowingLatest = (follow) => {
     if (follow && data.length > 0) {
+      cancelKineticPan();
       xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
       clampXViewport();
       updateFollowLatest(true);
@@ -4427,7 +4674,7 @@ function createChart(element, options = {}) {
         const prevFont = ctx.font;
         ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
         const lines = (drawing.label ?? "").split("\n");
-        const textW = Math.max(1, ...lines.map((line) => ctx.measureText(line).width));
+        const textW = Math.max(1, ...lines.map((line) => measureTextWidth(line)));
         ctx.font = prevFont;
         const isNote = drawing.type === "note";
         const padX = isNote ? 8 : 2;
@@ -4900,16 +5147,24 @@ function createChart(element, options = {}) {
     emitViewportChange();
     scheduleDraw();
   };
+  const capturePointer = (pointerId) => {
+    try {
+      canvas.setPointerCapture(pointerId);
+    } catch {
+    }
+  };
   const onPointerDown = (event) => {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
       event.preventDefault();
     }
+    cancelKineticPan();
+    panVelocitySamples.length = 0;
     magnetModifierActive = event.metaKey || event.ctrlKey;
     shiftKeyActive = event.shiftKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
-      canvas.setPointerCapture(event.pointerId);
+      capturePointer(event.pointerId);
       const touchPair = getTouchPair();
       if (touchPair) {
         beginPinchZoom(touchPair[0], touchPair[1]);
@@ -4939,7 +5194,7 @@ function createChart(element, options = {}) {
             lastPrice: startPrice,
             moved: false
           };
-          canvas.setPointerCapture(event.pointerId);
+          capturePointer(event.pointerId);
           canvas.style.cursor = "ns-resize";
           setCrosshairPoint(null);
           return;
@@ -4960,7 +5215,7 @@ function createChart(element, options = {}) {
           startPrice: orderDragRegion.price,
           lastPrice: orderDragRegion.price
         };
-        canvas.setPointerCapture(event.pointerId);
+        capturePointer(event.pointerId);
         canvas.style.cursor = "ns-resize";
         setCrosshairPoint(null);
         return;
@@ -4992,7 +5247,7 @@ function createChart(element, options = {}) {
               startPoints: drawingHit.drawing.points.map((drawingPoint) => ({ ...drawingPoint }))
             };
             activePointerId = event.pointerId;
-            canvas.setPointerCapture(event.pointerId);
+            capturePointer(event.pointerId);
           }
         }
         setCrosshairPoint(null);
@@ -5020,7 +5275,7 @@ function createChart(element, options = {}) {
     };
     lastPointerX = point.x;
     lastPointerY = point.y;
-    canvas.setPointerCapture(event.pointerId);
+    capturePointer(event.pointerId);
     if (crosshairDrag) {
       canvas.style.cursor = "crosshair";
       setCrosshairPoint(point);
@@ -5206,6 +5461,7 @@ function createChart(element, options = {}) {
     const deltaY = point.y - lastPointerY;
     if (dragMode === "plot") {
       canvas.style.cursor = "grabbing";
+      recordPanVelocitySample(point.x);
       pan(deltaX, deltaY, true, true);
       setCrosshairPoint(null);
     } else if (dragMode === "x-axis") {
@@ -5279,10 +5535,16 @@ function createChart(element, options = {}) {
       drawingDragState = null;
       emitDrawingsChange();
     }
+    const endedPlotDrag = isDragging && dragMode === "plot";
     isDragging = false;
     dragMode = null;
     activePointerId = null;
     canvas.style.cursor = "default";
+    if (endedPlotDrag) {
+      maybeStartKineticPan(event?.pointerType);
+    } else {
+      panVelocitySamples.length = 0;
+    }
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
       if (pointerDownInfo.crosshairDrag) {
         const point = getCanvasPoint(event);
@@ -5320,6 +5582,7 @@ function createChart(element, options = {}) {
     if (!drawState) {
       return;
     }
+    cancelKineticPan();
     const point = getCanvasPoint(event);
     const region = getHitRegion(point.x, point.y);
     if (region === "outside") {
@@ -5419,6 +5682,7 @@ function createChart(element, options = {}) {
     width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
     height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
     mergedOptions = { ...mergedOptions, width, height };
+    refreshResolvedOptions();
     resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
@@ -5763,6 +6027,7 @@ function createChart(element, options = {}) {
     drawingHoverHandler = handler;
   };
   const destroy = () => {
+    cancelKineticPan();
     if (smoothingRafId !== null) {
       cancelAnimationFrame(smoothingRafId);
       smoothingRafId = null;