hyperprop-charting-library 0.1.147 → 0.1.148

package/dist/hyperprop-charting-library.cjs

@@ -4297,6 +4297,8 @@ function createChart(element, options = {}) {
   let paneButtonRegions = [];
   let hoveredPaneId = null;
   let hoveredPaneButton = null;
+  let legendRowRegions = [];
+  let hoveredLegendId = null;
   let paneDividerDrag = null;
   let indicatorPaneActionHandler = null;
   let indicatorPaneHeightChangeHandler = null;
@@ -5593,6 +5595,85 @@ function createChart(element, options = {}) {
     ctx.closePath();
     ctx.stroke();
   };
+  const INDICATOR_CONTROL_SIZE = 16;
+  const INDICATOR_CONTROL_GAP = 4;
+  const LEGEND_CONTROLS_WIDTH = (INDICATOR_CONTROL_SIZE + INDICATOR_CONTROL_GAP) * 4 + 8;
+  const drawIndicatorControls = (indicatorId, indicatorType, indicatorVisible, startX, centerY) => {
+    const labels = resolvedLabels;
+    const actionList = [
+      "visibility",
+      "settings",
+      "source",
+      "remove"
+    ];
+    let buttonX = startX;
+    for (const action of actionList) {
+      const buttonY = centerY - INDICATOR_CONTROL_SIZE / 2;
+      const hovered = hoveredPaneButton?.id === indicatorId && hoveredPaneButton.action === action;
+      const iconColor = labels.indicatorTextColor;
+      ctx.save();
+      ctx.fillStyle = hovered ? "rgba(148,163,184,0.30)" : "rgba(148,163,184,0.12)";
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), INDICATOR_CONTROL_SIZE, INDICATOR_CONTROL_SIZE, 4);
+      ctx.strokeStyle = iconColor;
+      ctx.fillStyle = iconColor;
+      ctx.globalAlpha = hovered ? 1 : 0.75;
+      ctx.lineWidth = 1.2;
+      ctx.setLineDash([]);
+      const cx = buttonX + INDICATOR_CONTROL_SIZE / 2;
+      const cy = centerY;
+      if (action === "visibility") {
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, 4.6, 3, 0, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(cx, cy, 1.3, 0, Math.PI * 2);
+        ctx.fill();
+        if (!indicatorVisible) {
+          ctx.beginPath();
+          ctx.moveTo(cx - 5.2, cy + 4.6);
+          ctx.lineTo(cx + 5.2, cy - 4.6);
+          ctx.stroke();
+        }
+      } else if (action === "settings") {
+        ctx.beginPath();
+        ctx.arc(cx, cy, 3.4, 0, Math.PI * 2);
+        ctx.stroke();
+        for (let toothIndex = 0; toothIndex < 8; toothIndex += 1) {
+          const angle = Math.PI / 4 * toothIndex;
+          ctx.beginPath();
+          ctx.moveTo(cx + Math.cos(angle) * 3.4, cy + Math.sin(angle) * 3.4);
+          ctx.lineTo(cx + Math.cos(angle) * 5.2, cy + Math.sin(angle) * 5.2);
+          ctx.stroke();
+        }
+        ctx.beginPath();
+        ctx.arc(cx, cy, 1.1, 0, Math.PI * 2);
+        ctx.fill();
+      } else if (action === "source") {
+        const prevSourceFont = ctx.font;
+        ctx.font = `bold 9px ${mergedOptions.fontFamily}`;
+        drawText("{}", cx, cy + 0.5, "center", "middle", iconColor);
+        ctx.font = prevSourceFont;
+      } else {
+        ctx.beginPath();
+        ctx.moveTo(cx - 3.4, cy - 3.4);
+        ctx.lineTo(cx + 3.4, cy + 3.4);
+        ctx.moveTo(cx + 3.4, cy - 3.4);
+        ctx.lineTo(cx - 3.4, cy + 3.4);
+        ctx.stroke();
+      }
+      ctx.restore();
+      paneButtonRegions.push({
+        id: indicatorId,
+        type: indicatorType,
+        action,
+        x: buttonX,
+        y: buttonY,
+        width: INDICATOR_CONTROL_SIZE,
+        height: INDICATOR_CONTROL_SIZE
+      });
+      buttonX += INDICATOR_CONTROL_SIZE + INDICATOR_CONTROL_GAP;
+    }
+  };
   const drawMarkBadge = (x, y, radius, color, shape, label, textColor) => {
     ctx.save();
     ctx.fillStyle = color;
@@ -5673,6 +5754,8 @@ function createChart(element, options = {}) {
     orderDragRegions = [];
     alertRegions = [];
     markRegions = [];
+    paneButtonRegions = [];
+    legendRowRegions = [];
     crosshairPriceActionRegion = null;
     const pixelRatio = getPixelRatio();
     canvas.style.width = `${width}px`;
@@ -7761,87 +7844,10 @@ function createChart(element, options = {}) {
     }
     paneLayoutFullChartHeight = fullChartHeight;
     paneLayoutInfos = [];
-    paneButtonRegions = [];
     if (activeSeparateIndicators.length > 0) {
       const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       let paneTopCursor = chartBottom + paneGap;
-      const paneButtonSize = 16;
-      const paneButtonGap = 4;
-      const drawPaneButtons = (indicatorId, indicatorType, indicatorVisible, startX, centerY) => {
-        const actionList = [
-          "visibility",
-          "settings",
-          "source",
-          "remove"
-        ];
-        let buttonX = startX;
-        for (const action of actionList) {
-          const buttonY = centerY - paneButtonSize / 2;
-          const hovered = hoveredPaneButton?.id === indicatorId && hoveredPaneButton.action === action;
-          const iconColor = labels.indicatorTextColor;
-          ctx.save();
-          ctx.fillStyle = hovered ? "rgba(148,163,184,0.30)" : "rgba(148,163,184,0.12)";
-          fillRoundedRect(Math.round(buttonX), Math.round(buttonY), paneButtonSize, paneButtonSize, 4);
-          ctx.strokeStyle = iconColor;
-          ctx.fillStyle = iconColor;
-          ctx.globalAlpha = hovered ? 1 : 0.75;
-          ctx.lineWidth = 1.2;
-          ctx.setLineDash([]);
-          const cx = buttonX + paneButtonSize / 2;
-          const cy = centerY;
-          if (action === "visibility") {
-            ctx.beginPath();
-            ctx.ellipse(cx, cy, 4.6, 3, 0, 0, Math.PI * 2);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.arc(cx, cy, 1.3, 0, Math.PI * 2);
-            ctx.fill();
-            if (!indicatorVisible) {
-              ctx.beginPath();
-              ctx.moveTo(cx - 5.2, cy + 4.6);
-              ctx.lineTo(cx + 5.2, cy - 4.6);
-              ctx.stroke();
-            }
-          } else if (action === "settings") {
-            ctx.beginPath();
-            ctx.arc(cx, cy, 3.4, 0, Math.PI * 2);
-            ctx.stroke();
-            for (let toothIndex = 0; toothIndex < 8; toothIndex += 1) {
-              const angle = Math.PI / 4 * toothIndex;
-              ctx.beginPath();
-              ctx.moveTo(cx + Math.cos(angle) * 3.4, cy + Math.sin(angle) * 3.4);
-              ctx.lineTo(cx + Math.cos(angle) * 5.2, cy + Math.sin(angle) * 5.2);
-              ctx.stroke();
-            }
-            ctx.beginPath();
-            ctx.arc(cx, cy, 1.1, 0, Math.PI * 2);
-            ctx.fill();
-          } else if (action === "source") {
-            const prevSourceFont = ctx.font;
-            ctx.font = `bold 9px ${mergedOptions.fontFamily}`;
-            drawText("{}", cx, cy + 0.5, "center", "middle", iconColor);
-            ctx.font = prevSourceFont;
-          } else {
-            ctx.beginPath();
-            ctx.moveTo(cx - 3.4, cy - 3.4);
-            ctx.lineTo(cx + 3.4, cy + 3.4);
-            ctx.moveTo(cx + 3.4, cy - 3.4);
-            ctx.lineTo(cx - 3.4, cy + 3.4);
-            ctx.stroke();
-          }
-          ctx.restore();
-          paneButtonRegions.push({
-            id: indicatorId,
-            type: indicatorType,
-            action,
-            x: buttonX,
-            y: buttonY,
-            width: paneButtonSize,
-            height: paneButtonSize
-          });
-          buttonX += paneButtonSize + paneButtonGap;
-        }
-      };
+      const drawPaneButtons = drawIndicatorControls;
       activeSeparateIndicators.forEach(({ indicator, plugin }, paneIndex) => {
         const paneHeight = separatePaneHeights[paneIndex] ?? 80;
         const paneTop = paneTopCursor;
@@ -8343,26 +8349,56 @@ function createChart(element, options = {}) {
       };
       const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
         const inputValues = Object.entries(indicator.inputs).filter(([key, value]) => !LEGEND_EXCLUDED_INPUT_KEYS.has(key) && typeof value !== "boolean" && isLegendInputValue(value)).slice(0, 2).map(([, value]) => formatLegendValue(value));
-        if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
-          return `${plugin.name} ${inputValues.join(" ")}`;
-        }
-        if (labels.showIndicatorNames) {
-          return plugin.name;
-        }
-        return inputValues.join(" ");
-      }).filter((entry) => entry.length > 0);
+        const text = labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0 ? `${plugin.name} ${inputValues.join(" ")}` : labels.showIndicatorNames ? plugin.name : inputValues.join(" ");
+        return { id: indicator.id, type: indicator.type, visible: indicator.visible, text };
+      }).filter((entry) => entry.text.length > 0);
       if (labelEntries.length > 0) {
         const prevFont = ctx.font;
-        ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
-        const legendText = labelEntries.join("   ");
+        const legendFontSize = Math.max(8, axis.fontSize);
+        ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
         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 : Math.max(chartTop + offsetY, dataLineBottom);
-        drawText(legendText, legendX, legendY, isRight ? "right" : "left", isBottom ? "bottom" : "top", labels.indicatorTextColor);
+        const legendTop = isBottom ? chartBottom - offsetY : Math.max(chartTop + offsetY, dataLineBottom);
+        const rowHeight = Math.round(legendFontSize * 1.55);
+        labelEntries.forEach((entry, rowIndex) => {
+          const rowTop = isBottom ? legendTop - (labelEntries.length - rowIndex) * rowHeight : legendTop + rowIndex * rowHeight;
+          const rowCenter = rowTop + rowHeight / 2;
+          const dimmed = entry.visible === false;
+          ctx.save();
+          if (dimmed) ctx.globalAlpha = 0.45;
+          drawText(
+            entry.text,
+            legendX,
+            rowCenter,
+            isRight ? "right" : "left",
+            "middle",
+            labels.indicatorTextColor
+          );
+          ctx.restore();
+          const textWidth = measureTextWidth(entry.text);
+          const rowLeft = isRight ? legendX - textWidth : legendX;
+          legendRowRegions.push({
+            id: entry.id,
+            type: entry.type,
+            x: rowLeft,
+            y: rowTop,
+            width: textWidth + LEGEND_CONTROLS_WIDTH,
+            height: rowHeight
+          });
+          if (hoveredLegendId === entry.id) {
+            drawIndicatorControls(
+              entry.id,
+              entry.type,
+              entry.visible !== false,
+              isRight ? legendX + 6 : rowLeft + textWidth + 8,
+              rowCenter
+            );
+          }
+        });
         ctx.font = prevFont;
       }
     }
