hyperprop-charting-library 0.1.24 → 0.1.26

package/README.md

@@ -73,6 +73,27 @@ const chart = createChart(root, {
 });
 ```
 
+## Tick-Size Aware Precision
+
+```ts
+const chart = createChart(root, {
+  tickSize: 0.25,
+  priceDecimals: 2
+});
+```
+
+This keeps labels, pointer prices, and color tolerance aligned to market tick steps.
+
+## Per-Axis Label Styling
+
+```ts
+const chart = createChart(root, {
+  axis: { lineColor: "#374151" },
+  xAxis: { textColor: "#9ca3af", fontSize: 11 },
+  yAxis: { textColor: "#e5e7eb", fontSize: 12 }
+});
+```
+
 ## Crosshair "+" Button
 
 ```ts
@@ -115,6 +136,26 @@ chart.updateIndicator(emaId, { inputs: { length: 55 } });
 chart.updateIndicator(volumeId, { paneHeightRatio: 0.1 });
 ```
 
+Volume scaling tip (for large spikes):
+
+```ts
+chart.updateIndicator(volumeId, {
+  inputs: {
+    scaleMode: "visible",   // default; scales using current viewport only
+    clampPercentile: 0.95   // optional outlier clamp
+  }
+});
+```
+
+Autoscale controls per indicator:
+
+```ts
+chart.addIndicator("ema", { length: 50 }, {
+  excludeFromAutoscale: false,
+  overlayScaleWeight: 0.25
+});
+```
+
 Volume note:
 
 - `volume` and `vwma` require `OhlcDataPoint.v` for best results.
@@ -155,6 +196,7 @@ const myId = chart.addIndicator("my-line");
 - `chart.onOrderAction(handler)` / `chart.onChartClick(handler)` / `chart.onCrosshairMove(handler)` / `chart.onCrosshairPriceAction(handler)`
 - `chart.setDoubleClickEnabled(enabled)` / `chart.setDoubleClickAction(action)`
 - `chart.registerIndicator(plugin)` / `chart.addIndicator(type, inputs?, options?)` / `chart.updateIndicator(id, patch)` / `chart.removeIndicator(id)`
+- `chart.listBuiltInIndicators()` / `chart.getIndicators()`
 - `chart.zoomInX()` / `chart.zoomOutX()` / `chart.panX(bars)` / `chart.resetViewport()`
 - `chart.resize(width, height)` / `chart.destroy()`
 

package/dist/hyperprop-charting-library.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,7 @@ var DEFAULT_OPTIONS = {
   candleBodyWidthRatio: 0.7,
   candleMinWidth: 0.5,
   candleWickWidth: 1,
+  tickSize: 0,
   candleColorMode: "openClose",
   candleColorEpsilon: -1,
   autoScaleSmoothing: 0.16,
@@ -388,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;
@@ -477,6 +509,15 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
   }
   ctx.restore();
 };
+var getPercentileValue = (values, percentile) => {
+  if (values.length === 0) {
+    return 1;
+  }
+  const sorted = [...values].sort((a, b) => a - b);
+  const clamped = Math.min(1, Math.max(0, percentile));
+  const index = Math.min(sorted.length - 1, Math.max(0, Math.ceil(clamped * sorted.length) - 1));
+  return sorted[index] ?? 1;
+};
 var BUILTIN_VOLUME_INDICATOR = {
   id: "volume",
   name: "Volume",
@@ -485,8 +526,12 @@ var BUILTIN_VOLUME_INDICATOR = {
   defaultInputs: {
     upOpacity: 0.7,
     downOpacity: 0.7,
+    upColor: "",
+    downColor: "",
     minBarWidth: 1,
-    overlayHeightRatio: 0.22
+    overlayHeightRatio: 0.22,
+    scaleMode: "visible",
+    clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
     const { data, startIndex, endIndex, chartTop, chartBottom, candleSpacing, xFromIndex, upColor, downColor } = renderContext;
@@ -495,8 +540,11 @@ var BUILTIN_VOLUME_INDICATOR = {
     const overlayHeightRatio = Math.min(0.45, Math.max(0.08, Number(inputs.overlayHeightRatio) || 0.22));
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
-    const visiblePoints = data.slice(startIndex, endIndex + 1);
-    const maxVolume = Math.max(1, ...visiblePoints.map((point) => point.v ?? 0));
+    const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
+    const scalingPoints = scaleMode === "full" ? data : data.slice(startIndex, endIndex + 1);
+    const scalingVolumes = scalingPoints.map((point) => Math.max(0, point.v ?? 0)).filter((value) => value > 0);
+    const clampPercentile = Number.isFinite(inputs.clampPercentile) ? Number(inputs.clampPercentile) : 1;
+    const maxVolume = Math.max(1, getPercentileValue(scalingVolumes, clampPercentile));
     const barWidth = Math.max(
       Math.max(1, Number(inputs.minBarWidth) || 1),
       Math.min(Math.max(1, candleSpacing - 1), Math.floor(candleSpacing * 0.7))
@@ -515,9 +563,11 @@ var BUILTIN_VOLUME_INDICATOR = {
       const barY = Math.round(paneBottom - volumeHeight);
       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 = direction === "up" ? upColor : downColor;
+      ctx.fillStyle = direction === "up" ? upBarColor : downBarColor;
       ctx.fillRect(barX, barY, Math.max(1, Math.round(barWidth)), volumeHeight);
       ctx.restore();
     }
@@ -530,7 +580,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);
   }
 };
@@ -541,7 +595,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);
   }
 };
@@ -552,7 +610,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);
   }
 };
@@ -563,7 +625,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);
   }
 };
@@ -574,7 +640,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);
   }
 };
@@ -585,7 +655,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);
   }
 };
@@ -597,7 +671,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);
   }
 };
@@ -609,7 +687,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);
   }
 };
@@ -621,7 +699,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,
@@ -655,6 +733,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 ?? {}
@@ -710,6 +800,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 ?? {}
@@ -865,20 +958,56 @@ 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 decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
-    return Number(price.toFixed(decimals));
+    const rounded = quantizeToTickSize(price);
+    const decimals = getDisplayPriceDecimals();
+    return Number(rounded.toFixed(decimals));
   };
   const getResolvedCandleColorEpsilon = () => {
     const configured = mergedOptions.candleColorEpsilon;
     if (configured >= 0) {
       return configured;
     }
-    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    const tickSize = getConfiguredTickSize();
+    if (tickSize > 0) {
+      return tickSize / 2;
+    }
+    const decimals = getDisplayPriceDecimals();
     return decimals > 0 ? 0.5 / 10 ** decimals : 0;
   };
   const getDirectionFromDelta = (delta) => {
@@ -1410,6 +1539,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);
@@ -1424,6 +1557,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));
@@ -1475,8 +1611,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;
@@ -1636,7 +1811,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 }) => {
@@ -1746,7 +1921,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];
@@ -1803,7 +1981,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);
@@ -2574,6 +2755,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();
@@ -2603,6 +2805,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,
@@ -2652,6 +2857,8 @@ function createChart(element, options = {}) {
     setDoubleClickAction,
     registerIndicator,
     unregisterIndicator,
+    listBuiltInIndicators,
+    getIndicators,
     addIndicator,
     updateIndicator,
     removeIndicator,

package/dist/hyperprop-charting-library.d.ts

@@ -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,7 @@ interface ChartOptions {
     candleBodyWidthRatio?: number;
     candleMinWidth?: number;
     candleWickWidth?: number;
+    tickSize?: number;
     candleColorMode?: "openClose" | "prevClose";
     candleColorEpsilon?: number;
     autoScaleSmoothing?: number;
@@ -44,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 {
@@ -80,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];
@@ -271,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;
@@ -288,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 };