hyperprop-charting-library 0.1.19 → 0.1.21

package/dist/index.js

@@ -145,8 +145,476 @@ var DEFAULT_OPTIONS = {
     labelTextColor: "#0b1220",
     labelBorderRadius: 3
   },
-  dashPatterns: DEFAULT_DASH_PATTERNS
+  dashPatterns: DEFAULT_DASH_PATTERNS,
+  indicators: []
 };
+var getIndicatorSourceValue = (point, source) => {
+  if (source === "open") return point.o;
+  if (source === "high") return point.h;
+  if (source === "low") return point.l;
+  if (source === "hl2") return (point.h + point.l) / 2;
+  return point.c;
+};
+var clampIndicatorLength = (value, fallback) => {
+  return Math.max(1, Math.round(Number(value) || fallback));
+};
+var computeSmaSeries = (data, length, source) => {
+  const result = new Array(data.length).fill(null);
+  let sum = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    const point = data[i];
+    if (!point) continue;
+    const value = getIndicatorSourceValue(point, source);
+    sum += value;
+    if (i >= length) {
+      const oldPoint = data[i - length];
+      if (oldPoint) {
+        sum -= getIndicatorSourceValue(oldPoint, source);
+      }
+    }
+    if (i >= length - 1) {
+      result[i] = sum / length;
+    }
+  }
+  return result;
+};
+var computeEmaSeries = (data, length, source) => {
+  const result = new Array(data.length).fill(null);
+  const alpha = 2 / (length + 1);
+  let prev = null;
+  for (let i = 0; i < data.length; i += 1) {
+    const point = data[i];
+    if (!point) continue;
+    const value = getIndicatorSourceValue(point, source);
+    prev = prev === null ? value : alpha * value + (1 - alpha) * prev;
+    if (i >= length - 1) {
+      result[i] = prev;
+    }
+  }
+  return result;
+};
+var computeRmaSeries = (data, length, source) => {
+  const result = new Array(data.length).fill(null);
+  let prev = null;
+  let seedSum = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    const point = data[i];
+    if (!point) continue;
+    const value = getIndicatorSourceValue(point, source);
+    if (i < length) {
+      seedSum += value;
+      if (i === length - 1) {
+        prev = seedSum / length;
+        result[i] = prev;
+      }
+      continue;
+    }
+    prev = prev === null ? value : (prev * (length - 1) + value) / length;
+    result[i] = prev;
+  }
+  return result;
+};
+var computeWmaSeriesFromValues = (values, length) => {
+  const result = new Array(values.length).fill(null);
+  const denominator = length * (length + 1) / 2;
+  for (let i = 0; i < values.length; i += 1) {
+    if (i < length - 1) continue;
+    let weighted = 0;
+    let valid = true;
+    for (let j = 0; j < length; j += 1) {
+      const value = values[i - length + 1 + j];
+      if (value == null) {
+        valid = false;
+        break;
+      }
+      weighted += value * (j + 1);
+    }
+    if (valid) {
+      result[i] = weighted / denominator;
+    }
+  }
+  return result;
+};
+var computeWmaSeries = (data, length, source) => {
+  const sourceValues = data.map((point) => getIndicatorSourceValue(point, source));
+  return computeWmaSeriesFromValues(sourceValues, length);
+};
+var computeVwmaSeries = (data, length, source) => {
+  const result = new Array(data.length).fill(null);
+  let sumPv = 0;
+  let sumV = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    const point = data[i];
+    if (!point) continue;
+    const sourceValue = getIndicatorSourceValue(point, source);
+    const volume = Math.max(0, point.v ?? 0);
+    sumPv += sourceValue * volume;
+    sumV += volume;
+    if (i >= length) {
+      const oldPoint = data[i - length];
+      if (oldPoint) {
+        const oldSource = getIndicatorSourceValue(oldPoint, source);
+        const oldVolume = Math.max(0, oldPoint.v ?? 0);
+        sumPv -= oldSource * oldVolume;
+        sumV -= oldVolume;
+      }
+    }
+    if (i >= length - 1 && sumV > 0) {
+      result[i] = sumPv / sumV;
+    }
+  }
+  return result;
+};
+var computeHmaSeries = (data, length, source) => {
+  const halfLength = Math.max(1, Math.floor(length / 2));
+  const sqrtLength = Math.max(1, Math.round(Math.sqrt(length)));
+  const wmaHalf = computeWmaSeries(data, halfLength, source);
+  const wmaFull = computeWmaSeries(data, length, source);
+  const diff = wmaHalf.map((value, idx) => {
+    const full = wmaFull[idx];
+    if (value == null || full == null) return null;
+    return 2 * value - full;
+  });
+  return computeWmaSeriesFromValues(diff, sqrtLength);
+};
+var computeStdDevSeries = (data, length, source) => {
+  const result = new Array(data.length).fill(null);
+  const values = data.map((point) => point ? getIndicatorSourceValue(point, source) : 0);
+  for (let i = 0; i < values.length; i += 1) {
+    if (i < length - 1) continue;
+    let sum = 0;
+    for (let j = 0; j < length; j += 1) {
+      sum += values[i - j] ?? 0;
+    }
+    const mean = sum / length;
+    let variance = 0;
+    for (let j = 0; j < length; j += 1) {
+      const delta = (values[i - j] ?? 0) - mean;
+      variance += delta * delta;
+    }
+    result[i] = Math.sqrt(variance / length);
+  }
+  return result;
+};
+var computeRsiSeries = (data, length) => {
+  const result = new Array(data.length).fill(null);
+  if (data.length < 2) return result;
+  let avgGain = 0;
+  let avgLoss = 0;
+  let seeded = false;
+  for (let i = 1; i < data.length; i += 1) {
+    const point = data[i];
+    const prevPoint = data[i - 1];
+    if (!point || !prevPoint) continue;
+    const delta = point.c - prevPoint.c;
+    const gain = Math.max(0, delta);
+    const loss = Math.max(0, -delta);
+    if (i <= length) {
+      avgGain += gain;
+      avgLoss += loss;
+      if (i === length) {
+        avgGain /= length;
+        avgLoss /= length;
+        seeded = true;
+      }
+    } else if (seeded) {
+      avgGain = (avgGain * (length - 1) + gain) / length;
+      avgLoss = (avgLoss * (length - 1) + loss) / length;
+    }
+    if (seeded && i >= length) {
+      if (avgLoss === 0) {
+        result[i] = 100;
+      } else {
+        const rs = avgGain / avgLoss;
+        result[i] = 100 - 100 / (1 + rs);
+      }
+    }
+  }
+  return result;
+};
+var computeAtrSeries = (data, length) => {
+  const result = new Array(data.length).fill(null);
+  if (data.length === 0) return result;
+  const trueRanges = [];
+  for (let i = 0; i < data.length; i += 1) {
+    const point = data[i];
+    if (!point) continue;
+    const prevPoint = i > 0 ? data[i - 1] : null;
+    const prevClose = prevPoint ? prevPoint.c : point.c;
+    const tr = Math.max(point.h - point.l, Math.abs(point.h - prevClose), Math.abs(point.l - prevClose));
+    trueRanges.push(tr);
+  }
+  let seed = 0;
+  let prevAtr = null;
+  for (let i = 0; i < trueRanges.length; i += 1) {
+    const tr = trueRanges[i];
+    if (tr === void 0) continue;
+    if (i < length) {
+      seed += tr;
+      if (i === length - 1) {
+        prevAtr = seed / length;
+        result[i] = prevAtr;
+      }
+      continue;
+    }
+    prevAtr = prevAtr === null ? tr : (prevAtr * (length - 1) + tr) / length;
+    result[i] = prevAtr;
+  }
+  return result;
+};
+var drawOverlaySeries = (ctx, renderContext, values, color, width) => {
+  if (!renderContext.yFromPrice) return;
+  const yFromPrice = renderContext.yFromPrice;
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = Math.max(1, width);
+  ctx.setLineDash([]);
+  let drawing = false;
+  for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+    const value = values[index];
+    if (!Number.isFinite(value ?? Number.NaN)) {
+      drawing = false;
+      continue;
+    }
+    const x = renderContext.xFromIndex(index);
+    const y = yFromPrice(value);
+    if (!drawing) {
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      drawing = true;
+    } else {
+      ctx.lineTo(x, y);
+    }
+    const nextValue = values[index + 1];
+    if (!Number.isFinite(nextValue ?? Number.NaN) || index === renderContext.endIndex) {
+      ctx.stroke();
+      drawing = false;
+    }
+  }
+  ctx.restore();
+};
+var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride, maxOverride, guideLines) => {
+  const visible = [];
+  for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+    const value = values[index];
+    if (Number.isFinite(value ?? Number.NaN)) {
+      visible.push(value);
+    }
+  }
+  if (visible.length === 0) return;
+  const minValue = minOverride ?? Math.min(...visible);
+  const maxValue = maxOverride ?? Math.max(...visible);
+  const range = maxValue - minValue || 1;
+  const yFromValue = (value) => {
+    const ratio = (value - minValue) / range;
+    return renderContext.chartBottom - ratio * renderContext.chartHeight;
+  };
+  if (guideLines && guideLines.length > 0) {
+    ctx.save();
+    ctx.strokeStyle = "rgba(148,163,184,0.35)";
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 4]);
+    for (const guide of guideLines) {
+      const y = yFromValue(guide);
+      ctx.beginPath();
+      ctx.moveTo(renderContext.chartLeft, y);
+      ctx.lineTo(renderContext.chartRight, y);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = Math.max(1, width);
+  ctx.setLineDash([]);
+  let drawing = false;
+  for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+    const value = values[index];
+    if (!Number.isFinite(value ?? Number.NaN)) {
+      drawing = false;
+      continue;
+    }
+    const x = renderContext.xFromIndex(index);
+    const y = yFromValue(value);
+    if (!drawing) {
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      drawing = true;
+    } else {
+      ctx.lineTo(x, y);
+    }
+    const nextValue = values[index + 1];
+    if (!Number.isFinite(nextValue ?? Number.NaN) || index === renderContext.endIndex) {
+      ctx.stroke();
+      drawing = false;
+    }
+  }
+  ctx.restore();
+};
+var BUILTIN_VOLUME_INDICATOR = {
+  id: "volume",
+  name: "Volume",
+  pane: "separate",
+  paneHeightRatio: 0.22,
+  defaultInputs: {
+    upOpacity: 0.7,
+    downOpacity: 0.7,
+    minBarWidth: 1
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const { data, startIndex, endIndex, chartTop, chartBottom, candleSpacing, xFromIndex, upColor, downColor } = renderContext;
+    const paneHeight = Math.max(1, chartBottom - chartTop);
+    const visiblePoints = data.slice(startIndex, endIndex + 1);
+    const maxVolume = Math.max(1, ...visiblePoints.map((point) => point.v ?? 0));
+    const barWidth = Math.max(
+      Math.max(1, Number(inputs.minBarWidth) || 1),
+      Math.min(Math.max(1, candleSpacing - 1), Math.floor(candleSpacing * 0.7))
+    );
+    const upOpacity = Math.min(1, Math.max(0.05, Number(inputs.upOpacity) || 0.7));
+    const downOpacity = Math.min(1, Math.max(0.05, Number(inputs.downOpacity) || 0.7));
+    for (let index = startIndex; index <= endIndex; index += 1) {
+      const point = data[index];
+      if (!point || point.v === void 0 || point.v <= 0) {
+        continue;
+      }
+      const ratio = Math.min(1, Math.max(0, point.v / maxVolume));
+      const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
+      const xCenter = xFromIndex(index);
+      const barX = Math.round(xCenter - barWidth / 2);
+      const barY = Math.round(chartBottom - volumeHeight);
+      const isUp = point.c >= point.o;
+      const opacity = isUp ? upOpacity : downOpacity;
+      ctx.save();
+      ctx.globalAlpha = opacity;
+      ctx.fillStyle = isUp ? upColor : downColor;
+      ctx.fillRect(barX, barY, Math.max(1, Math.round(barWidth)), volumeHeight);
+      ctx.restore();
+    }
+  }
+};
+var BUILTIN_SMA_INDICATOR = {
+  id: "sma",
+  name: "SMA",
+  pane: "overlay",
+  defaultInputs: { length: 20, source: "close", color: "#60a5fa", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const values = computeSmaSeries(renderContext.data, length, inputs.source ?? "close");
+    drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#60a5fa", Number(inputs.width) || 2);
+  }
+};
+var BUILTIN_EMA_INDICATOR = {
+  id: "ema",
+  name: "EMA",
+  pane: "overlay",
+  defaultInputs: { length: 20, source: "close", color: "#f59e0b", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const values = computeEmaSeries(renderContext.data, length, inputs.source ?? "close");
+    drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#f59e0b", Number(inputs.width) || 2);
+  }
+};
+var BUILTIN_WMA_INDICATOR = {
+  id: "wma",
+  name: "WMA",
+  pane: "overlay",
+  defaultInputs: { length: 20, source: "close", color: "#a78bfa", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const values = computeWmaSeries(renderContext.data, length, inputs.source ?? "close");
+    drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#a78bfa", Number(inputs.width) || 2);
+  }
+};
+var BUILTIN_VWMA_INDICATOR = {
+  id: "vwma",
+  name: "VWMA",
+  pane: "overlay",
+  defaultInputs: { length: 20, source: "close", color: "#ef4444", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const values = computeVwmaSeries(renderContext.data, length, inputs.source ?? "close");
+    drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#ef4444", Number(inputs.width) || 2);
+  }
+};
+var BUILTIN_RMA_INDICATOR = {
+  id: "rma",
+  name: "RMA",
+  pane: "overlay",
+  defaultInputs: { length: 14, source: "close", color: "#22c55e", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 14);
+    const values = computeRmaSeries(renderContext.data, length, inputs.source ?? "close");
+    drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#22c55e", Number(inputs.width) || 2);
+  }
+};
+var BUILTIN_HMA_INDICATOR = {
+  id: "hma",
+  name: "HMA",
+  pane: "overlay",
+  defaultInputs: { length: 21, source: "close", color: "#14b8a6", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 21);
+    const values = computeHmaSeries(renderContext.data, length, inputs.source ?? "close");
+    drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#14b8a6", Number(inputs.width) || 2);
+  }
+};
+var BUILTIN_STDDEV_INDICATOR = {
+  id: "stddev",
+  name: "StdDev",
+  pane: "separate",
+  paneHeightRatio: 0.16,
+  defaultInputs: { length: 20, source: "close", color: "#f97316", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const values = computeStdDevSeries(renderContext.data, length, inputs.source ?? "close");
+    drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#f97316", Number(inputs.width) || 2);
+  }
+};
+var BUILTIN_ATR_INDICATOR = {
+  id: "atr",
+  name: "ATR",
+  pane: "separate",
+  paneHeightRatio: 0.16,
+  defaultInputs: { length: 14, color: "#eab308", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 14);
+    const values = computeAtrSeries(renderContext.data, length);
+    drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#eab308", Number(inputs.width) || 2);
+  }
+};
+var BUILTIN_RSI_INDICATOR = {
+  id: "rsi",
+  name: "RSI",
+  pane: "separate",
+  paneHeightRatio: 0.18,
+  defaultInputs: { length: 14, color: "#3b82f6", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 14);
+    const values = computeRsiSeries(renderContext.data, length);
+    drawSeparateSeries(
+      ctx,
+      renderContext,
+      values,
+      inputs.color ?? "#3b82f6",
+      Number(inputs.width) || 2,
+      0,
+      100,
+      [30, 50, 70]
+    );
+  }
+};
+var BUILTIN_INDICATORS = [
+  BUILTIN_VOLUME_INDICATOR,
+  BUILTIN_SMA_INDICATOR,
+  BUILTIN_EMA_INDICATOR,
+  BUILTIN_RSI_INDICATOR,
+  BUILTIN_WMA_INDICATOR,
+  BUILTIN_VWMA_INDICATOR,
+  BUILTIN_RMA_INDICATOR,
+  BUILTIN_HMA_INDICATOR,
+  BUILTIN_STDDEV_INDICATOR,
+  BUILTIN_ATR_INDICATOR
+];
 function createChart(element, options = {}) {
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
@@ -197,6 +665,26 @@ function createChart(element, options = {}) {
   let orderDragRegions = [];
   let generatedPriceLineId = 1;
   let generatedOrderLineId = 1;
+  let generatedIndicatorId = 1;
+  const indicatorRegistry = /* @__PURE__ */ new Map();
+  for (const indicator of BUILTIN_INDICATORS) {
+    indicatorRegistry.set(indicator.id, indicator);
+  }
+  const normalizeIndicatorState = (indicator) => {
+    const plugin = indicatorRegistry.get(indicator.type);
+    const defaults = plugin?.defaultInputs ?? {};
+    return {
+      id: indicator.id ?? `indicator-${generatedIndicatorId++}`,
+      type: indicator.type,
+      visible: indicator.visible ?? true,
+      pane: indicator.pane ?? plugin?.pane ?? "overlay",
+      inputs: {
+        ...defaults,
+        ...indicator.inputs ?? {}
+      }
+    };
+  };
+  let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
   const orderWidgetWidthById = /* @__PURE__ */ new Map();
   const orderPriceTagWidthById = /* @__PURE__ */ new Map();
   let xCenter = 0;
@@ -209,6 +697,7 @@ function createChart(element, options = {}) {
   let watermarkImage = null;
   let watermarkImageReady = false;
   let drawState = null;
+  let plotBottomForHit = 0;
   let orderDragState = null;
   let actionDragState = null;
   let pointerDownInfo = null;
@@ -425,6 +914,39 @@ function createChart(element, options = {}) {
     const extra = index - (data.length - 1);
     return new Date(last.time.getTime() + extra * stepMs);
   };
+  const findNearestIndexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    let low = 0;
+    let high = data.length - 1;
+    while (low <= high) {
+      const mid = Math.floor((low + high) / 2);
+      const midPoint = data[mid];
+      if (!midPoint) {
+        break;
+      }
+      const midTime = midPoint.time.getTime();
+      if (midTime === timeMs) {
+        return mid;
+      }
+      if (midTime < timeMs) {
+        low = mid + 1;
+      } else {
+        high = mid - 1;
+      }
+    }
+    const lower = clamp(high, 0, data.length - 1);
+    const upper = clamp(low, 0, data.length - 1);
+    const lowerPoint = data[lower];
+    const upperPoint = data[upper];
+    if (!lowerPoint && !upperPoint) return null;
+    if (!lowerPoint) return upper;
+    if (!upperPoint) return lower;
+    const lowerDelta = Math.abs(lowerPoint.time.getTime() - timeMs);
+    const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
+    return lowerDelta <= upperDelta ? lower : upper;
+  };
   const formatHoverTimeLabel = (time, mode) => {
     if (mode === "time") {
       return time.toLocaleTimeString(void 0, {
@@ -805,18 +1327,36 @@ function createChart(element, options = {}) {
     const chartLeft = margin.left;
     const chartTop = margin.top;
     const chartWidth = width - margin.left - margin.right;
-    const chartHeight = height - margin.top - margin.bottom;
-    const chartBottom = chartTop + chartHeight;
+    const fullChartHeight = height - margin.top - margin.bottom;
+    const fullChartBottom = chartTop + fullChartHeight;
     const chartRight = chartLeft + chartWidth;
     const watermark = { ...DEFAULT_WATERMARK_OPTIONS, ...mergedOptions.watermark ?? {} };
+    const paneGap = 8;
+    const separatePaneSpacing = 6;
+    const activeSeparateIndicators = 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") === "separate"
+    );
+    const separatePaneHeightDefaults = activeSeparateIndicators.map(({ plugin }) => {
+      const ratio = Math.min(0.45, Math.max(0.08, plugin.paneHeightRatio ?? 0.22));
+      return Math.round(fullChartHeight * ratio);
+    });
+    const separatePaneDesiredTotal = separatePaneHeightDefaults.reduce((sum, value) => sum + value, 0) + Math.max(0, activeSeparateIndicators.length - 1) * separatePaneSpacing;
+    const maxSeparatePaneTotal = Math.max(0, fullChartHeight - 140);
+    const separatePaneScale = separatePaneDesiredTotal > 0 && separatePaneDesiredTotal > maxSeparatePaneTotal ? maxSeparatePaneTotal / separatePaneDesiredTotal : 1;
+    const separatePaneHeights = separatePaneHeightDefaults.map((value) => Math.max(48, Math.round(value * separatePaneScale)));
+    const separatePaneTotal = separatePaneHeights.reduce((sum, value) => sum + value, 0) + Math.max(0, activeSeparateIndicators.length - 1) * separatePaneSpacing;
+    const pricePaneGap = activeSeparateIndicators.length > 0 ? paneGap : 0;
+    const chartHeight = Math.max(120, fullChartHeight - separatePaneTotal - pricePaneGap);
+    const chartBottom = chartTop + chartHeight;
     if (data.length === 0) {
+      plotBottomForHit = fullChartBottom;
       drawState = {
         chartLeft,
         chartTop,
         chartRight,
-        chartBottom,
+        chartBottom: fullChartBottom,
         chartWidth,
-        chartHeight,
+        chartHeight: fullChartHeight,
         xStart: 0,
         xSpan: 0,
         yMin: 0,
@@ -884,6 +1424,7 @@ function createChart(element, options = {}) {
       yMin,
       yMax
     };
+    plotBottomForHit = fullChartBottom;
     const yFromPrice = (price) => {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
@@ -976,7 +1517,7 @@ function createChart(element, options = {}) {
         ctx.strokeStyle = gridColor;
         ctx.beginPath();
         ctx.moveTo(crisp(x), crisp(chartTop));
-        ctx.lineTo(crisp(x), crisp(chartBottom));
+        ctx.lineTo(crisp(x), crisp(fullChartBottom));
         ctx.stroke();
       }
       ctx.restore();
@@ -1004,6 +1545,36 @@ function createChart(element, options = {}) {
       ctx.fillStyle = candleColor;
       ctx.fillRect(Math.round(centerX - bodyWidth / 2), Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
     }
+    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"
+    );
+    if (activeOverlayIndicators.length > 0) {
+      const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+      activeOverlayIndicators.forEach(({ indicator, plugin }) => {
+        plugin.draw(
+          ctx,
+          {
+            data,
+            startIndex,
+            endIndex,
+            xStart,
+            xSpan,
+            chartLeft,
+            chartRight,
+            chartTop,
+            chartBottom,
+            chartWidth,
+            chartHeight,
+            xFromIndex,
+            yFromPrice,
+            candleSpacing,
+            upColor: mergedOptions.upColor,
+            downColor: mergedOptions.downColor
+          },
+          indicator.inputs
+        );
+      });
+    }
     const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
@@ -1027,11 +1598,57 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     ctx.restore();
+    if (activeSeparateIndicators.length > 0) {
+      const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+      let paneTopCursor = chartBottom + paneGap;
+      activeSeparateIndicators.forEach(({ indicator, plugin }, paneIndex) => {
+        const paneHeight = separatePaneHeights[paneIndex] ?? 80;
+        const paneTop = paneTopCursor;
+        const paneBottom = paneTop + paneHeight;
+        paneTopCursor = paneBottom + separatePaneSpacing;
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(chartLeft + 1, paneTop + 1, Math.max(0, chartWidth - 2), Math.max(0, paneHeight - 2));
+        ctx.clip();
+        plugin.draw(
+          ctx,
+          {
+            data,
+            startIndex,
+            endIndex,
+            xStart,
+            xSpan,
+            chartLeft,
+            chartRight,
+            chartTop: paneTop,
+            chartBottom: paneBottom,
+            chartWidth,
+            chartHeight: paneHeight,
+            xFromIndex,
+            yFromPrice: null,
+            candleSpacing,
+            upColor: mergedOptions.upColor,
+            downColor: mergedOptions.downColor
+          },
+          indicator.inputs
+        );
+        ctx.restore();
+        ctx.save();
+        ctx.strokeStyle = axis.lineColor;
+        ctx.lineWidth = Math.max(1, axis.lineWidth);
+        ctx.beginPath();
+        ctx.moveTo(crisp(chartLeft), crisp(paneTop));
+        ctx.lineTo(crisp(chartRight), crisp(paneTop));
+        ctx.stroke();
+        ctx.restore();
+        drawText(plugin.name.toUpperCase(), chartLeft + 6, paneTop + 12, "left", "middle", axis.textColor);
+      });
+    }
     ctx.strokeStyle = axis.lineColor;
     ctx.lineWidth = Math.max(1, axis.lineWidth);
     ctx.beginPath();
-    ctx.moveTo(crisp(chartLeft), crisp(chartBottom));
-    ctx.lineTo(crisp(chartRight), crisp(chartBottom));
+    ctx.moveTo(crisp(chartLeft), crisp(fullChartBottom));
+    ctx.lineTo(crisp(chartRight), crisp(fullChartBottom));
     ctx.moveTo(crisp(chartRight), crisp(chartTop));
     ctx.lineTo(crisp(chartRight), crisp(chartBottom));
     ctx.stroke();
@@ -1095,7 +1712,7 @@ function createChart(element, options = {}) {
         month: "short",
         day: "numeric"
       });
-      drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
+      drawText(timeLabel, x, fullChartBottom + 8, "center", "top", axis.textColor);
     }
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
@@ -1219,7 +1836,7 @@ function createChart(element, options = {}) {
           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 = chartBottom + 8;
+          const timeY = fullChartBottom + 8;
           ctx.fillStyle = labelBackground;
           fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, labelHeight, labelRadius);
           strokeCrosshairLabel(timeX, timeY, timeWidth);
@@ -1426,11 +2043,12 @@ function createChart(element, options = {}) {
     if (!drawState) {
       return "outside";
     }
-    const inPlot = x >= drawState.chartLeft && x <= drawState.chartRight && y >= drawState.chartTop && y <= drawState.chartBottom;
+    const plotBottom = Math.max(drawState.chartBottom, plotBottomForHit);
+    const inPlot = x >= drawState.chartLeft && x <= drawState.chartRight && y >= drawState.chartTop && y <= plotBottom;
     if (inPlot) {
       return "plot";
     }
-    const inXAxis = x >= drawState.chartLeft && x <= drawState.chartRight && y > drawState.chartBottom && y <= height;
+    const inXAxis = x >= drawState.chartLeft && x <= drawState.chartRight && y > plotBottom && y <= height;
     if (inXAxis) {
       return "x-axis";
     }
@@ -1505,7 +2123,6 @@ function createChart(element, options = {}) {
     lastPointerX = point.x;
     lastPointerY = point.y;
     canvas.setPointerCapture(event.pointerId);
-    setCrosshairPoint(null);
   };
   const onPointerMove = (event) => {
     const point = getCanvasPoint(event);
@@ -1587,7 +2204,7 @@ function createChart(element, options = {}) {
       }
       const hoverRegion = getHitRegion(point.x, point.y);
       if (hoverRegion === "plot") {
-        canvas.style.cursor = "default";
+        canvas.style.cursor = doubleClickEnabled ? "default" : "crosshair";
         setCrosshairPoint(point);
         emitCrosshairMove(point.x, point.y, "plot");
       } else if (hoverRegion === "x-axis") {
@@ -1607,7 +2224,7 @@ function createChart(element, options = {}) {
     const deltaX = point.x - lastPointerX;
     const deltaY = point.y - lastPointerY;
     if (dragMode === "plot") {
-      canvas.style.cursor = "default";
+      canvas.style.cursor = "grabbing";
       pan(deltaX, deltaY, true, true);
       setCrosshairPoint(null);
     } else if (dragMode === "x-axis") {
@@ -1665,7 +2282,6 @@ function createChart(element, options = {}) {
     dragMode = null;
     activePointerId = null;
     canvas.style.cursor = "default";
-    setCrosshairPoint(null);
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
       if (!pointerDownInfo.moved) {
         const clickPrice = pointerDownInfo.region === "plot" ? Number(priceFromCanvasY(pointerDownInfo.y).toFixed(2)) : void 0;
@@ -1675,10 +2291,21 @@ function createChart(element, options = {}) {
           ...clickPrice === void 0 ? {} : { price: clickPrice },
           region: pointerDownInfo.region
         });
+        if (pointerDownInfo.region === "plot") {
+          const clickPoint = { x: pointerDownInfo.x, y: pointerDownInfo.y };
+          setCrosshairPoint(clickPoint);
+          emitCrosshairMove(clickPoint.x, clickPoint.y, "plot");
+          canvas.style.cursor = doubleClickEnabled ? "default" : "crosshair";
+        } else {
+          setCrosshairPoint(null);
+        }
+      } else {
+        setCrosshairPoint(null);
       }
       pointerDownInfo = null;
     } else if (!event) {
       pointerDownInfo = null;
+      setCrosshairPoint(null);
     }
   };
   const onWheel = (event) => {
@@ -1746,6 +2373,9 @@ function createChart(element, options = {}) {
   };
   const setData = (nextData) => {
     const hadData = data.length > 0;
+    const previousCenterRounded = hadData ? Math.round(xCenter) : 0;
+    const previousCenterFraction = hadData ? xCenter - previousCenterRounded : 0;
+    const previousCenterTimeMs = hadData && previousCenterRounded >= 0 && previousCenterRounded < data.length ? data[previousCenterRounded]?.time.getTime() ?? null : null;
     data = parseData(nextData);
     if (data.length === 0) {
       xCenter = 0;
@@ -1759,6 +2389,12 @@ function createChart(element, options = {}) {
       resetYViewport();
     } else {
       if (mergedOptions.preserveViewportOnDataUpdate) {
+        if (previousCenterTimeMs !== null) {
+          const nextCenter = findNearestIndexForTimeMs(previousCenterTimeMs);
+          if (nextCenter !== null) {
+            xCenter = nextCenter + previousCenterFraction;
+          }
+        }
         clampXViewport();
       } else {
         fitXViewport();
@@ -1835,6 +2471,59 @@ function createChart(element, options = {}) {
   const setDoubleClickAction = (action) => {
     doubleClickAction = action;
   };
+  const registerIndicator = (plugin) => {
+    if (!plugin.id || typeof plugin.draw !== "function") {
+      throw new Error("Invalid indicator plugin. Expected { id, draw }.");
+    }
+    indicatorRegistry.set(plugin.id, plugin);
+    draw();
+  };
+  const unregisterIndicator = (type) => {
+    indicatorRegistry.delete(type);
+    indicators = indicators.filter((indicator) => indicator.type !== type);
+    draw();
+  };
+  const setIndicators = (nextIndicators) => {
+    indicators = nextIndicators.map((indicator) => normalizeIndicatorState(indicator));
+    draw();
+  };
+  const addIndicator = (type, inputs = {}, options2 = {}) => {
+    const plugin = indicatorRegistry.get(type);
+    if (!plugin) {
+      throw new Error(`Unknown indicator type "${type}". Register it first.`);
+    }
+    const next = normalizeIndicatorState({
+      ...options2,
+      type,
+      inputs
+    });
+    indicators.push(next);
+    draw();
+    return next.id;
+  };
+  const updateIndicator = (id, patch) => {
+    indicators = indicators.map((indicator) => {
+      if (indicator.id !== id) {
+        return indicator;
+      }
+      const plugin = indicatorRegistry.get(indicator.type);
+      return {
+        ...indicator,
+        visible: patch.visible ?? indicator.visible,
+        pane: patch.pane ?? indicator.pane ?? plugin?.pane ?? "overlay",
+        type: patch.type ?? indicator.type,
+        inputs: {
+          ...indicator.inputs,
+          ...patch.inputs ?? {}
+        }
+      };
+    });
+    draw();
+  };
+  const removeIndicator = (id) => {
+    indicators = indicators.filter((indicator) => indicator.id !== id);
+    draw();
+  };
   const destroy = () => {
     canvas.removeEventListener("pointerdown", onPointerDown);
     canvas.removeEventListener("pointermove", onPointerMove);
@@ -1869,6 +2558,12 @@ function createChart(element, options = {}) {
     fitContent,
     setDoubleClickEnabled,
     setDoubleClickAction,
+    registerIndicator,
+    unregisterIndicator,
+    addIndicator,
+    updateIndicator,
+    removeIndicator,
+    setIndicators,
     resize,
     destroy
   };