@@ -9034,6 +9070,9 @@ function createChart(element, options = {}) {
     if (hits.length === 0) return null;
     return hits.find((region) => region.part === "remove") ?? hits[0];
   };
+  const getLegendRowAt = (x, y) => legendRowRegions.find(
+    (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
+  ) ?? null;
   const getMarkAt = (x, y) => {
     const tolerance = touchInputActive ? Math.max(1, mergedOptions.touch?.hitToleranceScale ?? 2.2) : 1;
     for (let index = markRegions.length - 1; index >= 0; index -= 1) {
@@ -10783,6 +10822,12 @@ function createChart(element, options = {}) {
           setCrosshairPoint(null);
           return;
         }
+        const legendRow = getLegendRowAt(point.x, point.y);
+        const nextLegendId = legendRow?.id ?? null;
+        if (nextLegendId !== hoveredLegendId) {
+          hoveredLegendId = nextLegendId;
+          scheduleDraw();
+        }
         const hoveredPane = getPaneAt(point.x, point.y);
         const nextHoveredPaneId = hoveredPane?.id ?? null;
         if (nextHoveredPaneId !== hoveredPaneId) {
@@ -11001,10 +11046,11 @@ function createChart(element, options = {}) {
       });
       paneDividerDrag = null;
     }
-    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null || hoveredAlertId !== null || hoveredMarkKey !== null)) {
+    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null || hoveredAlertId !== null || hoveredMarkKey !== null || hoveredLegendId !== null)) {
       hoveredPaneId = null;
       hoveredPaneButton = null;
       hoveredAlertId = null;
+      hoveredLegendId = null;
       if (hoveredMarkKey !== null) {
         hoveredMarkKey = null;
         markHoverHandler?.(null);

package/dist/hyperprop-charting-library.js

@@ -4261,6 +4261,8 @@ function createChart(element, options = {}) {
   let paneButtonRegions = [];
   let hoveredPaneId = null;
   let hoveredPaneButton = null;
+  let legendRowRegions = [];
+  let hoveredLegendId = null;
   let paneDividerDrag = null;
   let indicatorPaneActionHandler = null;
   let indicatorPaneHeightChangeHandler = null;
@@ -5557,6 +5559,85 @@ function createChart(element, options = {}) {
     ctx.closePath();
     ctx.stroke();
   };
+  const INDICATOR_CONTROL_SIZE = 16;
+  const INDICATOR_CONTROL_GAP = 4;
+  const LEGEND_CONTROLS_WIDTH = (INDICATOR_CONTROL_SIZE + INDICATOR_CONTROL_GAP) * 4 + 8;
+  const drawIndicatorControls = (indicatorId, indicatorType, indicatorVisible, startX, centerY) => {
+    const labels = resolvedLabels;
+    const actionList = [
+      "visibility",
+      "settings",
+      "source",
+      "remove"
+    ];
+    let buttonX = startX;
+    for (const action of actionList) {
+      const buttonY = centerY - INDICATOR_CONTROL_SIZE / 2;
+      const hovered = hoveredPaneButton?.id === indicatorId && hoveredPaneButton.action === action;
+      const iconColor = labels.indicatorTextColor;
+      ctx.save();
+      ctx.fillStyle = hovered ? "rgba(148,163,184,0.30)" : "rgba(148,163,184,0.12)";
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), INDICATOR_CONTROL_SIZE, INDICATOR_CONTROL_SIZE, 4);
+      ctx.strokeStyle = iconColor;
+      ctx.fillStyle = iconColor;
+      ctx.globalAlpha = hovered ? 1 : 0.75;
+      ctx.lineWidth = 1.2;
+      ctx.setLineDash([]);
+      const cx = buttonX + INDICATOR_CONTROL_SIZE / 2;
+      const cy = centerY;
+      if (action === "visibility") {
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, 4.6, 3, 0, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(cx, cy, 1.3, 0, Math.PI * 2);
+        ctx.fill();
+        if (!indicatorVisible) {
+          ctx.beginPath();
+          ctx.moveTo(cx - 5.2, cy + 4.6);
+          ctx.lineTo(cx + 5.2, cy - 4.6);
+          ctx.stroke();
+        }
+      } else if (action === "settings") {
+        ctx.beginPath();
+        ctx.arc(cx, cy, 3.4, 0, Math.PI * 2);
+        ctx.stroke();
+        for (let toothIndex = 0; toothIndex < 8; toothIndex += 1) {
+          const angle = Math.PI / 4 * toothIndex;
+          ctx.beginPath();
+          ctx.moveTo(cx + Math.cos(angle) * 3.4, cy + Math.sin(angle) * 3.4);
+          ctx.lineTo(cx + Math.cos(angle) * 5.2, cy + Math.sin(angle) * 5.2);
+          ctx.stroke();
+        }
+        ctx.beginPath();
+        ctx.arc(cx, cy, 1.1, 0, Math.PI * 2);
+        ctx.fill();
+      } else if (action === "source") {
+        const prevSourceFont = ctx.font;
+        ctx.font = `bold 9px ${mergedOptions.fontFamily}`;
+        drawText("{}", cx, cy + 0.5, "center", "middle", iconColor);
+        ctx.font = prevSourceFont;
+      } else {
+        ctx.beginPath();
+        ctx.moveTo(cx - 3.4, cy - 3.4);
+        ctx.lineTo(cx + 3.4, cy + 3.4);
+        ctx.moveTo(cx + 3.4, cy - 3.4);
+        ctx.lineTo(cx - 3.4, cy + 3.4);
+        ctx.stroke();
+      }
+      ctx.restore();
+      paneButtonRegions.push({
+        id: indicatorId,
+        type: indicatorType,
+        action,
+        x: buttonX,
+        y: buttonY,
+        width: INDICATOR_CONTROL_SIZE,
+        height: INDICATOR_CONTROL_SIZE
+      });
+      buttonX += INDICATOR_CONTROL_SIZE + INDICATOR_CONTROL_GAP;
+    }
+  };
   const drawMarkBadge = (x, y, radius, color, shape, label, textColor) => {
     ctx.save();
     ctx.fillStyle = color;
@@ -5637,6 +5718,8 @@ function createChart(element, options = {}) {
     orderDragRegions = [];
     alertRegions = [];
     markRegions = [];
+    paneButtonRegions = [];
+    legendRowRegions = [];
     crosshairPriceActionRegion = null;
     const pixelRatio = getPixelRatio();
     canvas.style.width = `${width}px`;
@@ -7725,87 +7808,10 @@ function createChart(element, options = {}) {
     }
     paneLayoutFullChartHeight = fullChartHeight;
     paneLayoutInfos = [];
-    paneButtonRegions = [];
     if (activeSeparateIndicators.length > 0) {
       const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       let paneTopCursor = chartBottom + paneGap;
-      const paneButtonSize = 16;
-      const paneButtonGap = 4;
-      const drawPaneButtons = (indicatorId, indicatorType, indicatorVisible, startX, centerY) => {
-        const actionList = [
-          "visibility",
-          "settings",
-          "source",
-          "remove"
-        ];
-        let buttonX = startX;
-        for (const action of actionList) {
-          const buttonY = centerY - paneButtonSize / 2;
-          const hovered = hoveredPaneButton?.id === indicatorId && hoveredPaneButton.action === action;
-          const iconColor = labels.indicatorTextColor;
-          ctx.save();
-          ctx.fillStyle = hovered ? "rgba(148,163,184,0.30)" : "rgba(148,163,184,0.12)";
-          fillRoundedRect(Math.round(buttonX), Math.round(buttonY), paneButtonSize, paneButtonSize, 4);
-          ctx.strokeStyle = iconColor;
-          ctx.fillStyle = iconColor;
-          ctx.globalAlpha = hovered ? 1 : 0.75;
-          ctx.lineWidth = 1.2;
-          ctx.setLineDash([]);
-          const cx = buttonX + paneButtonSize / 2;
-          const cy = centerY;
-          if (action === "visibility") {
-            ctx.beginPath();
-            ctx.ellipse(cx, cy, 4.6, 3, 0, 0, Math.PI * 2);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.arc(cx, cy, 1.3, 0, Math.PI * 2);
-            ctx.fill();
-            if (!indicatorVisible) {
-              ctx.beginPath();
-              ctx.moveTo(cx - 5.2, cy + 4.6);
-              ctx.lineTo(cx + 5.2, cy - 4.6);
-              ctx.stroke();
-            }
-          } else if (action === "settings") {
-            ctx.beginPath();
-            ctx.arc(cx, cy, 3.4, 0, Math.PI * 2);
-            ctx.stroke();
-            for (let toothIndex = 0; toothIndex < 8; toothIndex += 1) {
-              const angle = Math.PI / 4 * toothIndex;
-              ctx.beginPath();
-              ctx.moveTo(cx + Math.cos(angle) * 3.4, cy + Math.sin(angle) * 3.4);
-              ctx.lineTo(cx + Math.cos(angle) * 5.2, cy + Math.sin(angle) * 5.2);
-              ctx.stroke();
-            }
-            ctx.beginPath();
-            ctx.arc(cx, cy, 1.1, 0, Math.PI * 2);
-            ctx.fill();
-          } else if (action === "source") {
-            const prevSourceFont = ctx.font;
-            ctx.font = `bold 9px ${mergedOptions.fontFamily}`;
-            drawText("{}", cx, cy + 0.5, "center", "middle", iconColor);
-            ctx.font = prevSourceFont;
-          } else {
-            ctx.beginPath();
-            ctx.moveTo(cx - 3.4, cy - 3.4);
-            ctx.lineTo(cx + 3.4, cy + 3.4);
-            ctx.moveTo(cx + 3.4, cy - 3.4);
-            ctx.lineTo(cx - 3.4, cy + 3.4);
-            ctx.stroke();
-          }
-          ctx.restore();
-          paneButtonRegions.push({
-            id: indicatorId,
-            type: indicatorType,
-            action,
-            x: buttonX,
-            y: buttonY,
-            width: paneButtonSize,
-            height: paneButtonSize
-          });
-          buttonX += paneButtonSize + paneButtonGap;
-        }
-      };
+      const drawPaneButtons = drawIndicatorControls;
       activeSeparateIndicators.forEach(({ indicator, plugin }, paneIndex) => {
         const paneHeight = separatePaneHeights[paneIndex] ?? 80;
         const paneTop = paneTopCursor;
@@ -8307,26 +8313,56 @@ function createChart(element, options = {}) {
       };
       const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
         const inputValues = Object.entries(indicator.inputs).filter(([key, value]) => !LEGEND_EXCLUDED_INPUT_KEYS.has(key) && typeof value !== "boolean" && isLegendInputValue(value)).slice(0, 2).map(([, value]) => formatLegendValue(value));
-        if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
-          return `${plugin.name} ${inputValues.join(" ")}`;
-        }
-        if (labels.showIndicatorNames) {
-          return plugin.name;
-        }
-        return inputValues.join(" ");
-      }).filter((entry) => entry.length > 0);
+        const text = labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0 ? `${plugin.name} ${inputValues.join(" ")}` : labels.showIndicatorNames ? plugin.name : inputValues.join(" ");
+        return { id: indicator.id, type: indicator.type, visible: indicator.visible, text };
+      }).filter((entry) => entry.text.length > 0);
       if (labelEntries.length > 0) {
         const prevFont = ctx.font;
-        ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
-        const legendText = labelEntries.join("   ");
+        const legendFontSize = Math.max(8, axis.fontSize);
+        ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
         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 : Math.max(chartTop + offsetY, dataLineBottom);
-        drawText(legendText, legendX, legendY, isRight ? "right" : "left", isBottom ? "bottom" : "top", labels.indicatorTextColor);
+        const legendTop = isBottom ? chartBottom - offsetY : Math.max(chartTop + offsetY, dataLineBottom);
+        const rowHeight = Math.round(legendFontSize * 1.55);
+        labelEntries.forEach((entry, rowIndex) => {
+          const rowTop = isBottom ? legendTop - (labelEntries.length - rowIndex) * rowHeight : legendTop + rowIndex * rowHeight;
+          const rowCenter = rowTop + rowHeight / 2;
+          const dimmed = entry.visible === false;
+          ctx.save();
+          if (dimmed) ctx.globalAlpha = 0.45;
+          drawText(
+            entry.text,
+            legendX,
+            rowCenter,
+            isRight ? "right" : "left",
+            "middle",
+            labels.indicatorTextColor
+          );
+          ctx.restore();
+          const textWidth = measureTextWidth(entry.text);
+          const rowLeft = isRight ? legendX - textWidth : legendX;
+          legendRowRegions.push({
+            id: entry.id,
+            type: entry.type,
+            x: rowLeft,
+            y: rowTop,
+            width: textWidth + LEGEND_CONTROLS_WIDTH,
+            height: rowHeight
+          });
+          if (hoveredLegendId === entry.id) {
+            drawIndicatorControls(
+              entry.id,
+              entry.type,
+              entry.visible !== false,
+              isRight ? legendX + 6 : rowLeft + textWidth + 8,
+              rowCenter
+            );
+          }
+        });
         ctx.font = prevFont;
       }
     }
