hyperprop-charting-library 0.1.49 → 0.1.51

package/dist/index.js

@@ -74,6 +74,10 @@ var DEFAULT_LABELS_OPTIONS = {
   askPrice: Number.NaN,
   showIndicatorNames: false,
   showIndicatorValues: false,
+  showIndicatorValueLabels: true,
+  indicatorLegendPosition: "top-left",
+  indicatorLegendOffsetX: 10,
+  indicatorLegendOffsetY: 10,
   showCountdownToBarClose: false,
   noOverlapping: true,
   backgroundColor: "#0b1220",
@@ -507,7 +511,7 @@ var drawOverlaySeries = (ctx, renderContext, values, color, width) => {
   }
   ctx.restore();
 };
-var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride, maxOverride, guideLines) => {
+var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride, maxOverride, guideLines, options = {}) => {
   const visible = [];
   for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
     const value = values[index];
@@ -515,7 +519,7 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
       visible.push(value);
     }
   }
-  if (visible.length === 0) return;
+  if (visible.length === 0) return void 0;
   const minValue = minOverride ?? Math.min(...visible);
   const maxValue = maxOverride ?? Math.max(...visible);
   const range = maxValue - minValue || 1;
@@ -564,6 +568,51 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
     }
   }
   ctx.restore();
