hyperprop-charting-library 0.1.23 → 0.1.25

package/README.md

@@ -60,6 +60,40 @@ const chart = createChart(root, {
 });
 ```
 
+## Candle Color Behavior
+
+You can control how up/down candle color is decided:
+
+```ts
+const chart = createChart(root, {
+  // "openClose" (default) or "prevClose"
+  candleColorMode: "prevClose",
+  // -1 = auto epsilon from priceDecimals, 0 = strict compare
+  candleColorEpsilon: -1
+});
+```
+
+## 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
@@ -102,6 +136,15 @@ chart.updateIndicator(emaId, { inputs: { length: 55 } });
 chart.updateIndicator(volumeId, { paneHeightRatio: 0.1 });
 ```
 
+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.
@@ -142,6 +185,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,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,