@@ -8998,6 +9034,9 @@ function createChart(element, options = {}) {
     if (hits.length === 0) return null;
     return hits.find((region) => region.part === "remove") ?? hits[0];
   };
+  const getLegendRowAt = (x, y) => legendRowRegions.find(
+    (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
+  ) ?? null;
   const getMarkAt = (x, y) => {
     const tolerance = touchInputActive ? Math.max(1, mergedOptions.touch?.hitToleranceScale ?? 2.2) : 1;
     for (let index = markRegions.length - 1; index >= 0; index -= 1) {
@@ -10747,6 +10786,12 @@ function createChart(element, options = {}) {
           setCrosshairPoint(null);
           return;
         }
+        const legendRow = getLegendRowAt(point.x, point.y);
+        const nextLegendId = legendRow?.id ?? null;
+        if (nextLegendId !== hoveredLegendId) {
+          hoveredLegendId = nextLegendId;
+          scheduleDraw();
+        }
         const hoveredPane = getPaneAt(point.x, point.y);
         const nextHoveredPaneId = hoveredPane?.id ?? null;
         if (nextHoveredPaneId !== hoveredPaneId) {
@@ -10965,10 +11010,11 @@ function createChart(element, options = {}) {
       });
       paneDividerDrag = null;
     }
-    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null || hoveredAlertId !== null || hoveredMarkKey !== null)) {
+    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null || hoveredAlertId !== null || hoveredMarkKey !== null || hoveredLegendId !== null)) {
       hoveredPaneId = null;
       hoveredPaneButton = null;
       hoveredAlertId = null;
+      hoveredLegendId = null;
       if (hoveredMarkKey !== null) {
         hoveredMarkKey = null;
         markHoverHandler?.(null);

package/dist/index.cjs

@@ -4297,6 +4297,8 @@ function createChart(element, options = {}) {
   let paneButtonRegions = [];
   let hoveredPaneId = null;
   let hoveredPaneButton = null;
+  let legendRowRegions = [];
+  let hoveredLegendId = null;
   let paneDividerDrag = null;
   let indicatorPaneActionHandler = null;
   let indicatorPaneHeightChangeHandler = null;
@@ -5593,6 +5595,85 @@ function createChart(element, options = {}) {
     ctx.closePath();
     ctx.stroke();
   };
+  const INDICATOR_CONTROL_SIZE = 16;
+  const INDICATOR_CONTROL_GAP = 4;
+  const LEGEND_CONTROLS_WIDTH = (INDICATOR_CONTROL_SIZE + INDICATOR_CONTROL_GAP) * 4 + 8;
+  const drawIndicatorControls = (indicatorId, indicatorType, indicatorVisible, startX, centerY) => {
+    const labels = resolvedLabels;
+    const actionList = [
+      "visibility",
+      "settings",
+      "source",
+      "remove"
+    ];
+    let buttonX = startX;
+    for (const action of actionList) {
+      const buttonY = centerY - INDICATOR_CONTROL_SIZE / 2;
+      const hovered = hoveredPaneButton?.id === indicatorId && hoveredPaneButton.action === action;
+      const iconColor = labels.indicatorTextColor;
+      ctx.save();
+      ctx.fillStyle = hovered ? "rgba(148,163,184,0.30)" : "rgba(148,163,184,0.12)";
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), INDICATOR_CONTROL_SIZE, INDICATOR_CONTROL_SIZE, 4);
+      ctx.strokeStyle = iconColor;
+      ctx.fillStyle = iconColor;
+      ctx.globalAlpha = hovered ? 1 : 0.75;
+      ctx.lineWidth = 1.2;
+      ctx.setLineDash([]);
+      const cx = buttonX + INDICATOR_CONTROL_SIZE / 2;
+      const cy = centerY;
+      if (action === "visibility") {
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, 4.6, 3, 0, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(cx, cy, 1.3, 0, Math.PI * 2);
+        ctx.fill();
+        if (!indicatorVisible) {
+          ctx.beginPath();
+          ctx.moveTo(cx - 5.2, cy + 4.6);
+          ctx.lineTo(cx + 5.2, cy - 4.6);
+          ctx.stroke();
+        }
+      } else if (action === "settings") {
+        ctx.beginPath();
+        ctx.arc(cx, cy, 3.4, 0, Math.PI * 2);
+        ctx.stroke();
+        for (let toothIndex = 0; toothIndex < 8; toothIndex += 1) {
+          const angle = Math.PI / 4 * toothIndex;
+          ctx.beginPath();
+          ctx.moveTo(cx + Math.cos(angle) * 3.4, cy + Math.sin(angle) * 3.4);
+          ctx.lineTo(cx + Math.cos(angle) * 5.2, cy + Math.sin(angle) * 5.2);
+          ctx.stroke();
+        }
+        ctx.beginPath();
+        ctx.arc(cx, cy, 1.1, 0, Math.PI * 2);
+        ctx.fill();
+      } else if (action === "source") {
+        const prevSourceFont = ctx.font;
+        ctx.font = `bold 9px ${mergedOptions.fontFamily}`;
+        drawText("{}", cx, cy + 0.5, "center", "middle", iconColor);
+        ctx.font = prevSourceFont;
+      } else {
+        ctx.beginPath();
+        ctx.moveTo(cx - 3.4, cy - 3.4);
+        ctx.lineTo(cx + 3.4, cy + 3.4);
+        ctx.moveTo(cx + 3.4, cy - 3.4);
+        ctx.lineTo(cx - 3.4, cy + 3.4);
+        ctx.stroke();
+      }
+      ctx.restore();
+      paneButtonRegions.push({
+        id: indicatorId,
+        type: indicatorType,
+        action,
+        x: buttonX,
+        y: buttonY,
+        width: INDICATOR_CONTROL_SIZE,
+        height: INDICATOR_CONTROL_SIZE
+      });
+      buttonX += INDICATOR_CONTROL_SIZE + INDICATOR_CONTROL_GAP;
+    }
+  };
   const drawMarkBadge = (x, y, radius, color, shape, label, textColor) => {
     ctx.save();
     ctx.fillStyle = color;
@@ -5673,6 +5754,8 @@ function createChart(element, options = {}) {
     orderDragRegions = [];
     alertRegions = [];
     markRegions = [];
+    paneButtonRegions = [];
+    legendRowRegions = [];
     crosshairPriceActionRegion = null;
     const pixelRatio = getPixelRatio();
     canvas.style.width = `${width}px`;
@@ -7761,87 +7844,10 @@ function createChart(element, options = {}) {
     }
     paneLayoutFullChartHeight = fullChartHeight;
     paneLayoutInfos = [];
-    paneButtonRegions = [];
     if (activeSeparateIndicators.length > 0) {
       const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       let paneTopCursor = chartBottom + paneGap;
-      const paneButtonSize = 16;
-      const paneButtonGap = 4;
-      const drawPaneButtons = (indicatorId, indicatorType, indicatorVisible, startX, centerY) => {
-        const actionList = [
-          "visibility",
-          "settings",
-          "source",
-          "remove"
-        ];
-        let buttonX = startX;
-        for (const action of actionList) {
-          const buttonY = centerY - paneButtonSize / 2;
-          const hovered = hoveredPaneButton?.id === indicatorId && hoveredPaneButton.action === action;
-          const iconColor = labels.indicatorTextColor;
-          ctx.save();
-          ctx.fillStyle = hovered ? "rgba(148,163,184,0.30)" : "rgba(148,163,184,0.12)";
-          fillRoundedRect(Math.round(buttonX), Math.round(buttonY), paneButtonSize, paneButtonSize, 4);
-          ctx.strokeStyle = iconColor;
-          ctx.fillStyle = iconColor;
-          ctx.globalAlpha = hovered ? 1 : 0.75;
-          ctx.lineWidth = 1.2;
-          ctx.setLineDash([]);
-          const cx = buttonX + paneButtonSize / 2;
-          const cy = centerY;
-          if (action === "visibility") {
-            ctx.beginPath();
-            ctx.ellipse(cx, cy, 4.6, 3, 0, 0, Math.PI * 2);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.arc(cx, cy, 1.3, 0, Math.PI * 2);
-            ctx.fill();
-            if (!indicatorVisible) {
-              ctx.beginPath();
-              ctx.moveTo(cx - 5.2, cy + 4.6);
-              ctx.lineTo(cx + 5.2, cy - 4.6);
-              ctx.stroke();
-            }
-          } else if (action === "settings") {
-            ctx.beginPath();
-            ctx.arc(cx, cy, 3.4, 0, Math.PI * 2);
-            ctx.stroke();
-            for (let toothIndex = 0; toothIndex < 8; toothIndex += 1) {
-              const angle = Math.PI / 4 * toothIndex;
-              ctx.beginPath();
-              ctx.moveTo(cx + Math.cos(angle) * 3.4, cy + Math.sin(angle) * 3.4);
-              ctx.lineTo(cx + Math.cos(angle) * 5.2, cy + Math.sin(angle) * 5.2);
-              ctx.stroke();
-            }
-            ctx.beginPath();
-            ctx.arc(cx, cy, 1.1, 0, Math.PI * 2);
-            ctx.fill();
-          } else if (action === "source") {
-            const prevSourceFont = ctx.font;
-            ctx.font = `bold 9px ${mergedOptions.fontFamily}`;
-            drawText("{}", cx, cy + 0.5, "center", "middle", iconColor);
-            ctx.font = prevSourceFont;
-          } else {
-            ctx.beginPath();
-            ctx.moveTo(cx - 3.4, cy - 3.4);
-            ctx.lineTo(cx + 3.4, cy + 3.4);
-            ctx.moveTo(cx + 3.4, cy - 3.4);
-            ctx.lineTo(cx - 3.4, cy + 3.4);
-            ctx.stroke();
-          }
-          ctx.restore();
-          paneButtonRegions.push({
-            id: indicatorId,
-            type: indicatorType,
-            action,
-            x: buttonX,
-            y: buttonY,
-            width: paneButtonSize,
-            height: paneButtonSize
-          });
-          buttonX += paneButtonSize + paneButtonGap;
-        }
-      };
+      const drawPaneButtons = drawIndicatorControls;
       activeSeparateIndicators.forEach(({ indicator, plugin }, paneIndex) => {
         const paneHeight = separatePaneHeights[paneIndex] ?? 80;
         const paneTop = paneTopCursor;
@@ -8343,26 +8349,56 @@ function createChart(element, options = {}) {
       };
       const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
         const inputValues = Object.entries(indicator.inputs).filter(([key, value]) => !LEGEND_EXCLUDED_INPUT_KEYS.has(key) && typeof value !== "boolean" && isLegendInputValue(value)).slice(0, 2).map(([, value]) => formatLegendValue(value));
-        if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
-          return `${plugin.name} ${inputValues.join(" ")}`;
-        }
-        if (labels.showIndicatorNames) {
-          return plugin.name;
-        }
-        return inputValues.join(" ");
-      }).filter((entry) => entry.length > 0);
+        const text = labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0 ? `${plugin.name} ${inputValues.join(" ")}` : labels.showIndicatorNames ? plugin.name : inputValues.join(" ");
+        return { id: indicator.id, type: indicator.type, visible: indicator.visible, text };
+      }).filter((entry) => entry.text.length > 0);
       if (labelEntries.length > 0) {
         const prevFont = ctx.font;
-        ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
-        const legendText = labelEntries.join("   ");
+        const legendFontSize = Math.max(8, axis.fontSize);
+        ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
         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 : Math.max(chartTop + offsetY, dataLineBottom);
-        drawText(legendText, legendX, legendY, isRight ? "right" : "left", isBottom ? "bottom" : "top", labels.indicatorTextColor);
+        const legendTop = isBottom ? chartBottom - offsetY : Math.max(chartTop + offsetY, dataLineBottom);
+        const rowHeight = Math.round(legendFontSize * 1.55);
+        labelEntries.forEach((entry, rowIndex) => {
+          const rowTop = isBottom ? legendTop - (labelEntries.length - rowIndex) * rowHeight : legendTop + rowIndex * rowHeight;
+          const rowCenter = rowTop + rowHeight / 2;
+          const dimmed = entry.visible === false;
+          ctx.save();
+          if (dimmed) ctx.globalAlpha = 0.45;
+          drawText(
+            entry.text,
+            legendX,
+            rowCenter,
+            isRight ? "right" : "left",
+            "middle",
+            labels.indicatorTextColor
+          );
+          ctx.restore();
+          const textWidth = measureTextWidth(entry.text);
+          const rowLeft = isRight ? legendX - textWidth : legendX;
+          legendRowRegions.push({
+            id: entry.id,
+            type: entry.type,
+            x: rowLeft,
+            y: rowTop,
+            width: textWidth + LEGEND_CONTROLS_WIDTH,
+            height: rowHeight
+          });
+          if (hoveredLegendId === entry.id) {
+            drawIndicatorControls(
+              entry.id,
+              entry.type,
+              entry.visible !== false,
+              isRight ? legendX + 6 : rowLeft + textWidth + 8,
+              rowCenter
+            );
+          }
+        });
         ctx.font = prevFont;
       }
     }
@@ -9034,6 +9070,9 @@ function createChart(element, options = {}) {
     if (hits.length === 0) return null;
     return hits.find((region) => region.part === "remove") ?? hits[0];
   };
+  const getLegendRowAt = (x, y) => legendRowRegions.find(
+    (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
+  ) ?? null;
   const getMarkAt = (x, y) => {
     const tolerance = touchInputActive ? Math.max(1, mergedOptions.touch?.hitToleranceScale ?? 2.2) : 1;
     for (let index = markRegions.length - 1; index >= 0; index -= 1) {
@@ -10783,6 +10822,12 @@ function createChart(element, options = {}) {
           setCrosshairPoint(null);
           return;
         }
+        const legendRow = getLegendRowAt(point.x, point.y);
+        const nextLegendId = legendRow?.id ?? null;
+        if (nextLegendId !== hoveredLegendId) {
+          hoveredLegendId = nextLegendId;
+          scheduleDraw();
+        }
         const hoveredPane = getPaneAt(point.x, point.y);
         const nextHoveredPaneId = hoveredPane?.id ?? null;
         if (nextHoveredPaneId !== hoveredPaneId) {
@@ -11001,10 +11046,11 @@ function createChart(element, options = {}) {
       });
       paneDividerDrag = null;
     }
-    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null || hoveredAlertId !== null || hoveredMarkKey !== null)) {
+    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null || hoveredAlertId !== null || hoveredMarkKey !== null || hoveredLegendId !== null)) {
       hoveredPaneId = null;
       hoveredPaneButton = null;
       hoveredAlertId = null;
+      hoveredLegendId = null;
       if (hoveredMarkKey !== null) {
         hoveredMarkKey = null;
         markHoverHandler?.(null);

package/dist/index.js

@@ -4261,6 +4261,8 @@ function createChart(element, options = {}) {
   let paneButtonRegions = [];
   let hoveredPaneId = null;
   let hoveredPaneButton = null;
+  let legendRowRegions = [];
+  let hoveredLegendId = null;
   let paneDividerDrag = null;
   let indicatorPaneActionHandler = null;
   let indicatorPaneHeightChangeHandler = null;
@@ -5557,6 +5559,85 @@ function createChart(element, options = {}) {
     ctx.closePath();
     ctx.stroke();
   };
+  const INDICATOR_CONTROL_SIZE = 16;
+  const INDICATOR_CONTROL_GAP = 4;
+  const LEGEND_CONTROLS_WIDTH = (INDICATOR_CONTROL_SIZE + INDICATOR_CONTROL_GAP) * 4 + 8;
+  const drawIndicatorControls = (indicatorId, indicatorType, indicatorVisible, startX, centerY) => {
+    const labels = resolvedLabels;
+    const actionList = [
+      "visibility",
+      "settings",
+      "source",
+      "remove"
+    ];
+    let buttonX = startX;
+    for (const action of actionList) {
+      const buttonY = centerY - INDICATOR_CONTROL_SIZE / 2;
+      const hovered = hoveredPaneButton?.id === indicatorId && hoveredPaneButton.action === action;
+      const iconColor = labels.indicatorTextColor;
+      ctx.save();
+      ctx.fillStyle = hovered ? "rgba(148,163,184,0.30)" : "rgba(148,163,184,0.12)";
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), INDICATOR_CONTROL_SIZE, INDICATOR_CONTROL_SIZE, 4);
+      ctx.strokeStyle = iconColor;
+      ctx.fillStyle = iconColor;
+      ctx.globalAlpha = hovered ? 1 : 0.75;
+      ctx.lineWidth = 1.2;
+      ctx.setLineDash([]);
+      const cx = buttonX + INDICATOR_CONTROL_SIZE / 2;
+      const cy = centerY;
+      if (action === "visibility") {
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, 4.6, 3, 0, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(cx, cy, 1.3, 0, Math.PI * 2);
+        ctx.fill();
+        if (!indicatorVisible) {
+          ctx.beginPath();
+          ctx.moveTo(cx - 5.2, cy + 4.6);
+          ctx.lineTo(cx + 5.2, cy - 4.6);
+          ctx.stroke();
+        }
+      } else if (action === "settings") {
+        ctx.beginPath();
+        ctx.arc(cx, cy, 3.4, 0, Math.PI * 2);
+        ctx.stroke();
+        for (let toothIndex = 0; toothIndex < 8; toothIndex += 1) {
+          const angle = Math.PI / 4 * toothIndex;
+          ctx.beginPath();
+          ctx.moveTo(cx + Math.cos(angle) * 3.4, cy + Math.sin(angle) * 3.4);
+          ctx.lineTo(cx + Math.cos(angle) * 5.2, cy + Math.sin(angle) * 5.2);
+          ctx.stroke();
+        }
+        ctx.beginPath();
+        ctx.arc(cx, cy, 1.1, 0, Math.PI * 2);
+        ctx.fill();
+      } else if (action === "source") {
+        const prevSourceFont = ctx.font;
+        ctx.font = `bold 9px ${mergedOptions.fontFamily}`;
+        drawText("{}", cx, cy + 0.5, "center", "middle", iconColor);
+        ctx.font = prevSourceFont;
+      } else {
+        ctx.beginPath();
+        ctx.moveTo(cx - 3.4, cy - 3.4);
+        ctx.lineTo(cx + 3.4, cy + 3.4);
+        ctx.moveTo(cx + 3.4, cy - 3.4);
+        ctx.lineTo(cx - 3.4, cy + 3.4);
+        ctx.stroke();
+      }
+      ctx.restore();
+      paneButtonRegions.push({
+        id: indicatorId,
+        type: indicatorType,
+        action,
+        x: buttonX,
+        y: buttonY,
+        width: INDICATOR_CONTROL_SIZE,
+        height: INDICATOR_CONTROL_SIZE
+      });
+      buttonX += INDICATOR_CONTROL_SIZE + INDICATOR_CONTROL_GAP;
+    }
+  };
   const drawMarkBadge = (x, y, radius, color, shape, label, textColor) => {
     ctx.save();
     ctx.fillStyle = color;
@@ -5637,6 +5718,8 @@ function createChart(element, options = {}) {
     orderDragRegions = [];
     alertRegions = [];
     markRegions = [];
+    paneButtonRegions = [];
+    legendRowRegions = [];
     crosshairPriceActionRegion = null;
     const pixelRatio = getPixelRatio();
     canvas.style.width = `${width}px`;
@@ -7725,87 +7808,10 @@ function createChart(element, options = {}) {
     }
     paneLayoutFullChartHeight = fullChartHeight;
     paneLayoutInfos = [];
-    paneButtonRegions = [];
     if (activeSeparateIndicators.length > 0) {
       const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       let paneTopCursor = chartBottom + paneGap;
-      const paneButtonSize = 16;
-      const paneButtonGap = 4;
-      const drawPaneButtons = (indicatorId, indicatorType, indicatorVisible, startX, centerY) => {
-        const actionList = [
-          "visibility",
-          "settings",
-          "source",
-          "remove"
-        ];
-        let buttonX = startX;
-        for (const action of actionList) {
-          const buttonY = centerY - paneButtonSize / 2;
-          const hovered = hoveredPaneButton?.id === indicatorId && hoveredPaneButton.action === action;
-          const iconColor = labels.indicatorTextColor;
-          ctx.save();
-          ctx.fillStyle = hovered ? "rgba(148,163,184,0.30)" : "rgba(148,163,184,0.12)";
-          fillRoundedRect(Math.round(buttonX), Math.round(buttonY), paneButtonSize, paneButtonSize, 4);
-          ctx.strokeStyle = iconColor;
-          ctx.fillStyle = iconColor;
-          ctx.globalAlpha = hovered ? 1 : 0.75;
-          ctx.lineWidth = 1.2;
-          ctx.setLineDash([]);
-          const cx = buttonX + paneButtonSize / 2;
-          const cy = centerY;
-          if (action === "visibility") {
-            ctx.beginPath();
-            ctx.ellipse(cx, cy, 4.6, 3, 0, 0, Math.PI * 2);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.arc(cx, cy, 1.3, 0, Math.PI * 2);
-            ctx.fill();
-            if (!indicatorVisible) {
-              ctx.beginPath();
-              ctx.moveTo(cx - 5.2, cy + 4.6);
-              ctx.lineTo(cx + 5.2, cy - 4.6);
-              ctx.stroke();
-            }
-          } else if (action === "settings") {
-            ctx.beginPath();
-            ctx.arc(cx, cy, 3.4, 0, Math.PI * 2);
-            ctx.stroke();
-            for (let toothIndex = 0; toothIndex < 8; toothIndex += 1) {
-              const angle = Math.PI / 4 * toothIndex;
-              ctx.beginPath();
-              ctx.moveTo(cx + Math.cos(angle) * 3.4, cy + Math.sin(angle) * 3.4);
-              ctx.lineTo(cx + Math.cos(angle) * 5.2, cy + Math.sin(angle) * 5.2);
-              ctx.stroke();
-            }
-            ctx.beginPath();
-            ctx.arc(cx, cy, 1.1, 0, Math.PI * 2);
-            ctx.fill();
-          } else if (action === "source") {
-            const prevSourceFont = ctx.font;
-            ctx.font = `bold 9px ${mergedOptions.fontFamily}`;
-            drawText("{}", cx, cy + 0.5, "center", "middle", iconColor);
-            ctx.font = prevSourceFont;
-          } else {
-            ctx.beginPath();
-            ctx.moveTo(cx - 3.4, cy - 3.4);
-            ctx.lineTo(cx + 3.4, cy + 3.4);
-            ctx.moveTo(cx + 3.4, cy - 3.4);
-            ctx.lineTo(cx - 3.4, cy + 3.4);
-            ctx.stroke();
-          }
-          ctx.restore();
-          paneButtonRegions.push({
-            id: indicatorId,
-            type: indicatorType,
-            action,
-            x: buttonX,
-            y: buttonY,
-            width: paneButtonSize,
-            height: paneButtonSize
-          });
-          buttonX += paneButtonSize + paneButtonGap;
-        }
-      };
+      const drawPaneButtons = drawIndicatorControls;
       activeSeparateIndicators.forEach(({ indicator, plugin }, paneIndex) => {
         const paneHeight = separatePaneHeights[paneIndex] ?? 80;
         const paneTop = paneTopCursor;
@@ -8307,26 +8313,56 @@ function createChart(element, options = {}) {
       };
       const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
         const inputValues = Object.entries(indicator.inputs).filter(([key, value]) => !LEGEND_EXCLUDED_INPUT_KEYS.has(key) && typeof value !== "boolean" && isLegendInputValue(value)).slice(0, 2).map(([, value]) => formatLegendValue(value));
-        if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
-          return `${plugin.name} ${inputValues.join(" ")}`;
-        }
-        if (labels.showIndicatorNames) {
-          return plugin.name;
-        }
-        return inputValues.join(" ");
-      }).filter((entry) => entry.length > 0);
+        const text = labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0 ? `${plugin.name} ${inputValues.join(" ")}` : labels.showIndicatorNames ? plugin.name : inputValues.join(" ");
+        return { id: indicator.id, type: indicator.type, visible: indicator.visible, text };
+      }).filter((entry) => entry.text.length > 0);
       if (labelEntries.length > 0) {
         const prevFont = ctx.font;
-        ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
-        const legendText = labelEntries.join("   ");
+        const legendFontSize = Math.max(8, axis.fontSize);
+        ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
         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 : Math.max(chartTop + offsetY, dataLineBottom);
-        drawText(legendText, legendX, legendY, isRight ? "right" : "left", isBottom ? "bottom" : "top", labels.indicatorTextColor);
+        const legendTop = isBottom ? chartBottom - offsetY : Math.max(chartTop + offsetY, dataLineBottom);
+        const rowHeight = Math.round(legendFontSize * 1.55);
+        labelEntries.forEach((entry, rowIndex) => {
+          const rowTop = isBottom ? legendTop - (labelEntries.length - rowIndex) * rowHeight : legendTop + rowIndex * rowHeight;
+          const rowCenter = rowTop + rowHeight / 2;
+          const dimmed = entry.visible === false;
+          ctx.save();
+          if (dimmed) ctx.globalAlpha = 0.45;
+          drawText(
+            entry.text,
+            legendX,
+            rowCenter,
+            isRight ? "right" : "left",
+            "middle",
+            labels.indicatorTextColor
+          );
+          ctx.restore();
+          const textWidth = measureTextWidth(entry.text);
+          const rowLeft = isRight ? legendX - textWidth : legendX;
+          legendRowRegions.push({
+            id: entry.id,
+            type: entry.type,
+            x: rowLeft,
+            y: rowTop,
+            width: textWidth + LEGEND_CONTROLS_WIDTH,
+            height: rowHeight
+          });
+          if (hoveredLegendId === entry.id) {
+            drawIndicatorControls(
+              entry.id,
+              entry.type,
+              entry.visible !== false,
+              isRight ? legendX + 6 : rowLeft + textWidth + 8,
+              rowCenter
+            );
+          }
+        });
         ctx.font = prevFont;
       }
     }