+  let latestValue = null;
+  for (let index = values.length - 1; index >= 0; index -= 1) {
+    const value = values[index];
+    if (Number.isFinite(value ?? Number.NaN)) {
+      latestValue = value;
+      break;
+    }
+  }
+  const decimals = options.decimals ?? 2;
+  const formatValue = (value) => value.toFixed(decimals);
+  const axisTicks = options.axisTicks ?? guideLines;
+  const paneInfo = {
+    ...options.title ? { title: options.title } : {},
+    axis: {
+      min: minValue,
+      max: maxValue,
+      ...axisTicks ? { ticks: axisTicks } : {},
+      decimals
+    }
+  };
+  if (guideLines) {
+    paneInfo.guideLines = guideLines.map((value) => ({ value, label: formatValue(value), style: "dotted" }));
+  }
+  if (latestValue !== null) {
+    paneInfo.legendValues = [
+      {
+        ...options.legendLabel ? { label: options.legendLabel } : {},
+        value: latestValue,
+        text: formatValue(latestValue),
+        color
+      }
+    ];
+  }
+  if (options.valueLabel !== false && latestValue !== null) {
+    paneInfo.valueLabels = [
+      {
+        value: latestValue,
+        text: formatValue(latestValue),
+        color: options.valueLabelColor ?? color,
+        backgroundColor: options.valueLabelBackgroundColor ?? options.valueLabelColor ?? color,
+        textColor: options.valueLabelTextColor ?? "#0f172a"
+      }
+    ];
+  }
+  return paneInfo;
 };
 var getPercentileValue = (values, percentile) => {
   if (values.length === 0) {
@@ -736,7 +785,10 @@ var BUILTIN_STDDEV_INDICATOR = {
       renderContext.data,
       () => computeStdDevSeries(renderContext.data, length, inputs.source ?? "close")
     );
-    drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#f97316", Number(inputs.width) || 2);
+    return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#f97316", Number(inputs.width) || 2, void 0, void 0, void 0, {
+      title: `StdDev ${length}`,
+      decimals: 2
+    });
   }
 };
 var BUILTIN_ATR_INDICATOR = {
@@ -748,7 +800,10 @@ var BUILTIN_ATR_INDICATOR = {
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
     const values = withCachedSeries(`atr|${length}`, renderContext.data, () => computeAtrSeries(renderContext.data, length));
-    drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#eab308", Number(inputs.width) || 2);
+    return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#eab308", Number(inputs.width) || 2, void 0, void 0, void 0, {
+      title: `ATR ${length}`,
+      decimals: 2
+    });
   }
 };
 var BUILTIN_RSI_INDICATOR = {
@@ -760,7 +815,7 @@ var BUILTIN_RSI_INDICATOR = {
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
     const values = withCachedSeries(`rsi|${length}`, renderContext.data, () => computeRsiSeries(renderContext.data, length));
-    drawSeparateSeries(
+    return drawSeparateSeries(
       ctx,
       renderContext,
       values,
@@ -768,7 +823,15 @@ var BUILTIN_RSI_INDICATOR = {
       Number(inputs.width) || 2,
       0,
       100,
-      [30, 50, 70]
+      [30, 50, 70],
+      {
+        title: `RSI ${length}`,
+        axisTicks: [0, 30, 50, 70, 100],
+        decimals: 2,
+        valueLabelColor: "#9E9E9E",
+        valueLabelBackgroundColor: "#9E9E9E",
+        valueLabelTextColor: "#0f172a"
+      }
     );
   }
 };
@@ -1332,6 +1395,11 @@ function createChart(element, options = {}) {
     const pad = (value) => String(value).padStart(2, "0");
     return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
   };
+  const getRightAxisLabelX = (chartRight) => chartRight + 1;
+  const getRightAxisLabelWidth = (chartRight, contentWidth) => {
+    const scaleWidth = Math.max(0, Math.floor(width - getRightAxisLabelX(chartRight)));
+    return Math.max(contentWidth, scaleWidth);
+  };
   const drawPriceLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
     if (!mergedLine.visible || !Number.isFinite(mergedLine.price)) {
@@ -1356,8 +1424,9 @@ function createChart(element, options = {}) {
     ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
     const labelPaddingX = 8;
     const labelHeight = 20;
-    const labelWidth = mergedLine.label === void 0 ? getPriceLabelWidth(labelText, labelPaddingX) : Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
-    const labelX = chartRight + 4;
+    const measuredLabelWidth = mergedLine.label === void 0 ? getPriceLabelWidth(labelText, labelPaddingX) : Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
+    const labelWidth = getRightAxisLabelWidth(chartRight, measuredLabelWidth);
+    const labelX = getRightAxisLabelX(chartRight);
     const labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
     ctx.fillStyle = mergedLine.labelBackgroundColor;
     fillRoundedRect(
@@ -1595,11 +1664,11 @@ function createChart(element, options = {}) {
     const priceText = formatPrice(renderPrice);
     const pricePaddingX = 8;
     const measuredPriceWidth = getPriceLabelWidth(priceText, pricePaddingX);
-    const priceWidth = mergedLine.id === void 0 ? measuredPriceWidth : Math.max(measuredPriceWidth, orderPriceTagWidthById.get(mergedLine.id) ?? 0);
+    const priceWidth = mergedLine.id === void 0 ? getRightAxisLabelWidth(chartRight, measuredPriceWidth) : getRightAxisLabelWidth(chartRight, Math.max(measuredPriceWidth, orderPriceTagWidthById.get(mergedLine.id) ?? 0));
     if (mergedLine.id) {
       orderPriceTagWidthById.set(mergedLine.id, priceWidth);
     }
-    const priceX = chartRight + 4;
+    const priceX = getRightAxisLabelX(chartRight);
     const priceY = placeRightAxisLabel(targetLabelY, labelHeight, chartTop, chartBottom - labelHeight);
     ctx.fillStyle = mergedLine.labelBackgroundColor ?? color;
     fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, borderRadius);
@@ -1674,9 +1743,63 @@ function createChart(element, options = {}) {
     ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
     ctx.fillStyle = mergedOptions.backgroundColor;
     ctx.fillRect(0, 0, width, height);
+    const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
+    const estimateRightMargin = () => {
+      const paddingX = Math.max(4, labels.labelPaddingX);
+      const measure = (text) => Math.ceil(ctx.measureText(text).width) + paddingX * 2;
+      let required = margin.right - 1;
+      const include = (text) => {
+        const normalized = text?.trim();
+        if (normalized) {
+          required = Math.max(required, measure(normalized));
+        }
+      };
+      const ticker2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+      const lastPoint2 = data[data.length - 1];
+      if ((ticker2.visible ?? true) && labels.showLastPrice && lastPoint2) {
+        include(formatPrice(lastPoint2.c));
+        if (ticker2.labelSubtext) include(String(ticker2.labelSubtext));
+        for (const subtext of ticker2.labelSubtexts ?? []) {
+          include(String(subtext));
+        }
+      }
+      if (labels.showSymbolName) {
+        include(labels.symbolName);
+      }
+      if (labels.showPreviousClose) {
+        const previousCloseCandidate = Number.isFinite(labels.previousClosePrice) ? labels.previousClosePrice : data.length > 1 ? data[data.length - 2]?.c : Number.NaN;
+        if (previousCloseCandidate !== void 0 && Number.isFinite(previousCloseCandidate)) {
+          include(`PDC ${formatPrice(previousCloseCandidate)}`);
+        }
+      }
+      if (labels.showHighLow && data.length > 0) {
+        include(`H ${formatPrice(Math.max(...data.map((point) => point.h)))}`);
+        include(`L ${formatPrice(Math.min(...data.map((point) => point.l)))}`);
+      }
+      if (labels.showBidAsk) {
+        if (Number.isFinite(labels.bidPrice)) include(`B ${formatPrice(labels.bidPrice)}`);
+        if (Number.isFinite(labels.askPrice)) include(`A ${formatPrice(labels.askPrice)}`);
+      }
+      for (const line of priceLines) {
+        const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
+        if (mergedLine.visible && Number.isFinite(mergedLine.price)) {
+          include(mergedLine.label ?? formatPrice(mergedLine.price));
+        }
+      }
+      for (const line of orderLines) {
+        const mergedLine = { ...DEFAULT_ORDER_LINE_OPTIONS, ...line };
+        const renderPrice = mergedLine.behavior === "follow" && Number.isFinite(mergedLine.followPrice) ? mergedLine.followPrice : mergedLine.price;
+        if (mergedLine.visible && Number.isFinite(renderPrice)) {
+          include(formatPrice(renderPrice));
+        }
+      }
+      const maxRightMargin = Math.max(margin.right, width - margin.left - 160);
+      return Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+    };
+    const rightMargin = estimateRightMargin();
     const chartLeft = margin.left;
     const chartTop = margin.top;
-    const chartWidth = width - margin.left - margin.right;
+    const chartWidth = width - margin.left - rightMargin;
     const fullChartHeight = height - margin.top - margin.bottom;
     const fullChartBottom = chartTop + fullChartHeight;
     const chartRight = chartLeft + chartWidth;
@@ -2029,7 +2152,7 @@ function createChart(element, options = {}) {
         ctx.beginPath();
         ctx.rect(chartLeft + 1, paneTop + 1, Math.max(0, chartWidth - 2), Math.max(0, paneHeight - 2));
         ctx.clip();
-        plugin.draw(
+        const paneInfo = plugin.draw(
           ctx,
           {
             data,
@@ -2062,6 +2185,63 @@ function createChart(element, options = {}) {
         ctx.lineTo(crisp(chartRight), crisp(paneTop));
         ctx.stroke();
         ctx.restore();
+        const axisInfo = paneInfo?.axis;
+        if (axisInfo && Number.isFinite(axisInfo.min) && Number.isFinite(axisInfo.max) && axisInfo.max !== axisInfo.min) {
+          const paneRange = axisInfo.max - axisInfo.min;
+          const yFromPaneValue = (value) => {
+            const ratio = (value - axisInfo.min) / paneRange;
+            return paneBottom - ratio * paneHeight;
+          };
+          const formatPaneValue = (value) => {
+            if (axisInfo.format) {
+              return axisInfo.format(value);
+            }
+            const decimals = axisInfo.decimals ?? (Math.abs(paneRange) <= 2 ? 2 : Math.abs(paneRange) <= 20 ? 1 : 0);
+            return value.toFixed(Math.max(0, Math.min(8, Math.round(decimals))));
+          };
+          const axisTicks = axisInfo.ticks && axisInfo.ticks.length > 0 ? axisInfo.ticks : [axisInfo.min, axisInfo.min + paneRange / 2, axisInfo.max];
+          const uniqueTicks = Array.from(new Set(axisTicks.filter((tick) => Number.isFinite(tick))));
+          ctx.save();
+          ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
+          for (const tick of uniqueTicks) {
+            if (tick < axisInfo.min || tick > axisInfo.max) {
+              continue;
+            }
+            drawText(formatPaneValue(tick), chartRight + 6, yFromPaneValue(tick), "left", "middle", yAxis.textColor);
+          }
+          ctx.restore();
+          if (labels.visible) {
+            const prevFont = ctx.font;
+            ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+            const legendTitle = paneInfo.title ?? plugin.name;
+            const legendValues = paneInfo.legendValues ?? [];
+            const legendParts = [
+              legendTitle,
+              ...legendValues.map((value) => value.text ?? (value.value === void 0 ? "" : formatPaneValue(value.value))).filter(Boolean)
+            ].filter(Boolean);
+            if (legendParts.length > 0) {
+              drawText(legendParts.join("  "), chartLeft + 10, paneTop + 8, "left", "top", labels.indicatorTextColor);
+            }
+            for (const label of paneInfo.valueLabels ?? []) {
+              if (!labels.showIndicatorValueLabels) {
+                continue;
+              }
+              if (!Number.isFinite(label.value) || label.value < axisInfo.min || label.value > axisInfo.max) {
+                continue;
+              }
+              const text = label.text ?? formatPaneValue(label.value);
+              const labelPaddingX = 7;
+              const labelHeight = Math.max(16, yAxisFontSize + 8);
+              const labelWidth = getRightAxisLabelWidth(chartRight, Math.ceil(ctx.measureText(text).width) + labelPaddingX * 2);
+              const labelX = getRightAxisLabelX(chartRight);
+              const labelY = clamp(yFromPaneValue(label.value) - labelHeight / 2, paneTop + 2, paneBottom - labelHeight - 2);
+              ctx.fillStyle = label.backgroundColor ?? label.color ?? labels.backgroundColor;
+              fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, Math.max(0, labels.borderRadius));
+              drawText(text, labelX + labelPaddingX, labelY + labelHeight / 2, "left", "middle", label.textColor ?? labels.textColor);
+            }
+            ctx.font = prevFont;
+          }
+        }
       });
     }
     if (crosshair.visible && crosshairPoint && crosshair.showVertical) {
@@ -2093,7 +2273,6 @@ function createChart(element, options = {}) {
       drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
       ctx.font = prevFont;
     }
-    const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
     resetLabelSlots(labels.noOverlapping);
     const priceAxisLabels = [];
     const addPriceAxisLabel = (label) => {
@@ -2257,12 +2436,13 @@ function createChart(element, options = {}) {
           ctx.font = baseFont;
         }
         const labelTextWidth = Math.max(primaryWidth, subtextWidth);
+        const labelWidth = getRightAxisLabelWidth(chartRight, labelTextWidth);
         return {
           ...label,
           subtexts,
           subtextFontSize,
           height: labelHeight,
-          width: labelTextWidth,
+          width: labelWidth,
           targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
           y: 0
         };
@@ -2292,7 +2472,7 @@ function createChart(element, options = {}) {
         );
         rightAxisLabelSlots.sort((a, b) => a.y - b.y);
       }
-      const labelX = chartRight + 4;
+      const labelX = getRightAxisLabelX(chartRight);
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;
         fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, label.height, labelRadius);
@@ -2337,7 +2517,14 @@ function createChart(element, options = {}) {
         const prevFont = ctx.font;
         ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
         const legendText = labelEntries.join("   ");
-        drawText(legendText, chartLeft + 10, chartTop + 10, "left", "top", labels.indicatorTextColor);
+        const offsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
+        const offsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
+        const position = labels.indicatorLegendPosition;
+        const isRight = position === "top-right" || position === "bottom-right";
+        const isBottom = position === "bottom-left" || position === "bottom-right";
+        const legendX = isRight ? chartRight - offsetX : chartLeft + offsetX;
+        const legendY = isBottom ? chartBottom - offsetY : chartTop + offsetY;
+        drawText(legendText, legendX, legendY, isRight ? "right" : "left", isBottom ? "bottom" : "top", labels.indicatorTextColor);
         ctx.font = prevFont;
       }
     }
@@ -2395,8 +2582,8 @@ function createChart(element, options = {}) {
       if (crosshair.showPriceLabel) {
         const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
         const priceText = formatPrice(hoverPrice);
-        const priceWidth = getPriceLabelWidth(priceText, labelPaddingX);
-        const priceX = chartRight + 4;
+        const priceWidth = getRightAxisLabelWidth(chartRight, getPriceLabelWidth(priceText, labelPaddingX));
+        const priceX = getRightAxisLabelX(chartRight);
         const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
         ctx.fillStyle = labelBackground;
         fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, labelRadius);

package/docs/API.md

@@ -171,6 +171,10 @@ TradingView-style labels can be controlled from a single top-level object:
 - `bidPrice`, `askPrice` (optional market data values for bid/ask labels)
 - `showIndicatorNames` (default `false`; draws active indicator names in the chart)
 - `showIndicatorValues` (default `false`; appends simple indicator input values)
+- `showIndicatorValueLabels` (default `true`; controls separate-pane right-side indicator value tags, such as RSI's latest-value label)
+- `indicatorLegendPosition` (`"top-left" | "top-right" | "bottom-left" | "bottom-right"`, default `"top-left"`)
+- `indicatorLegendOffsetX` (default `10`)
+- `indicatorLegendOffsetY` (default `10`; increase this if your frontend overlays a symbol/OHLC HUD in the top-left)
 - `showCountdownToBarClose` (default `false`; draws a bottom-axis countdown based on candle time spacing)
 - `noOverlapping` (default `true`; stacks price-scale labels, price-line tags, order/position price tags, and order widgets so they do not cover each other)
 - Style fields: `backgroundColor`, `textColor`, `mutedTextColor`, `symbolNameBackgroundColor`, `symbolNameTextColor`, `previousCloseColor`, `highLowColor`, `bidColor`, `askColor`, `indicatorTextColor`, `borderRadius`, `labelHeight`, `labelPaddingX`
@@ -190,6 +194,9 @@ createChart(root, {
     askPrice: 5235.0,
     showIndicatorNames: true,
     showIndicatorValues: true,
+    showIndicatorValueLabels: true,
+    indicatorLegendPosition: "top-left",
+    indicatorLegendOffsetY: 34,
     showCountdownToBarClose: true,
     noOverlapping: true
   }
@@ -311,7 +318,7 @@ Connector/fill visuals:
 - `pane?: "overlay" | "separate"` (default `"overlay"`)
 - `paneHeightRatio?: number` (for separate panes)
 - `defaultInputs?: Record<string, unknown>`
-- `draw(ctx, renderContext, inputs): void`
+- `draw(ctx, renderContext, inputs): void | IndicatorPaneRenderInfo`
 
 `IndicatorRenderContext` includes:
 
@@ -319,14 +326,51 @@ Connector/fill visuals:
 - pane bounds (`chartLeft`, `chartRight`, `chartTop`, `chartBottom`, `chartWidth`, `chartHeight`)
 - `xFromIndex(index)` helper
 - `yFromPrice(price)` helper (available for overlay indicators, `null` for separate-pane indicators)
+- `getCandleDirectionByIndex(index)` and `getVolumeByIndex(index)` helpers
 - theme colors (`upColor`, `downColor`)
 
+For separate-pane indicators, return `IndicatorPaneRenderInfo` from `draw()` when the core should render TradingView-style pane UI:
+
+```ts
+type IndicatorPaneRenderInfo = {
+  title?: string;
+  axis?: {
+    min: number;
+    max: number;
+    ticks?: number[];
+    decimals?: number;
+    format?: (value: number) => string;
+  };
+  guideLines?: Array<{
+    value: number;
+    label?: string;
+    color?: string;
+    style?: "solid" | "dotted" | "dashed";
+  }>;
+  legendValues?: Array<{
+    label?: string;
+    value?: number;
+    text?: string;
+    color?: string;
+  }>;
+  valueLabels?: Array<{
+    value: number;
+    text?: string;
+    color?: string;
+    backgroundColor?: string;
+    textColor?: string;
+  }>;
+};
+```
+
+The core uses this metadata to draw separate-pane right-side axis values, top-left pane legends, guide-level labels, and latest-value tags. Existing plugins can keep returning nothing.
+
 Built-in:
 
 - `"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)
+- `"rsi"`: Relative Strength Index (separate pane, 30/50/70 guides, 0/30/50/70/100 axis labels, latest-value tag)
 - `"wma"`: Weighted Moving Average (overlay)
 - `"vwma"`: Volume Weighted Moving Average (overlay, uses `OhlcDataPoint.v`)
 - `"rma"`: Wilder's Moving Average (overlay)

package/docs/RECIPES.md

@@ -146,6 +146,46 @@ const rsiId = chart.addIndicator("rsi", { length: 14 }, { pane: "separate", pane
 const volumeId = chart.addIndicator("volume", { upOpacity: 0.72, downOpacity: 0.72 });
 ```
 
+## Move the main indicator legend away from a HUD
+
+The main overlay indicator legend defaults to the chart pane's top-left corner. If your app renders a symbol/OHLC HUD over the canvas, move the legend with `labels.indicatorLegend*`.
+
+```ts
+const chart = createChart(root, {
+  labels: {
+    showIndicatorNames: true,
+    showIndicatorValues: true,
+    indicatorLegendPosition: "top-left",
+    indicatorLegendOffsetX: 10,
+    indicatorLegendOffsetY: 34
+  }
+});
+```
+
+You can also place it in another corner:
+
+```ts
+chart.updateOptions({
+  labels: {
+    indicatorLegendPosition: "top-right",
+    indicatorLegendOffsetX: 12,
+    indicatorLegendOffsetY: 10
+  }
+});
+```
+
+## Hide separate-pane indicator value tags
+
+RSI and other separate-pane indicators can draw a latest-value tag on the right axis. Hide those tags while keeping the pane scale and legend:
+
+```ts
+chart.updateOptions({
+  labels: {
+    showIndicatorValueLabels: false
+  }
+});
+```
+
 ## Prevent one volume spike from crushing all bars
 
 ```ts
@@ -160,6 +200,78 @@ Available built-ins:
 
 - `volume`, `sma`, `ema`, `rsi`, `wma`, `vwma`, `rma`, `hma`, `stddev`, `atr`
 
+## Add a custom separate-pane indicator with scale labels
+
+Separate-pane plugins can return pane metadata from `draw()` so the chart renders the right-side scale, top-left legend, and latest-value tag.
+
+```ts
+import { type IndicatorPlugin } from "hyperprop-charting-library";
+
+const momentumPlugin: IndicatorPlugin<{ length: number; color: string }> = {
+  id: "momentum",
+  name: "Momentum",
+  pane: "separate",
+  paneHeightRatio: 0.18,
+  defaultInputs: { length: 10, color: "#38bdf8" },
+  draw: (ctx, renderContext, inputs) => {
+    const values = renderContext.data.map((point, index, data) => {
+      const prior = data[index - inputs.length];
+      return prior ? point.c - prior.c : null;
+    });
+    const visibleValues = values
+      .slice(renderContext.startIndex, renderContext.endIndex + 1)
+      .filter((value): value is number => Number.isFinite(value ?? Number.NaN));
+    if (visibleValues.length === 0) return;
+
+    const maxAbs = Math.max(...visibleValues.map((value) => Math.abs(value)), 1);
+    const min = -maxAbs;
+    const max = maxAbs;
+    const yFromValue = (value: number) => {
+      const ratio = (value - min) / (max - min || 1);
+      return renderContext.chartBottom - ratio * renderContext.chartHeight;
+    };
+
+    ctx.save();
+    ctx.strokeStyle = inputs.color;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    let drawing = false;
+    for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+      const value = values[index];
+      if (!Number.isFinite(value ?? Number.NaN)) {
+        drawing = false;
+        continue;
+      }
+      const x = renderContext.xFromIndex(index);
+      const y = yFromValue(value as number);
+      if (!drawing) {
+        ctx.moveTo(x, y);
+        drawing = true;
+      } else {
+        ctx.lineTo(x, y);
+      }
+    }
+    ctx.stroke();
+    ctx.restore();
+
+    const latest = [...values].reverse().find((value): value is number => Number.isFinite(value ?? Number.NaN));
+    return {
+      title: `Momentum ${inputs.length}`,
+      axis: { min, max, ticks: [min, 0, max], decimals: 2 },
+      guideLines: [{ value: 0, label: "0", style: "dotted" }],
+      legendValues: latest === undefined ? [] : [{ value: latest, text: latest.toFixed(2), color: inputs.color }],
+      valueLabels:
+        latest === undefined
+          ? []
+          : [{ value: latest, text: latest.toFixed(2), backgroundColor: inputs.color, textColor: "#0f172a" }]
+    };
+  }
+};
+
+chart.registerIndicator(momentumPlugin);
+chart.addIndicator("momentum", { length: 10 });
+```
+
 ## Resize indicator pane from frontend
 
 Use `paneHeightRatio` so your app can wire a drag handle or slider:

package/package.json

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