hyperprop-charting-library 0.1.24 → 0.1.26

package/dist/index.js

@@ -109,6 +109,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,
@@ -127,6 +129,7 @@ var DEFAULT_OPTIONS = {
   candleBodyWidthRatio: 0.7,
   candleMinWidth: 0.5,
   candleWickWidth: 1,
+  tickSize: 0,
   candleColorMode: "openClose",
   candleColorEpsilon: -1,
   autoScaleSmoothing: 0.16,
@@ -364,6 +367,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;
@@ -453,6 +485,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",
@@ -461,8 +502,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;
@@ -471,8 +516,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))
@@ -491,9 +539,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();
     }
@@ -506,7 +556,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);
   }
 };
@@ -517,7 +571,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);
   }
 };
@@ -528,7 +586,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);
   }
 };
@@ -539,7 +601,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);
   }
 };
@@ -550,7 +616,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);
   }
 };
@@ -561,7 +631,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);
   }
 };
@@ -573,7 +647,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);
   }
 };
@@ -585,7 +663,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);
   }
 };
@@ -597,7 +675,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,
@@ -631,6 +709,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 ?? {}
@@ -686,6 +776,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 ?? {}
@@ -841,20 +934,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) => {
@@ -1386,6 +1515,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);
@@ -1400,6 +1533,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));
@@ -1451,8 +1587,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;
@@ -1612,7 +1787,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 }) => {
@@ -1722,7 +1897,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];
@@ -1779,7 +1957,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);
@@ -2550,6 +2731,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();
@@ -2579,6 +2781,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,
@@ -2628,6 +2833,8 @@ function createChart(element, options = {}) {
     setDoubleClickAction,
     registerIndicator,
     unregisterIndicator,
+    listBuiltInIndicators,
+    getIndicators,
     addIndicator,
     updateIndicator,
     removeIndicator,

package/docs/API.md

@@ -32,6 +32,8 @@ Top-level options:
 - `backgroundColor` (default `#101114`)
 - `axisColor` (legacy shorthand for axis line/text color)
 - `axis?: AxisOptions`
+- `xAxis?: AxisOptions` (overrides bottom-axis label text/font)
+- `yAxis?: AxisOptions` (overrides right-axis label text/font)
 - `priceDecimals` (default `2`, used for axis/ticker/line price labels)
 - `stabilizePriceLabels` (default `true`, prevents ticker/crosshair/price-tag width jitter)
 - `priceLabelMinIntegerDigits` (default `3`, baseline integer-digit width for stabilized labels)
@@ -50,6 +52,7 @@ Top-level options:
 - `candleBodyWidthRatio` (default `0.7`)
 - `candleMinWidth` (default `0.5`)
 - `candleWickWidth` (default `1`)
+- `tickSize` (default `0`; when > 0, formatter/pointer prices snap to tick)
 - `candleColorMode` (`"openClose" | "prevClose"`, default `"openClose"`)
 - `candleColorEpsilon` (default `-1` = auto from `priceDecimals`; set `0` to disable tolerance)
 - `autoScaleSmoothing` (default `0.16`)
@@ -248,6 +251,9 @@ Connector/fill visuals:
 - `visible?: boolean` (default `true`)
 - `pane?: "overlay" | "separate"`
 - `paneHeightRatio?: number` (for separate panes; `0.08` to `0.45` recommended)
+- `zIndex?: number` (render order; lower first)
+- `excludeFromAutoscale?: boolean` (default `true` for indicator instances)
+- `overlayScaleWeight?: number` (`0..1`; only used when `excludeFromAutoscale` is `false`)
 - `inputs?: Record<string, unknown>` (plugin-specific parameters)
 
 ### `IndicatorPlugin`
@@ -269,7 +275,7 @@ Connector/fill visuals:
 
 Built-in:
 
-- `"volume"`: separate pane histogram (uses `OhlcDataPoint.v`)
+- `"volume"`: overlay histogram by default (uses `OhlcDataPoint.v`; can be moved to separate pane)
 - `"sma"`: Simple Moving Average (overlay)
 - `"ema"`: Exponential Moving Average (overlay)
 - `"rsi"`: Relative Strength Index (separate pane, 30/50/70 guides)
@@ -297,6 +303,15 @@ Volume/VWMA note:
 
 - if your data has no `v`, `volume`/`vwma` will have limited or no output.
 
+Volume style inputs:
+
+- `upOpacity`, `downOpacity`
+- `upColor`, `downColor`
+- `minBarWidth`
+- `overlayHeightRatio` (when used as overlay)
+- `scaleMode` (`"visible"` default, or `"full"`)
+- `clampPercentile` (`0..1`, default `1`; e.g. `0.95` to reduce outlier crush)
+
 ---
 
 ## `ChartInstance` Methods
@@ -325,6 +340,8 @@ Volume/VWMA note:
 - `setDoubleClickAction(action: "reset" | "placeLimitOrder"): void`
 - `registerIndicator(plugin: IndicatorPlugin): 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`

package/docs/RECIPES.md

@@ -26,6 +26,25 @@ Use:
 - `autoScaleSmoothing` for smoother scale transitions
 - `autoScaleIgnoreLatestCandle` to reduce live-candle jitter
 
+## Tick-size aware chart precision
+
+```ts
+const chart = createChart(rootEl, {
+  tickSize: 0.25,
+  priceDecimals: 2
+});
+```
+
+## Style x-axis and y-axis labels differently
+
+```ts
+const chart = createChart(rootEl, {
+  axis: { lineColor: "#374151" },
+  xAxis: { textColor: "#9ca3af", fontSize: 11 },
+  yAxis: { textColor: "#e5e7eb", fontSize: 12 }
+});
+```
+
 ## Stabilize candle up/down coloring on tiny deltas
 
 ```ts
@@ -119,6 +138,15 @@ const rsiId = chart.addIndicator("rsi", { length: 14 }, { pane: "separate", pane
 const volumeId = chart.addIndicator("volume", { upOpacity: 0.72, downOpacity: 0.72 });
 ```
 
+## Prevent one volume spike from crushing all bars
+
+```ts
+const volumeId = chart.addIndicator("volume", {
+  scaleMode: "visible",   // default behavior
+  clampPercentile: 0.95   // clamp scaling reference to p95 of visible bars
+});
+```
+
 Available built-ins:
 
 - `volume`, `sma`, `ema`, `rsi`, `wma`, `vwma`, `rma`, `hma`, `stddev`, `atr`
@@ -138,6 +166,26 @@ Recommended range:
 
 - `0.08` to `0.45` (library clamps to safe bounds)
 
+## Use indicator z-order and autoscale influence
+
+```ts
+chart.addIndicator("ema", { length: 34 }, { zIndex: 5 });
+chart.addIndicator("wma", { length: 55 }, { zIndex: 10 });
+
+chart.addIndicator("sma", { length: 200 }, {
+  excludeFromAutoscale: false,
+  overlayScaleWeight: 0.25
+});
+```
+
+## Query built-ins and active indicator instances
+
+```ts
+const builtIns = chart.listBuiltInIndicators();
+const active = chart.getIndicators();
+console.log({ builtIns, active });
+```
+
 ## Remove or hide indicators
 
 ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",