hyperprop-charting-library 0.1.23 → 0.1.25

package/dist/index.cjs

@@ -133,6 +133,8 @@ var DEFAULT_OPTIONS = {
   backgroundColor: "#101114",
   axisColor: "#7f8289",
   axis: DEFAULT_AXIS_OPTIONS,
+  xAxis: DEFAULT_AXIS_OPTIONS,
+  yAxis: DEFAULT_AXIS_OPTIONS,
   priceDecimals: 2,
   stabilizePriceLabels: true,
   priceLabelMinIntegerDigits: 3,
@@ -151,6 +153,9 @@ var DEFAULT_OPTIONS = {
   candleBodyWidthRatio: 0.7,
   candleMinWidth: 0.5,
   candleWickWidth: 1,
+  tickSize: 0,
+  candleColorMode: "openClose",
+  candleColorEpsilon: -1,
   autoScaleSmoothing: 0.16,
   autoScaleIgnoreLatestCandle: true,
   doubleClickEnabled: true,
@@ -386,6 +391,35 @@ var computeAtrSeries = (data, length) => {
   }
   return result;
 };
+var builtInSeriesCache = /* @__PURE__ */ new Map();
+var getSeriesFingerprint = (data) => {
+  const length = data.length;
+  const last = length > 0 ? data[length - 1] : void 0;
+  const prev = length > 1 ? data[length - 2] : void 0;
+  if (!last) return "empty";
+  return [
+    length,
+    last.time.getTime(),
+    last.o,
+    last.h,
+    last.l,
+    last.c,
+    last.v ?? "",
+    prev?.time.getTime() ?? "",
+    prev?.c ?? "",
+    prev?.v ?? ""
+  ].join("|");
+};
+var withCachedSeries = (key, data, compute) => {
+  const fingerprint = getSeriesFingerprint(data);
+  const existing = builtInSeriesCache.get(key);
+  if (existing && existing.fingerprint === fingerprint) {
+    return existing.values;
+  }
+  const values = compute();
+  builtInSeriesCache.set(key, { fingerprint, values });
+  return values;
+};
 var drawOverlaySeries = (ctx, renderContext, values, color, width) => {
   if (!renderContext.yFromPrice) return;
   const yFromPrice = renderContext.yFromPrice;
@@ -483,6 +517,8 @@ var BUILTIN_VOLUME_INDICATOR = {
   defaultInputs: {
     upOpacity: 0.7,
     downOpacity: 0.7,
+    upColor: "",
+    downColor: "",
     minBarWidth: 1,
     overlayHeightRatio: 0.22
   },
@@ -511,11 +547,13 @@ var BUILTIN_VOLUME_INDICATOR = {
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
       const barY = Math.round(paneBottom - volumeHeight);
-      const isUp = point.c >= point.o;
-      const opacity = isUp ? upOpacity : downOpacity;
+      const direction = renderContext.getCandleDirectionByIndex(index);
+      const opacity = direction === "up" ? upOpacity : downOpacity;
+      const upBarColor = inputs.upColor && inputs.upColor.trim().length > 0 ? inputs.upColor : upColor;
+      const downBarColor = inputs.downColor && inputs.downColor.trim().length > 0 ? inputs.downColor : downColor;
       ctx.save();
       ctx.globalAlpha = opacity;
-      ctx.fillStyle = isUp ? upColor : downColor;
+      ctx.fillStyle = direction === "up" ? upBarColor : downBarColor;
       ctx.fillRect(barX, barY, Math.max(1, Math.round(barWidth)), volumeHeight);
       ctx.restore();
     }
@@ -528,7 +566,11 @@ var BUILTIN_SMA_INDICATOR = {
   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");
+    const values = withCachedSeries(
+      `sma|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeSmaSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#60a5fa", Number(inputs.width) || 2);
   }
 };
@@ -539,7 +581,11 @@ var BUILTIN_EMA_INDICATOR = {
   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");
+    const values = withCachedSeries(
+      `ema|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeEmaSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#f59e0b", Number(inputs.width) || 2);
   }
 };
@@ -550,7 +596,11 @@ var BUILTIN_WMA_INDICATOR = {
   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");
+    const values = withCachedSeries(
+      `wma|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeWmaSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#a78bfa", Number(inputs.width) || 2);
   }
 };
@@ -561,7 +611,11 @@ var BUILTIN_VWMA_INDICATOR = {
   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");
+    const values = withCachedSeries(
+      `vwma|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeVwmaSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#ef4444", Number(inputs.width) || 2);
   }
 };
@@ -572,7 +626,11 @@ var BUILTIN_RMA_INDICATOR = {
   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");
+    const values = withCachedSeries(
+      `rma|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeRmaSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#22c55e", Number(inputs.width) || 2);
   }
 };
@@ -583,7 +641,11 @@ var BUILTIN_HMA_INDICATOR = {
   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");
+    const values = withCachedSeries(
+      `hma|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeHmaSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#14b8a6", Number(inputs.width) || 2);
   }
 };
@@ -595,7 +657,11 @@ var BUILTIN_STDDEV_INDICATOR = {
   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");
+    const values = withCachedSeries(
+      `stddev|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeStdDevSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#f97316", Number(inputs.width) || 2);
   }
 };
@@ -607,7 +673,7 @@ var BUILTIN_ATR_INDICATOR = {
   defaultInputs: { length: 14, color: "#eab308", width: 2 },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
-    const values = computeAtrSeries(renderContext.data, length);
+    const values = withCachedSeries(`atr|${length}`, renderContext.data, () => computeAtrSeries(renderContext.data, length));
     drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#eab308", Number(inputs.width) || 2);
   }
 };
@@ -619,7 +685,7 @@ var BUILTIN_RSI_INDICATOR = {
   defaultInputs: { length: 14, color: "#3b82f6", width: 2 },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
-    const values = computeRsiSeries(renderContext.data, length);
+    const values = withCachedSeries(`rsi|${length}`, renderContext.data, () => computeRsiSeries(renderContext.data, length));
     drawSeparateSeries(
       ctx,
       renderContext,
@@ -653,6 +719,18 @@ function createChart(element, options = {}) {
       ...options.axis ?? {},
       ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
     },
+    xAxis: {
+      ...DEFAULT_AXIS_OPTIONS,
+      ...options.axis ?? {},
+      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
+      ...options.xAxis ?? {}
+    },
+    yAxis: {
+      ...DEFAULT_AXIS_OPTIONS,
+      ...options.axis ?? {},
+      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
+      ...options.yAxis ?? {}
+    },
     crosshair: {
       ...DEFAULT_CROSSHAIR_OPTIONS,
       ...options.crosshair ?? {}
@@ -708,6 +786,9 @@ function createChart(element, options = {}) {
       visible: indicator.visible ?? true,
       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)),
       inputs: {
         ...defaults,
         ...indicator.inputs ?? {}
@@ -863,9 +944,63 @@ function createChart(element, options = {}) {
     }
     return { min: nextMin, max: nextMax };
   };
+  const getConfiguredPriceDecimals = () => clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+  const getConfiguredTickSize = () => {
+    const step = Number(mergedOptions.tickSize);
+    return Number.isFinite(step) && step > 0 ? step : 0;
+  };
+  const getTickSizeDecimals = () => {
+    const tickSize = getConfiguredTickSize();
+    if (tickSize <= 0) {
+      return 0;
+    }
+    let scaled = tickSize;
+    let decimals = 0;
+    while (decimals < 8 && Math.abs(Math.round(scaled) - scaled) > 1e-10) {
+      scaled *= 10;
+      decimals += 1;
+    }
+    return decimals;
+  };
+  const getDisplayPriceDecimals = () => {
+    const configured = getConfiguredPriceDecimals();
+    const tickDecimals = getTickSizeDecimals();
+    return Math.max(configured, tickDecimals);
+  };
+  const quantizeToTickSize = (price) => {
+    const tickSize = getConfiguredTickSize();
+    if (tickSize <= 0 || !Number.isFinite(price)) {
+      return price;
+    }
+    return Math.round(price / tickSize) * tickSize;
+  };
   const formatPrice = (price) => {
-    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
-    return price.toFixed(decimals);
+    const rounded = quantizeToTickSize(price);
+    const decimals = getDisplayPriceDecimals();
+    return rounded.toFixed(decimals);
+  };
+  const roundToPricePrecision = (price) => {
+    const rounded = quantizeToTickSize(price);
+    const decimals = getDisplayPriceDecimals();
+    return Number(rounded.toFixed(decimals));
+  };
+  const getResolvedCandleColorEpsilon = () => {
+    const configured = mergedOptions.candleColorEpsilon;
+    if (configured >= 0) {
+      return configured;
+    }
+    const tickSize = getConfiguredTickSize();
+    if (tickSize > 0) {
+      return tickSize / 2;
+    }
+    const decimals = getDisplayPriceDecimals();
+    return decimals > 0 ? 0.5 / 10 ** decimals : 0;
+  };
+  const getDirectionFromDelta = (delta) => {
+    const epsilon = Math.max(0, getResolvedCandleColorEpsilon());
+    if (delta > epsilon) return 1;
+    if (delta < -epsilon) return -1;
+    return 0;
   };
   const getStabilizedPriceTemplate = () => {
     const explicitTemplate = mergedOptions.priceLabelWidthTemplate.trim();
@@ -893,14 +1028,33 @@ function createChart(element, options = {}) {
     return Math.max(measured, templateWidth);
   };
   const parseData = (nextData) => {
-    return nextData.map((point) => ({
-      time: new Date(point.t),
-      o: point.o,
-      h: point.h,
-      l: point.l,
-      c: point.c,
-      ...point.v === void 0 ? {} : { v: point.v }
-    })).filter((point) => Number.isFinite(point.time.getTime())).sort((a, b) => a.time.getTime() - b.time.getTime());
+    const dedupedByTime = /* @__PURE__ */ new Map();
+    for (const point of nextData) {
+      const time = new Date(point.t);
+      const timeMs = time.getTime();
+      if (!Number.isFinite(timeMs)) {
+        continue;
+      }
+      const open = Number(point.o);
+      const close = Number(point.c);
+      const highInput = Number(point.h);
+      const lowInput = Number(point.l);
+      if (!Number.isFinite(open) || !Number.isFinite(close) || !Number.isFinite(highInput) || !Number.isFinite(lowInput)) {
+        continue;
+      }
+      const normalizedHigh = Math.max(highInput, open, close);
+      const normalizedLow = Math.min(lowInput, open, close);
+      const volumeValue = point.v === void 0 ? void 0 : Number(point.v);
+      dedupedByTime.set(timeMs, {
+        time,
+        o: open,
+        h: normalizedHigh,
+        l: normalizedLow,
+        c: close,
+        ...volumeValue === void 0 || !Number.isFinite(volumeValue) ? {} : { v: volumeValue }
+      });
+    }
+    return Array.from(dedupedByTime.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
   };
   const getTimeStepMs = () => {
     if (data.length < 2) {
@@ -977,6 +1131,26 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const getCandleDirectionByIndex = (index) => {
+    const point = data[index];
+    if (!point) {
+      return "up";
+    }
+    const prevPoint = index > 0 ? data[index - 1] : void 0;
+    const mode = mergedOptions.candleColorMode;
+    const baseForMode = mode === "prevClose" && prevPoint ? prevPoint.c : point.o;
+    let direction = getDirectionFromDelta(point.c - baseForMode);
+    if (direction === 0 && mode === "prevClose") {
+      direction = getDirectionFromDelta(point.c - point.o);
+    }
+    if (direction === 0 && prevPoint) {
+      direction = getDirectionFromDelta(point.c - prevPoint.c);
+    }
+    if (direction === 0) {
+      return point.c >= point.o ? "up" : "down";
+    }
+    return direction > 0 ? "up" : "down";
+  };
   const formatHoverTimeLabel = (time, mode) => {
     if (mode === "time") {
       return time.toLocaleTimeString(void 0, {
@@ -1351,6 +1525,10 @@ function createChart(element, options = {}) {
     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 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);
@@ -1365,6 +1543,9 @@ function createChart(element, options = {}) {
     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"
+    ).sort((a, b) => a.indicator.zIndex - b.indicator.zIndex);
+    const overlayIndicatorsForScale = 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"
     );
     const separatePaneHeightDefaults = activeSeparateIndicators.map(({ indicator, plugin }) => {
       const ratio = Math.min(0.45, Math.max(0.08, indicator.paneHeightRatio ?? plugin.paneHeightRatio ?? 0.22));
@@ -1416,8 +1597,47 @@ function createChart(element, options = {}) {
         }
       }
     }
-    const minPrice = Math.min(...priceSource.map((point) => point.l));
-    const maxPrice = Math.max(...priceSource.map((point) => point.h));
+    let minPrice = Math.min(...priceSource.map((point) => point.l));
+    let maxPrice = Math.max(...priceSource.map((point) => point.h));
+    if (overlayIndicatorsForScale.length > 0) {
+      for (const { indicator } 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) {
+          const value = series[idx];
+          if (Number.isFinite(value ?? Number.NaN)) {
+            visibleValues.push(value);
+          }
+        }
+        if (visibleValues.length === 0) {
+          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;
+        minPrice = Math.min(minPrice, weightedMin);
+        maxPrice = Math.max(maxPrice, weightedMax);
+      }
+    }
     const priceRange = maxPrice - minPrice || 1;
     const autoMin = minPrice - priceRange * 0.08;
     const autoMax = maxPrice + priceRange * 0.08;
@@ -1562,8 +1782,8 @@ function createChart(element, options = {}) {
       const closeY = yFromPrice(point.c);
       const highY = yFromPrice(point.h);
       const lowY = yFromPrice(point.l);
-      const isUp = point.c >= point.o;
-      const candleColor = isUp ? mergedOptions.upColor : mergedOptions.downColor;
+      const direction = getCandleDirectionByIndex(index);
+      const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
       ctx.strokeStyle = candleColor;
       ctx.lineWidth = candleWickWidth;
       ctx.beginPath();
@@ -1577,7 +1797,7 @@ function createChart(element, options = {}) {
     }
     const activeOverlayIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "overlay"
-    );
+    ).sort((a, b) => a.indicator.zIndex - b.indicator.zIndex);
     if (activeOverlayIndicators.length > 0) {
       const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       activeOverlayIndicators.forEach(({ indicator, plugin }) => {
@@ -1597,6 +1817,7 @@ function createChart(element, options = {}) {
             chartHeight,
             xFromIndex,
             yFromPrice,
+            getCandleDirectionByIndex,
             candleSpacing,
             upColor: mergedOptions.upColor,
             downColor: mergedOptions.downColor
@@ -1656,6 +1877,7 @@ function createChart(element, options = {}) {
             chartHeight: paneHeight,
             xFromIndex,
             yFromPrice: null,
+            getCandleDirectionByIndex,
             candleSpacing,
             upColor: mergedOptions.upColor,
             downColor: mergedOptions.downColor
@@ -1685,7 +1907,10 @@ function createChart(element, options = {}) {
       const ratio = tick / yTicks;
       const price = yMin + yRange * ratio;
       const y = yFromPrice(price);
-      drawText(formatPrice(price), chartRight + 6, y, "left", "middle", axis.textColor);
+      const prevFont = ctx.font;
+      ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
+      drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
+      ctx.font = prevFont;
     }
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
@@ -1693,7 +1918,8 @@ function createChart(element, options = {}) {
       const tickerPrice = lastPoint.c;
       const tickerY = yFromPrice(tickerPrice);
       const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
-      const tickerColor = ticker.color ?? (lastPoint.c >= lastPoint.o ? mergedOptions.upColor : mergedOptions.downColor);
+      const lastDirection = getCandleDirectionByIndex(data.length - 1);
+      const tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
       const tickerThickness = Math.max(1, ticker.thickness ?? 1);
       const tickerStyle = ticker.style ?? "solid";
       ctx.save();
@@ -1741,7 +1967,10 @@ function createChart(element, options = {}) {
         month: "short",
         day: "numeric"
       });
-      drawText(timeLabel, x, fullChartBottom + 8, "center", "top", axis.textColor);
+      const prevFont = ctx.font;
+      ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
+      drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);
+      ctx.font = prevFont;
     }
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
@@ -2061,7 +2290,7 @@ function createChart(element, options = {}) {
       x,
       y,
       region,
-      ...region === "plot" ? { price: Number(priceFromCanvasY(y).toFixed(mergedOptions.priceDecimals)) } : {},
+      ...region === "plot" ? { price: roundToPricePrecision(priceFromCanvasY(y)) } : {},
       ...index === null ? {} : { index },
       ...hoverTime ? { time: hoverTime.toISOString() } : {},
       ...point ? { point } : {}
@@ -2107,7 +2336,7 @@ function createChart(element, options = {}) {
     if (orderRegion) {
       if (orderRegion.draggable) {
         activePointerId = event.pointerId;
-        const startPrice = Number(orderRegion.line.price.toFixed(2));
+        const startPrice = roundToPricePrecision(orderRegion.line.price);
         actionDragState = {
           orderId: orderRegion.orderId,
           action: orderRegion.action,
@@ -2166,7 +2395,7 @@ function createChart(element, options = {}) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
       }
-      const nextPrice = Number(priceFromCanvasY(point.y).toFixed(2));
+      const nextPrice = roundToPricePrecision(priceFromCanvasY(point.y));
       if (nextPrice !== orderDragState.lastPrice) {
         orderDragState.lastPrice = nextPrice;
         orderLines = orderLines.map((line) => {
@@ -2196,7 +2425,7 @@ function createChart(element, options = {}) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
       }
-      const nextPrice = Number(priceFromCanvasY(point.y).toFixed(2));
+      const nextPrice = roundToPricePrecision(priceFromCanvasY(point.y));
       if (nextPrice !== actionDragState.lastPrice) {
         actionDragState.lastPrice = nextPrice;
         actionDragState.moved = true;
@@ -2313,7 +2542,7 @@ function createChart(element, options = {}) {
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
       if (!pointerDownInfo.moved) {
-        const clickPrice = pointerDownInfo.region === "plot" ? Number(priceFromCanvasY(pointerDownInfo.y).toFixed(2)) : void 0;
+        const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
           y: pointerDownInfo.y,
@@ -2373,7 +2602,7 @@ function createChart(element, options = {}) {
       }
       orderActionHandler?.({
         action: "createLimit",
-        price: Number(priceFromCanvasY(point.y).toFixed(2))
+        price: roundToPricePrecision(priceFromCanvasY(point.y))
       });
       return;
     }
@@ -2512,6 +2741,27 @@ function createChart(element, options = {}) {
     indicators = indicators.filter((indicator) => indicator.type !== type);
     draw();
   };
+  const listBuiltInIndicators = () => {
+    return BUILTIN_INDICATORS.map((indicator) => ({
+      id: indicator.id,
+      name: indicator.name,
+      pane: indicator.pane ?? "overlay",
+      ...indicator.paneHeightRatio === void 0 ? {} : { paneHeightRatio: indicator.paneHeightRatio }
+    }));
+  };
+  const getIndicators = () => {
+    return indicators.map((indicator) => ({
+      id: indicator.id,
+      type: indicator.type,
+      visible: indicator.visible,
+      pane: indicator.pane,
+      ...indicator.paneHeightRatio === void 0 ? {} : { paneHeightRatio: indicator.paneHeightRatio },
+      zIndex: indicator.zIndex,
+      excludeFromAutoscale: indicator.excludeFromAutoscale,
+      overlayScaleWeight: indicator.overlayScaleWeight,
+      inputs: { ...indicator.inputs }
+    }));
+  };
   const setIndicators = (nextIndicators) => {
     indicators = nextIndicators.map((indicator) => normalizeIndicatorState(indicator));
     draw();
@@ -2541,6 +2791,9 @@ function createChart(element, options = {}) {
         visible: patch.visible ?? indicator.visible,
         pane: patch.pane ?? indicator.pane ?? plugin?.pane ?? "overlay",
         ...patch.paneHeightRatio !== void 0 || indicator.paneHeightRatio !== void 0 ? { paneHeightRatio: patch.paneHeightRatio ?? indicator.paneHeightRatio } : {},
+        zIndex: patch.zIndex === void 0 ? indicator.zIndex : Math.round(Number(patch.zIndex) || 0),
+        excludeFromAutoscale: patch.excludeFromAutoscale ?? indicator.excludeFromAutoscale,
+        overlayScaleWeight: patch.overlayScaleWeight === void 0 ? indicator.overlayScaleWeight : Math.min(1, Math.max(0, Number(patch.overlayScaleWeight) || 0)),
         type: patch.type ?? indicator.type,
         inputs: {
           ...indicator.inputs,
@@ -2590,6 +2843,8 @@ function createChart(element, options = {}) {
     setDoubleClickAction,
     registerIndicator,
     unregisterIndicator,
+    listBuiltInIndicators,
+    getIndicators,
     addIndicator,
     updateIndicator,
     removeIndicator,

package/dist/index.d.cts

@@ -4,6 +4,8 @@ interface ChartOptions {
     backgroundColor?: string;
     axisColor?: string;
     axis?: AxisOptions;
+    xAxis?: AxisOptions;
+    yAxis?: AxisOptions;
     priceDecimals?: number;
     stabilizePriceLabels?: boolean;
     priceLabelMinIntegerDigits?: number;
@@ -22,6 +24,9 @@ interface ChartOptions {
     candleBodyWidthRatio?: number;
     candleMinWidth?: number;
     candleWickWidth?: number;
+    tickSize?: number;
+    candleColorMode?: "openClose" | "prevClose";
+    candleColorEpsilon?: number;
     autoScaleSmoothing?: number;
     autoScaleIgnoreLatestCandle?: boolean;
     doubleClickEnabled?: boolean;
@@ -42,6 +47,9 @@ interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Rec
     visible?: boolean;
     pane?: IndicatorPane;
     paneHeightRatio?: number;
+    zIndex?: number;
+    excludeFromAutoscale?: boolean;
+    overlayScaleWeight?: number;
     inputs?: Partial<TInputs>;
 }
 interface IndicatorRenderContext {
@@ -65,6 +73,7 @@ interface IndicatorRenderContext {
     chartHeight: number;
     xFromIndex: (index: number) => number;
     yFromPrice: ((price: number) => number) | null;
+    getCandleDirectionByIndex: (index: number) => "up" | "down";
     candleSpacing: number;
     upColor: string;
     downColor: string;
@@ -77,6 +86,12 @@ interface IndicatorPlugin<TInputs extends Record<string, unknown> = Record<strin
     defaultInputs?: TInputs;
     draw: (ctx: CanvasRenderingContext2D, renderContext: IndicatorRenderContext, inputs: TInputs) => void;
 }
+interface BuiltInIndicatorInfo {
+    id: string;
+    name: string;
+    pane: IndicatorPane;
+    paneHeightRatio?: number;
+}
 interface DashPatternOptions {
     dotted: [number, number];
     dashed: [number, number];
@@ -268,6 +283,8 @@ interface ChartInstance {
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     registerIndicator: (plugin: IndicatorPlugin<any>) => void;
     unregisterIndicator: (type: string) => void;
+    listBuiltInIndicators: () => BuiltInIndicatorInfo[];
+    getIndicators: () => IndicatorInstanceOptions[];
     addIndicator: (type: string, inputs?: Record<string, unknown>, options?: Partial<IndicatorInstanceOptions>) => string;
     updateIndicator: (id: string, patch: Partial<IndicatorInstanceOptions>) => void;
     removeIndicator: (id: string) => void;
@@ -285,4 +302,4 @@ interface OhlcDataPoint {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };