hyperprop-charting-library 0.1.128 → 0.1.130

package/dist/hyperprop-charting-library.js

@@ -759,6 +759,40 @@ var fillBetweenSeries = (ctx, renderContext, upper, lower, color, opacity) => {
   flushRun(renderContext.endIndex + 1);
   ctx.restore();
 };
+var drawPaneHorizontalGrid = (ctx, renderContext, minValue, maxValue) => {
+  const grid = renderContext.grid;
+  if (!grid || !grid.horizontalLines) return;
+  const range = maxValue - minValue;
+  if (!(range > 0) || !Number.isFinite(range)) return;
+  const targetCount = Math.max(2, Math.round(renderContext.chartHeight / 42));
+  const targetStep = range / targetCount;
+  if (!(targetStep > 0) || !Number.isFinite(targetStep)) return;
+  const base = Math.pow(10, Math.floor(Math.log10(targetStep)));
+  const frac = targetStep / base;
+  const step = (frac <= 1 ? 1 : frac <= 2 ? 2 : frac <= 2.5 ? 2.5 : frac <= 5 ? 5 : 10) * base;
+  ctx.save();
+  ctx.globalAlpha = Math.min(1, Math.max(0, grid.opacity));
+  ctx.strokeStyle = grid.color;
+  ctx.lineWidth = 1;
+  ctx.setLineDash([]);
+  ctx.beginPath();
+  const firstTick = Math.ceil(minValue / step) * step;
+  const edgeInset = renderContext.chartHeight * 0.04;
+  for (let i = 0; i < 64; i += 1) {
+    const value = firstTick + i * step;
+    if (value > maxValue) break;
+    const ratio = (value - minValue) / range;
+    const y = renderContext.chartBottom - ratio * renderContext.chartHeight;
+    if (y > renderContext.chartBottom - edgeInset || y < renderContext.chartBottom - renderContext.chartHeight + edgeInset) {
+      continue;
+    }
+    const crispY = Math.round(y) + 0.5;
+    ctx.moveTo(renderContext.chartLeft, crispY);
+    ctx.lineTo(renderContext.chartRight, crispY);
+  }
+  ctx.stroke();
+  ctx.restore();
+};
 var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride, maxOverride, guideLines, options = {}) => {
   const visible = [];
   for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
@@ -770,6 +804,7 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
   if (visible.length === 0) return void 0;
   const minValue = minOverride ?? Math.min(...visible);
   const maxValue = maxOverride ?? Math.max(...visible);
+  drawPaneHorizontalGrid(ctx, renderContext, minValue, maxValue);
   const range = maxValue - minValue || 1;
   const yFromValue = (value) => {
     const ratio = (value - minValue) / range;
@@ -824,6 +859,19 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
       break;
     }
   }
+  if (options.valueLine && latestValue !== null && latestValue >= minValue && latestValue <= maxValue) {
+    ctx.save();
+    ctx.lineWidth = 1;
+    ctx.setLineDash([3, 3]);
+    ctx.globalAlpha = 0.65;
+    ctx.strokeStyle = color;
+    const y = yFromValue(latestValue);
+    ctx.beginPath();
+    ctx.moveTo(renderContext.chartLeft, y);
+    ctx.lineTo(renderContext.chartRight, y);
+    ctx.stroke();
+    ctx.restore();
+  }
   const decimals = options.decimals ?? 2;
   const formatValue = (value) => value.toFixed(decimals);
   const axisTicks = options.axisTicks ?? guideLines;
@@ -1151,7 +1199,7 @@ var BUILTIN_STDDEV_INDICATOR = {
   name: "StdDev",
   pane: "separate",
   paneHeightRatio: 0.16,
-  defaultInputs: { length: 20, source: "close", color: "#f97316", width: 2 },
+  defaultInputs: { length: 20, source: "close", color: "#f97316", width: 2, showValueLine: true },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 20);
     const values = withCachedSeries(
@@ -1161,7 +1209,8 @@ var BUILTIN_STDDEV_INDICATOR = {
     );
     return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#f97316", Number(inputs.width) || 2, void 0, void 0, void 0, {
       title: `StdDev ${length}`,
-      decimals: 2
+      decimals: 2,
+      valueLine: inputs.showValueLine !== false
     });
   }
 };
@@ -1170,13 +1219,14 @@ var BUILTIN_ATR_INDICATOR = {
   name: "ATR",
   pane: "separate",
   paneHeightRatio: 0.16,
-  defaultInputs: { length: 14, color: "#eab308", width: 2 },
+  defaultInputs: { length: 14, color: "#eab308", width: 2, showValueLine: true },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
     const values = withCachedSeries(`atr|${length}`, renderContext.data, () => computeAtrSeries(renderContext.data, length));
     return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#eab308", Number(inputs.width) || 2, void 0, void 0, void 0, {
       title: `ATR ${length}`,
-      decimals: 2
+      decimals: 2,
+      valueLine: inputs.showValueLine !== false
     });
   }
 };
@@ -1192,7 +1242,8 @@ var BUILTIN_RSI_INDICATOR = {
     showLegend: true,
     showValueLabel: true,
     showGuideLines: true,
-    showScaleLabels: true
+    showScaleLabels: true,
+    showValueLine: true
   },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
@@ -1215,7 +1266,8 @@ var BUILTIN_RSI_INDICATOR = {
         valueLabelColor: "#9E9E9E",
         valueLabelBackgroundColor: "#9E9E9E",
         valueLabelTextColor: "#0f172a",
-        showLegend: inputs.showLegend !== false
+        showLegend: inputs.showLegend !== false,
+        valueLine: inputs.showValueLine !== false
       }
     );
   }
@@ -1272,6 +1324,7 @@ var drawSeparateMultiSeries = (ctx, renderContext, seriesList, options = {}) =>
     const ratio = (value - minValue) / range;
     return renderContext.chartBottom - ratio * renderContext.chartHeight;
   };
+  drawPaneHorizontalGrid(ctx, renderContext, minValue, maxValue);
   if (options.guideLines && options.guideLines.length > 0) {
     ctx.save();
     ctx.strokeStyle = "rgba(148,163,184,0.35)";
@@ -1351,6 +1404,24 @@ var drawSeparateMultiSeries = (ctx, renderContext, seriesList, options = {}) =>
     }
     return null;
   };
