hyperprop-charting-library 0.1.48 → 0.1.49

package/dist/hyperprop-charting-library.cjs

@@ -891,6 +891,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;
@@ -987,6 +990,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,
@@ -1352,7 +1382,7 @@ function createChart(element, options = {}) {
     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 labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
     ctx.fillStyle = mergedLine.labelBackgroundColor;
     fillRoundedRect(
       Math.round(labelX),
@@ -1485,17 +1515,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) {
@@ -1505,7 +1536,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);
@@ -1545,29 +1576,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
@@ -1593,12 +1624,13 @@ function createChart(element, options = {}) {
       orderPriceTagWidthById.set(mergedLine.id, priceWidth);
     }
     const priceX = chartRight + 4;
+    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;
@@ -2086,6 +2118,7 @@ function createChart(element, options = {}) {
       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) {
@@ -2274,6 +2307,15 @@ function createChart(element, options = {}) {
           }
         }
       }
+      if (labels.noOverlapping) {
+        rightAxisLabelSlots.push(
+          ...positionedLabels.map((label) => ({
+            y: label.y,
+            height: label.height
+          }))
+        );
+        rightAxisLabelSlots.sort((a, b) => a.y - b.y);
+      }
       const labelX = chartRight + 4;
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;

package/dist/hyperprop-charting-library.js

@@ -867,6 +867,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 +966,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,
@@ -1328,7 +1358,7 @@ function createChart(element, options = {}) {
     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 labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
     ctx.fillStyle = mergedLine.labelBackgroundColor;
     fillRoundedRect(
       Math.round(labelX),
@@ -1461,17 +1491,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 +1512,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 +1552,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
@@ -1569,12 +1600,13 @@ function createChart(element, options = {}) {
       orderPriceTagWidthById.set(mergedLine.id, priceWidth);
     }
     const priceX = chartRight + 4;
+    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;
@@ -2062,6 +2094,7 @@ function createChart(element, options = {}) {
       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) {
@@ -2250,6 +2283,15 @@ function createChart(element, options = {}) {
           }
         }
       }
+      if (labels.noOverlapping) {
+        rightAxisLabelSlots.push(
+          ...positionedLabels.map((label) => ({
+            y: label.y,
+            height: label.height
+          }))
+        );
+        rightAxisLabelSlots.sort((a, b) => a.y - b.y);
+      }
       const labelX = chartRight + 4;
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;

package/dist/index.cjs

@@ -891,6 +891,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;
@@ -987,6 +990,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,
@@ -1352,7 +1382,7 @@ function createChart(element, options = {}) {
     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 labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
     ctx.fillStyle = mergedLine.labelBackgroundColor;
     fillRoundedRect(
       Math.round(labelX),
@@ -1485,17 +1515,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) {
@@ -1505,7 +1536,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);
@@ -1545,29 +1576,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
@@ -1593,12 +1624,13 @@ function createChart(element, options = {}) {
       orderPriceTagWidthById.set(mergedLine.id, priceWidth);
     }
     const priceX = chartRight + 4;
+    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;
@@ -2086,6 +2118,7 @@ function createChart(element, options = {}) {
       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) {
@@ -2274,6 +2307,15 @@ function createChart(element, options = {}) {
           }
         }
       }
+      if (labels.noOverlapping) {
+        rightAxisLabelSlots.push(
+          ...positionedLabels.map((label) => ({
+            y: label.y,
+            height: label.height
+          }))
+        );
+        rightAxisLabelSlots.sort((a, b) => a.y - b.y);
+      }
       const labelX = chartRight + 4;
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;

package/dist/index.js

@@ -867,6 +867,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 +966,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,
@@ -1328,7 +1358,7 @@ function createChart(element, options = {}) {
     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 labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
     ctx.fillStyle = mergedLine.labelBackgroundColor;
     fillRoundedRect(
       Math.round(labelX),
@@ -1461,17 +1491,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 +1512,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 +1552,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
@@ -1569,12 +1600,13 @@ function createChart(element, options = {}) {
       orderPriceTagWidthById.set(mergedLine.id, priceWidth);
     }
     const priceX = chartRight + 4;
+    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;
@@ -2062,6 +2094,7 @@ function createChart(element, options = {}) {
       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) {
@@ -2250,6 +2283,15 @@ function createChart(element, options = {}) {
           }
         }
       }
+      if (labels.noOverlapping) {
+        rightAxisLabelSlots.push(
+          ...positionedLabels.map((label) => ({
+            y: label.y,
+            height: label.height
+          }))
+        );
+        rightAxisLabelSlots.sort((a, b) => a.y - b.y);
+      }
       const labelX = chartRight + 4;
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;

package/docs/API.md

@@ -172,7 +172,7 @@ TradingView-style labels can be controlled from a single top-level object:
 - `showIndicatorNames` (default `false`; draws active indicator names in the chart)
 - `showIndicatorValues` (default `false`; appends simple indicator input values)
 - `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:

package/package.json

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