hyperprop-charting-library 0.1.48 → 0.1.50

package/dist/index.js

@@ -74,6 +74,9 @@ var DEFAULT_LABELS_OPTIONS = {
   askPrice: Number.NaN,
   showIndicatorNames: false,
   showIndicatorValues: false,
+  indicatorLegendPosition: "top-left",
+  indicatorLegendOffsetX: 10,
+  indicatorLegendOffsetY: 10,
   showCountdownToBarClose: false,
   noOverlapping: true,
   backgroundColor: "#0b1220",
@@ -507,7 +510,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 +518,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 +567,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,
+        backgroundColor: color,
+        textColor: "#0f172a"
+      }
+    ];
+  }
+  return paneInfo;
 };
 var getPercentileValue = (values, percentile) => {
   if (values.length === 0) {
@@ -736,7 +784,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 +799,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 +814,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 +822,12 @@ 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
+      }
     );
   }
 };
@@ -867,6 +926,9 @@ function createChart(element, options = {}) {
   let crosshairPoint = null;
   let doubleClickEnabled = mergedOptions.doubleClickEnabled;
   let doubleClickAction = mergedOptions.doubleClickAction;
+  let noOverlappingLineLabels = DEFAULT_LABELS_OPTIONS.noOverlapping;
+  let rightAxisLabelSlots = [];
+  let plotLabelSlots = [];
   let smoothedTickerPrice = null;
   let tickerPriceTarget = null;
   let smoothedTickerVolume = null;
@@ -963,6 +1025,33 @@ function createChart(element, options = {}) {
   const clamp = (value, min, max) => {
     return Math.min(max, Math.max(min, value));
   };
+  const resetLabelSlots = (enabled) => {
+    noOverlappingLineLabels = enabled;
+    rightAxisLabelSlots = [];
+    plotLabelSlots = [];
+  };
+  const placeLabelSlot = (targetY, height2, minY, maxY, slots, gap = 2) => {
+    const safeMaxY = Math.max(minY, maxY);
+    const clampedTarget = clamp(targetY, minY, safeMaxY);
+    if (!noOverlappingLineLabels || height2 <= 0) {
+      return clampedTarget;
+    }
+    const overlaps = (y) => slots.some((slot) => y < slot.y + slot.height + gap && y + height2 + gap > slot.y);
+    const candidates = [clampedTarget];
+    for (const slot of slots) {
+      candidates.push(slot.y - height2 - gap, slot.y + slot.height + gap);
+    }
+    const placedY = candidates.map((candidate) => clamp(candidate, minY, safeMaxY)).sort((a, b) => Math.abs(a - clampedTarget) - Math.abs(b - clampedTarget)).find((candidate) => !overlaps(candidate)) ?? clampedTarget;
+    slots.push({ y: placedY, height: height2 });
+    slots.sort((a, b) => a.y - b.y);
+    return placedY;
+  };
+  const placeRightAxisLabel = (targetY, height2, minY, maxY) => {
+    return placeLabelSlot(targetY, height2, minY, maxY, rightAxisLabelSlots);
+  };
+  const placePlotLabel = (targetY, height2, minY, maxY) => {
+    return placeLabelSlot(targetY, height2, minY, maxY, plotLabelSlots);
+  };
   const dashPatterns = {
     dotted: mergedOptions.dashPatterns.dotted ?? DEFAULT_DASH_PATTERNS.dotted,
     dashed: mergedOptions.dashPatterns.dashed ?? DEFAULT_DASH_PATTERNS.dashed,
@@ -1302,6 +1391,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)) {
@@ -1326,9 +1420,10 @@ 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 labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
+    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(
       Math.round(labelX),
@@ -1461,17 +1556,18 @@ function createChart(element, options = {}) {
       leftWidgetX = maxWidgetX;
     }
     leftWidgetX = clamp(leftWidgetX, leftWidgetXBase, maxWidgetX);
-    const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
+    const targetLabelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
+    const widgetY = placePlotLabel(targetLabelY, labelHeight, chartTop, chartBottom - labelHeight);
     const borderRadius = Math.max(0, mergedLine.labelBorderRadius);
     const widgetBackground = mergedOptions.backgroundColor;
     const widgetBorder = color;
     const textColor = line.labelTextColor ?? (mergedLine.type === "takeProfit" ? "#5eead4" : mergedLine.type === "stop" ? "#fbbf24" : mergedLine.labelTextColor);
     const mainWidgetX = leftWidgetX + actionButtonsTotalWidth + actionButtonsGap;
     ctx.fillStyle = widgetBackground;
-    fillRoundedRect(Math.round(mainWidgetX), Math.round(labelY), mainWidgetWidth, labelHeight, borderRadius);
+    fillRoundedRect(Math.round(mainWidgetX), Math.round(widgetY), mainWidgetWidth, labelHeight, borderRadius);
     ctx.strokeStyle = widgetBorder;
     ctx.lineWidth = 1;
-    strokeRoundedRect(Math.round(mainWidgetX), Math.round(labelY), mainWidgetWidth, labelHeight, borderRadius);
+    strokeRoundedRect(Math.round(mainWidgetX), Math.round(widgetY), mainWidgetWidth, labelHeight, borderRadius);
     let cursorX = mainWidgetX;
     const separatorColor = "rgba(148,163,184,0.45)";
     if (actionButtonMetrics.length > 0) {
@@ -1481,7 +1577,7 @@ function createChart(element, options = {}) {
         const fullHeight = button.fullHeight ?? mergedLine.actionButtonFullHeight;
         const actionPadding = fullHeight ? 0 : 2;
         const actionX = actionCursorX + actionPadding;
-        const actionY = labelY + actionPadding;
+        const actionY = widgetY + actionPadding;
         const actionH = labelHeight - actionPadding * 2;
         const actionW = Math.max(8, width2 - actionPadding * 2);
         const actionRadius = Math.max(1, button.borderRadius ?? mergedLine.actionButtonBorderRadius);
@@ -1521,29 +1617,29 @@ function createChart(element, options = {}) {
       });
     }
     if (qtyWidth > 0) {
-      drawText(qtyText, cursorX + segmentPaddingX, labelY + labelHeight / 2, "left", "middle", textColor);
+      drawText(qtyText, cursorX + segmentPaddingX, widgetY + labelHeight / 2, "left", "middle", textColor);
       cursorX += qtyWidth;
       ctx.strokeStyle = separatorColor;
       ctx.beginPath();
-      ctx.moveTo(crisp(cursorX), labelY + 4);
-      ctx.lineTo(crisp(cursorX), labelY + labelHeight - 4);
+      ctx.moveTo(crisp(cursorX), widgetY + 4);
+      ctx.lineTo(crisp(cursorX), widgetY + labelHeight - 4);
       ctx.stroke();
     }
-    drawText(centerText, cursorX + segmentPaddingX, labelY + labelHeight / 2, "left", "middle", textColor);
+    drawText(centerText, cursorX + segmentPaddingX, widgetY + labelHeight / 2, "left", "middle", textColor);
     cursorX += centerWidth;
     if (showCloseButton) {
       ctx.strokeStyle = separatorColor;
       ctx.beginPath();
-      ctx.moveTo(crisp(cursorX), labelY + 4);
-      ctx.lineTo(crisp(cursorX), labelY + labelHeight - 4);
+      ctx.moveTo(crisp(cursorX), widgetY + 4);
+      ctx.lineTo(crisp(cursorX), widgetY + labelHeight - 4);
       ctx.stroke();
-      drawText("x", cursorX + closeWidth / 2, labelY + labelHeight / 2, "center", "middle", textColor);
+      drawText("x", cursorX + closeWidth / 2, widgetY + labelHeight / 2, "center", "middle", textColor);
       if (mergedLine.id) {
         orderActionRegions.push({
           orderId: mergedLine.id,
           action: closeAction,
           x: cursorX,
-          y: labelY,
+          y: widgetY,
           width: closeWidth,
           height: labelHeight,
           line: mergedLine
@@ -1564,17 +1660,18 @@ 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(labelY), priceWidth, labelHeight, borderRadius);
+    fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, borderRadius);
     ctx.strokeStyle = widgetBorder;
     ctx.lineWidth = 1;
-    strokeRoundedRect(Math.round(priceX), Math.round(labelY), priceWidth, labelHeight, borderRadius);
-    drawText(priceText, priceX + pricePaddingX, labelY + labelHeight / 2, "left", "middle", textColor);
+    strokeRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, borderRadius);
+    drawText(priceText, priceX + pricePaddingX, priceY + labelHeight / 2, "left", "middle", textColor);
   };
   const fillRoundedRect = (x, y, widthValue, heightValue, radiusValue) => {
     const maxRadius = Math.min(widthValue, heightValue) / 2;
@@ -1642,9 +1739,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;
@@ -1997,7 +2148,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,
@@ -2030,6 +2181,60 @@ 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 (!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) {
@@ -2061,7 +2266,7 @@ 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) => {
       if (!labels.visible || !Number.isFinite(label.price) || label.text.length === 0) {
@@ -2224,12 +2429,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
         };
@@ -2250,7 +2456,16 @@ function createChart(element, options = {}) {
           }
         }
       }
-      const labelX = chartRight + 4;
+      if (labels.noOverlapping) {
+        rightAxisLabelSlots.push(
+          ...positionedLabels.map((label) => ({
+            y: label.y,
+            height: label.height
+          }))
+        );
+        rightAxisLabelSlots.sort((a, b) => a.y - b.y);
+      }
+      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);
@@ -2295,7 +2510,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;
       }
     }
@@ -2353,8 +2575,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,8 +171,11 @@ 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)
+- `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 so they do not cover each other)
+- `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`
 
 Example:
@@ -190,6 +193,8 @@ createChart(root, {
     askPrice: 5235.0,
     showIndicatorNames: true,
     showIndicatorValues: true,
+    indicatorLegendPosition: "top-left",
+    indicatorLegendOffsetY: 34,
     showCountdownToBarClose: true,
     noOverlapping: true
   }
@@ -311,7 +316,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 +324,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)