+  if (options.valueLines) {
+    ctx.save();
+    ctx.lineWidth = 1;
+    ctx.setLineDash([3, 3]);
+    ctx.globalAlpha = 0.65;
+    for (const spec of seriesList) {
+      if (spec.histogram) continue;
+      const latest = latestOf(spec.values);
+      if (latest === null || latest < minValue || latest > maxValue) continue;
+      const y = yFromValue(latest);
+      ctx.strokeStyle = spec.color;
+      ctx.beginPath();
+      ctx.moveTo(renderContext.chartLeft, y);
+      ctx.lineTo(renderContext.chartRight, y);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
   const paneInfo = {
     ...options.title ? { title: options.title } : {},
     axis: {
@@ -1704,7 +1775,8 @@ var BUILTIN_MACD_INDICATOR = {
     macdColor: "#2962ff",
     signalColor: "#ff6d00",
     histUpColor: "#26a69a",
-    histDownColor: "#ef5350"
+    histDownColor: "#ef5350",
+    showValueLine: true
   },
   draw: (ctx, renderContext, inputs) => {
     const fast = clampIndicatorLength(inputs.fast, 12);
@@ -1733,7 +1805,8 @@ var BUILTIN_MACD_INDICATOR = {
         includeZero: true,
         guideLines: [0],
         decimals: 2,
-        valueLabelSeriesIndex: 1
+        valueLabelSeriesIndex: 1,
+        valueLines: inputs.showValueLine !== false
       }
     );
   }
@@ -1743,7 +1816,7 @@ var BUILTIN_STOCHASTIC_INDICATOR = {
   name: "Stoch",
   pane: "separate",
   paneHeightRatio: 0.18,
-  defaultInputs: { kLength: 14, kSmoothing: 1, dLength: 3, kColor: "#2962ff", dColor: "#ff6d00" },
+  defaultInputs: { kLength: 14, kSmoothing: 1, dLength: 3, kColor: "#2962ff", dColor: "#ff6d00", showValueLine: true },
   draw: (ctx, renderContext, inputs) => {
     const kLength = clampIndicatorLength(inputs.kLength, 14);
     const kSmoothing = clampIndicatorLength(inputs.kSmoothing, 1);
@@ -1766,7 +1839,8 @@ var BUILTIN_STOCHASTIC_INDICATOR = {
         maxOverride: 100,
         guideLines: [20, 80],
         axisTicks: [0, 20, 50, 80, 100],
-        decimals: 2
+        decimals: 2,
+        valueLines: inputs.showValueLine !== false
       }
     );
   }
@@ -1776,7 +1850,15 @@ var BUILTIN_STOCHRSI_INDICATOR = {
   name: "Stoch RSI",
   pane: "separate",
   paneHeightRatio: 0.18,
-  defaultInputs: { rsiLength: 14, stochLength: 14, kSmoothing: 3, dSmoothing: 3, kColor: "#2962ff", dColor: "#ff6d00" },
+  defaultInputs: {
+    rsiLength: 14,
+    stochLength: 14,
+    kSmoothing: 3,
+    dSmoothing: 3,
+    kColor: "#2962ff",
+    dColor: "#ff6d00",
+    showValueLine: true
+  },
   draw: (ctx, renderContext, inputs) => {
     const rsiLength = clampIndicatorLength(inputs.rsiLength, 14);
     const stochLength = clampIndicatorLength(inputs.stochLength, 14);
@@ -1800,7 +1882,8 @@ var BUILTIN_STOCHRSI_INDICATOR = {
         maxOverride: 100,
         guideLines: [20, 80],
         axisTicks: [0, 20, 50, 80, 100],
-        decimals: 2
+        decimals: 2,
+        valueLines: inputs.showValueLine !== false
       }
     );
   }
@@ -1810,7 +1893,14 @@ var BUILTIN_ADX_INDICATOR = {
   name: "ADX/DMI",
   pane: "separate",
   paneHeightRatio: 0.18,
-  defaultInputs: { length: 14, adxColor: "#ff6d00", plusDiColor: "#26a69a", minusDiColor: "#ef5350", showDi: true },
+  defaultInputs: {
+    length: 14,
+    adxColor: "#ff6d00",
+    plusDiColor: "#26a69a",
+    minusDiColor: "#ef5350",
+    showDi: true,
+    showValueLine: true
+  },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
     const { adx, plusDi, minusDi } = withCachedComputation(
@@ -1831,7 +1921,8 @@ var BUILTIN_ADX_INDICATOR = {
       title: `ADX ${length}`,
       minOverride: 0,
       guideLines: [20],
-      decimals: 2
+      decimals: 2,
+      valueLines: inputs.showValueLine !== false
     });
   }
 };
@@ -1840,14 +1931,14 @@ var BUILTIN_OBV_INDICATOR = {
   name: "OBV",
   pane: "separate",
   paneHeightRatio: 0.16,
-  defaultInputs: { color: "#2962ff", width: 2 },
+  defaultInputs: { color: "#2962ff", width: 2, showValueLine: true },
   draw: (ctx, renderContext, inputs) => {
     const values = withCachedSeries("obv", renderContext.data, () => computeObvSeries(renderContext.data));
     return drawSeparateMultiSeries(
       ctx,
       renderContext,
       [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2, label: "OBV" }],
-      { title: "OBV", format: formatCompactNumber }
+      { title: "OBV", format: formatCompactNumber, valueLines: inputs.showValueLine !== false }
     );
   }
 };
@@ -1856,7 +1947,7 @@ var BUILTIN_MFI_INDICATOR = {
   name: "MFI",
   pane: "separate",
   paneHeightRatio: 0.16,
-  defaultInputs: { length: 14, color: "#7e57c2", width: 2 },
+  defaultInputs: { length: 14, color: "#7e57c2", width: 2, showValueLine: true },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
     const values = withCachedSeries(
@@ -1874,7 +1965,8 @@ var BUILTIN_MFI_INDICATOR = {
         maxOverride: 100,
         guideLines: [20, 80],
         axisTicks: [0, 20, 50, 80, 100],
-        decimals: 2
+        decimals: 2,
+        valueLines: inputs.showValueLine !== false
       }
     );
   }
@@ -1884,7 +1976,7 @@ var BUILTIN_CCI_INDICATOR = {
   name: "CCI",
   pane: "separate",
   paneHeightRatio: 0.16,
-  defaultInputs: { length: 20, color: "#2962ff", width: 2 },
+  defaultInputs: { length: 20, color: "#2962ff", width: 2, showValueLine: true },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 20);
     const values = withCachedSeries(
@@ -1896,7 +1988,7 @@ var BUILTIN_CCI_INDICATOR = {
       ctx,
       renderContext,
       [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
-      { title: `CCI ${length}`, guideLines: [-100, 0, 100], decimals: 2 }
+      { title: `CCI ${length}`, guideLines: [-100, 0, 100], decimals: 2, valueLines: inputs.showValueLine !== false }
     );
   }
 };
@@ -1905,7 +1997,7 @@ var BUILTIN_WILLIAMSR_INDICATOR = {
   name: "Williams %R",
   pane: "separate",
   paneHeightRatio: 0.16,
-  defaultInputs: { length: 14, color: "#7e57c2", width: 2 },
+  defaultInputs: { length: 14, color: "#7e57c2", width: 2, showValueLine: true },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
     const values = withCachedSeries(
@@ -1923,7 +2015,8 @@ var BUILTIN_WILLIAMSR_INDICATOR = {
         maxOverride: 0,
         guideLines: [-80, -20],
         axisTicks: [-100, -80, -50, -20, 0],
-        decimals: 2
+        decimals: 2,
+        valueLines: inputs.showValueLine !== false
       }
     );
   }
@@ -1933,7 +2026,7 @@ var BUILTIN_ROC_INDICATOR = {
   name: "ROC",
   pane: "separate",
   paneHeightRatio: 0.16,
-  defaultInputs: { length: 9, color: "#2962ff", width: 2 },
+  defaultInputs: { length: 9, color: "#2962ff", width: 2, showValueLine: true },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 9);
     const values = withCachedSeries(
@@ -1945,7 +2038,7 @@ var BUILTIN_ROC_INDICATOR = {
       ctx,
       renderContext,
       [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
-      { title: `ROC ${length}`, includeZero: true, guideLines: [0], decimals: 2 }
+      { title: `ROC ${length}`, includeZero: true, guideLines: [0], decimals: 2, valueLines: inputs.showValueLine !== false }
     );
   }
 };
@@ -1954,7 +2047,7 @@ var BUILTIN_MOMENTUM_INDICATOR = {
   name: "Momentum",
   pane: "separate",
   paneHeightRatio: 0.16,
-  defaultInputs: { length: 10, color: "#2962ff", width: 2 },
+  defaultInputs: { length: 10, color: "#2962ff", width: 2, showValueLine: true },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 10);
     const values = withCachedSeries(
@@ -1966,7 +2059,7 @@ var BUILTIN_MOMENTUM_INDICATOR = {
       ctx,
       renderContext,
       [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
-      { title: `Mom ${length}`, includeZero: true, guideLines: [0], decimals: 2 }
+      { title: `Mom ${length}`, includeZero: true, guideLines: [0], decimals: 2, valueLines: inputs.showValueLine !== false }
     );
   }
 };
@@ -2390,6 +2483,14 @@ function createChart(element, options = {}) {
   let watermarkImageReady = false;
   let drawState = null;
   let plotBottomForHit = 0;
+  let paneLayoutFullChartHeight = 0;
+  let paneLayoutInfos = [];
+  let paneButtonRegions = [];
+  let hoveredPaneId = null;
+  let hoveredPaneButton = null;
+  let paneDividerDrag = null;
+  let indicatorPaneActionHandler = null;
+  let indicatorPaneHeightChangeHandler = null;
   let orderDragState = null;
   let actionDragState = null;
   let pointerDownInfo = null;
@@ -3491,20 +3592,24 @@ function createChart(element, options = {}) {
     const watermark = { ...DEFAULT_WATERMARK_OPTIONS, ...mergedOptions.watermark ?? {} };
     const paneGap = 0;
     const separatePaneSpacing = 6;
-    const activeSeparateIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
+    const collapsedPaneHeight = 26;
+    const activeSeparateIndicators = indicators.map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "separate"
     ).sort((a, b) => a.indicator.zIndex - b.indicator.zIndex);
     const overlayIndicatorsForScale = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "overlay"
     );
     const separatePaneHeightDefaults = activeSeparateIndicators.map(({ indicator, plugin }) => {
+      if (!indicator.visible) return collapsedPaneHeight;
       const ratio = Math.min(0.45, Math.max(0.08, indicator.paneHeightRatio ?? plugin.paneHeightRatio ?? 0.22));
       return Math.round(fullChartHeight * ratio);
     });
     const separatePaneDesiredTotal = separatePaneHeightDefaults.reduce((sum, value) => sum + value, 0) + Math.max(0, activeSeparateIndicators.length - 1) * separatePaneSpacing;
     const maxSeparatePaneTotal = Math.max(0, fullChartHeight - 140);
     const separatePaneScale = separatePaneDesiredTotal > 0 && separatePaneDesiredTotal > maxSeparatePaneTotal ? maxSeparatePaneTotal / separatePaneDesiredTotal : 1;
-    const separatePaneHeights = separatePaneHeightDefaults.map((value) => Math.max(48, Math.round(value * separatePaneScale)));
+    const separatePaneHeights = separatePaneHeightDefaults.map(
+      (value, index) => activeSeparateIndicators[index].indicator.visible ? Math.max(48, Math.round(value * separatePaneScale)) : collapsedPaneHeight
+    );
     const separatePaneTotal = separatePaneHeights.reduce((sum, value) => sum + value, 0) + Math.max(0, activeSeparateIndicators.length - 1) * separatePaneSpacing;
     const pricePaneGap = activeSeparateIndicators.length > 0 ? paneGap : 0;
     const chartHeight = Math.max(120, fullChartHeight - separatePaneTotal - pricePaneGap);
@@ -4755,43 +4860,138 @@ function createChart(element, options = {}) {
         ctx.restore();
       }
     }