@@ -8998,6 +9034,9 @@ function createChart(element, options = {}) {
     if (hits.length === 0) return null;
     return hits.find((region) => region.part === "remove") ?? hits[0];
   };
+  const getLegendRowAt = (x, y) => legendRowRegions.find(
+    (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
+  ) ?? null;
   const getMarkAt = (x, y) => {
     const tolerance = touchInputActive ? Math.max(1, mergedOptions.touch?.hitToleranceScale ?? 2.2) : 1;
     for (let index = markRegions.length - 1; index >= 0; index -= 1) {
@@ -10747,6 +10786,12 @@ function createChart(element, options = {}) {
           setCrosshairPoint(null);
           return;
         }
+        const legendRow = getLegendRowAt(point.x, point.y);
+        const nextLegendId = legendRow?.id ?? null;
+        if (nextLegendId !== hoveredLegendId) {
+          hoveredLegendId = nextLegendId;
+          scheduleDraw();
+        }
         const hoveredPane = getPaneAt(point.x, point.y);
         const nextHoveredPaneId = hoveredPane?.id ?? null;
         if (nextHoveredPaneId !== hoveredPaneId) {
@@ -10965,10 +11010,11 @@ function createChart(element, options = {}) {
       });
       paneDividerDrag = null;
     }
-    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null || hoveredAlertId !== null || hoveredMarkKey !== null)) {
+    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null || hoveredAlertId !== null || hoveredMarkKey !== null || hoveredLegendId !== null)) {
       hoveredPaneId = null;
       hoveredPaneButton = null;
       hoveredAlertId = null;
+      hoveredLegendId = null;
       if (hoveredMarkKey !== null) {
         hoveredMarkKey = null;
         markHoverHandler?.(null);

package/docs/API.md

@@ -690,6 +690,27 @@ runs 18:00–17:00, but the levels traders mark are relative to the 09:30 equity
 open inside it. Everything in the current session outside those hours counts as
 overnight.
 
+### Fixed-range volume profile (drawing tool)
+
+The third profile variant is a *drawing* rather than an indicator, because it
+needs a range: arm `fixed-range-volume-profile` and click twice to bracket the
+bars. Only the anchors' bar indexes matter — the price extent comes from the
+bars they enclose.
+
+```ts
+chart.setActiveDrawingTool("fixed-range-volume-profile");
+chart.setDrawingDefaults("fixed-range-volume-profile", {
+  color: "#5b8def",
+  profileRows: 24,
+  profileValueAreaPercent: 70,
+  profileWidthRatio: 0.5
+});
+```
+
+It draws the selected span, the volume rows (buy/sell split, brighter inside
+the value area) growing right from the range start, and POC/VAH/VAL. Being a
+drawing, it is draggable, undoable and part of `saveState()` like any other.
+
 ### `anchored-vwap`
 
 VWAP measured from a bar you choose rather than the session open.

package/package.json

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