+    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;
+        }
+      };
       activeSeparateIndicators.forEach(({ indicator, plugin }, paneIndex) => {
         const paneHeight = separatePaneHeights[paneIndex] ?? 80;
         const paneTop = paneTopCursor;
         const paneBottom = paneTop + paneHeight;
         paneTopCursor = paneBottom + separatePaneSpacing;
-        ctx.save();
-        ctx.beginPath();
-        ctx.rect(chartLeft + 1, paneTop + 1, Math.max(0, chartWidth - 2), Math.max(0, paneHeight - 2));
-        ctx.clip();
-        const paneInfo = plugin.draw(
-          ctx,
-          {
-            data,
-            startIndex,
-            endIndex,
-            xStart,
-            xSpan,
-            chartLeft,
-            chartRight,
-            chartTop: paneTop,
-            chartBottom: paneBottom,
-            chartWidth,
-            chartHeight: paneHeight,
-            xFromIndex,
-            yFromPrice: null,
-            getCandleDirectionByIndex,
-            getVolumeByIndex,
-            candleSpacing,
-            upColor: mergedOptions.upColor,
-            downColor: mergedOptions.downColor
-          },
-          indicator.inputs
-        );
-        ctx.restore();
+        paneLayoutInfos.push({
+          id: indicator.id,
+          type: indicator.type,
+          top: paneTop,
+          bottom: paneBottom,
+          visible: indicator.visible
+        });
+        let paneInfo;
+        if (indicator.visible) {
+          ctx.save();
+          ctx.beginPath();
+          ctx.rect(chartLeft + 1, paneTop + 1, Math.max(0, chartWidth - 2), Math.max(0, paneHeight - 2));
+          ctx.clip();
+          paneInfo = plugin.draw(
+            ctx,
+            {
+              data,
+              startIndex,
+              endIndex,
+              xStart,
+              xSpan,
+              chartLeft,
+              chartRight,
+              chartTop: paneTop,
+              chartBottom: paneBottom,
+              chartWidth,
+              chartHeight: paneHeight,
+              xFromIndex,
+              yFromPrice: null,
+              getCandleDirectionByIndex,
+              getVolumeByIndex,
+              candleSpacing,
+              upColor: mergedOptions.upColor,
+              downColor: mergedOptions.downColor,
+              grid: {
+                color: gridColor,
+                opacity: gridOpacity,
+                horizontalLines: grid.horizontalLines !== false
+              }
+            },
+            indicator.inputs
+          ) ?? void 0;
+          ctx.restore();
+        }
         ctx.save();
         ctx.strokeStyle = axis.lineColor;
         ctx.lineWidth = Math.max(1, axis.lineWidth);
@@ -4800,6 +5000,27 @@ function createChart(element, options = {}) {
         ctx.lineTo(crisp(chartRight), crisp(paneTop));
         ctx.stroke();
         ctx.restore();
+        if (!indicator.visible) {
+          if (labels.visible) {
+            const prevFont = ctx.font;
+            ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+            const hiddenText = `${plugin.name} (hidden)`;
+            const rowCenterY = (paneTop + paneBottom) / 2;
+            ctx.save();
+            ctx.globalAlpha = 0.55;
+            drawText(hiddenText, chartLeft + 10, rowCenterY, "left", "middle", labels.indicatorTextColor);
+            ctx.restore();
+            drawPaneButtons(
+              indicator.id,
+              indicator.type,
+              false,
+              chartLeft + 10 + Math.ceil(measureTextWidth(hiddenText)) + 10,
+              rowCenterY
+            );
+            ctx.font = prevFont;
+          }
+          return;
+        }
         const axisInfo = paneInfo?.axis;
         if (axisInfo && Number.isFinite(axisInfo.min) && Number.isFinite(axisInfo.max) && axisInfo.max !== axisInfo.min) {
           const paneRange = axisInfo.max - axisInfo.min;
@@ -4829,17 +5050,28 @@ function createChart(element, options = {}) {
           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 legendFontSize = Math.max(8, axis.fontSize);
+            ctx.font = `${legendFontSize}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);
+            const legendText = legendParts.join("  ");
             if (legendParts.length > 0) {
-              drawText(legendParts.join("  "), chartLeft + 10, paneTop + 8, "left", "top", labels.indicatorTextColor);
+              drawText(legendText, chartLeft + 10, paneTop + 8, "left", "top", labels.indicatorTextColor);
             }
-            for (const label of paneInfo.valueLabels ?? []) {
+            if (hoveredPaneId === indicator.id) {
+              drawPaneButtons(
+                indicator.id,
+                indicator.type,
+                true,
+                chartLeft + 10 + Math.ceil(measureTextWidth(legendText)) + 10,
+                paneTop + 8 + legendFontSize / 2
+              );
+            }
+            for (const label of paneInfo?.valueLabels ?? []) {
               if (!labels.showIndicatorValueLabels) {
                 continue;
               }
@@ -6051,6 +6283,54 @@ function createChart(element, options = {}) {
     }
     return "outside";
   };
+  const getPaneButtonHit = (x, y) => {
+    for (const region of paneButtonRegions) {
+      if (x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height) {
+        return { id: region.id, type: region.type, action: region.action };
+      }
+    }
+    return null;
+  };
+  const getPaneAt = (x, y) => {
+    if (!drawState || x < drawState.chartLeft || x > drawState.chartRight) {
+      return null;
+    }
+    for (const pane of paneLayoutInfos) {
+      if (y >= pane.top && y <= pane.bottom) {
+        return pane;
+      }
+    }
+    return null;
+  };
+  const getPaneDividerHit = (x, y) => {
+    if (!drawState || x < drawState.chartLeft || x > drawState.chartRight) {
+      return null;
+    }
+    for (const pane of paneLayoutInfos) {
+      if (pane.visible && Math.abs(y - pane.top) <= 4) {
+        return { id: pane.id, heightPx: pane.bottom - pane.top };
+      }
+    }
+    return null;
+  };
+  const handlePaneButtonAction = (hit) => {
+    const indicator = indicators.find((entry) => entry.id === hit.id);
+    if (!indicator) {
+      return;
+    }
+    if (hit.action === "visibility") {
+      indicator.visible = !indicator.visible;
+      scheduleDraw();
+      indicatorPaneActionHandler?.({ id: hit.id, type: hit.type, action: "visibility", visible: indicator.visible });
+      return;
+    }
+    if (hit.action === "remove" && !indicatorPaneActionHandler) {
+      indicators = indicators.filter((entry) => entry.id !== hit.id);
+      scheduleDraw();
+      return;
+    }
+    indicatorPaneActionHandler?.({ id: hit.id, type: hit.type, action: hit.action });
+  };
   const handleDrawingToolPointerDown = (x, y) => {
     if (!activeDrawingTool || !drawState) {
       return false;
@@ -6530,6 +6810,26 @@ function createChart(element, options = {}) {
         setCrosshairPoint(null);
         return;
       }
+      const paneButtonHit = getPaneButtonHit(point.x, point.y);
+      if (paneButtonHit) {
+        setCrosshairPoint(null);
+        handlePaneButtonAction(paneButtonHit);
+        return;
+      }
+      const paneDividerHit = getPaneDividerHit(point.x, point.y);
+      if (paneDividerHit) {
+        activePointerId = event.pointerId;
+        paneDividerDrag = {
+          id: paneDividerHit.id,
+          startY: point.y,
+          startHeightPx: paneDividerHit.heightPx,
+          lastRatio: paneLayoutFullChartHeight > 0 ? paneDividerHit.heightPx / paneLayoutFullChartHeight : 0.2
+        };
+        capturePointer(event.pointerId);
+        canvas.style.cursor = "row-resize";
+        setCrosshairPoint(null);
+        return;
+      }
     }
     const region = getHitRegion(point.x, point.y);
     if (region === "outside") {
@@ -6654,6 +6954,32 @@ function createChart(element, options = {}) {
         return;
       }
     }
+    if (paneDividerDrag) {
+      if (activePointerId !== null && event.pointerId !== activePointerId) {
+        return;
+      }
+      const fullHeight = paneLayoutFullChartHeight;
+      if (fullHeight > 0) {
+        const nextHeightPx = clamp(
+          paneDividerDrag.startHeightPx + (paneDividerDrag.startY - point.y),
+          48,
+          Math.round(fullHeight * 0.45)
+        );
+        const nextRatio = nextHeightPx / fullHeight;
+        if (Math.abs(nextRatio - paneDividerDrag.lastRatio) > 5e-4) {
+          paneDividerDrag.lastRatio = nextRatio;
+          const targetIndicator = indicators.find((entry) => entry.id === paneDividerDrag?.id);
+          if (targetIndicator) {
+            targetIndicator.paneHeightRatio = nextRatio;
+            indicatorPaneHeightChangeHandler?.({ id: paneDividerDrag.id, paneHeightRatio: nextRatio, dragging: true });
+            scheduleDraw();
+          }
+        }
+      }
+      canvas.style.cursor = "row-resize";
+      setCrosshairPoint(null);
+      return;
+    }
     if (orderDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -6726,6 +7052,33 @@ function createChart(element, options = {}) {
           setCrosshairPoint(null);
           return;
         }
+        const hoveredPane = getPaneAt(point.x, point.y);
+        const nextHoveredPaneId = hoveredPane?.id ?? null;
+        if (nextHoveredPaneId !== hoveredPaneId) {
+          hoveredPaneId = nextHoveredPaneId;
+          scheduleDraw();
+        }
+        const paneButtonHover = getPaneButtonHit(point.x, point.y);
+        const nextHoveredButton = paneButtonHover ? { id: paneButtonHover.id, action: paneButtonHover.action } : null;
+        if ((nextHoveredButton?.id ?? null) !== (hoveredPaneButton?.id ?? null) || nextHoveredButton?.action !== hoveredPaneButton?.action) {
+          hoveredPaneButton = nextHoveredButton;
+          scheduleDraw();
+        }
+        if (paneButtonHover) {
+          const indicatorForTitle = indicators.find((entry) => entry.id === paneButtonHover.id);
+          canvas.title = paneButtonHover.action === "visibility" ? indicatorForTitle?.visible === false ? "Show" : "Hide" : paneButtonHover.action === "settings" ? "Settings" : paneButtonHover.action === "source" ? "View source" : "Remove";
+          canvas.style.cursor = "pointer";
+          setCrosshairPoint(null);
+          return;
+        }
+        if (canvas.title) {
+          canvas.title = "";
+        }
+        if (getPaneDividerHit(point.x, point.y)) {
+          canvas.style.cursor = "row-resize";
+          setCrosshairPoint(null);
+          return;
+        }
       }
       if (!activeDrawingTool && getDrawingHit(point.x, point.y)) {
         const drawingHit = getDrawingHit(point.x, point.y);
@@ -6845,6 +7198,22 @@ function createChart(element, options = {}) {
       drawingDragState = null;
       emitDrawingsChange();
     }
+    if (paneDividerDrag) {
+      indicatorPaneHeightChangeHandler?.({
+        id: paneDividerDrag.id,
+        paneHeightRatio: paneDividerDrag.lastRatio,
+        dragging: false
+      });
+      paneDividerDrag = null;
+    }
+    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null)) {
+      hoveredPaneId = null;
+      hoveredPaneButton = null;
+      if (canvas.title) {
+        canvas.title = "";
+      }
+      scheduleDraw();
+    }
     const endedPlotDrag = isDragging && dragMode === "plot";
     isDragging = false;
     dragMode = null;
@@ -7190,6 +7559,12 @@ function createChart(element, options = {}) {
   const onCrosshairPriceAction = (handler) => {
     crosshairPriceActionHandler = handler;
   };
+  const onIndicatorPaneAction = (handler) => {
+    indicatorPaneActionHandler = handler;
+  };
+  const onIndicatorPaneHeightChange = (handler) => {
+    indicatorPaneHeightChangeHandler = handler;
+  };
   const setDoubleClickEnabled = (enabled) => {
     doubleClickEnabled = enabled;
   };
@@ -7395,6 +7770,8 @@ function createChart(element, options = {}) {
     onChartClick,
     onCrosshairMove,
     onCrosshairPriceAction,
+    onIndicatorPaneAction,
+    onIndicatorPaneHeightChange,
     zoomInX,
     zoomOutX,
     zoomInY,