hyperprop-charting-library 0.1.156 → 0.1.158

package/dist/hyperprop-charting-library.cjs

@@ -5439,6 +5439,32 @@ function createChart(element, options = {}) {
     ctx.fill();
     ctx.restore();
   };
+  const drawTrashGlyph = (x, y, size, color) => {
+    const w = size * 0.8;
+    const h = size * 0.9;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(x - w / 2, y - h * 0.28);
+    ctx.lineTo(x + w / 2, y - h * 0.28);
+    ctx.moveTo(x - w * 0.22, y - h * 0.28);
+    ctx.lineTo(x - w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.28);
+    ctx.moveTo(x - w * 0.36, y - h * 0.28);
+    ctx.lineTo(x - w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.36, y - h * 0.28);
+    ctx.moveTo(x - w * 0.1, y - h * 0.08);
+    ctx.lineTo(x - w * 0.1, y + h * 0.3);
+    ctx.moveTo(x + w * 0.1, y - h * 0.08);
+    ctx.lineTo(x + w * 0.1, y + h * 0.3);
+    ctx.stroke();
+    ctx.restore();
+  };
   const drawAlertLine = (alert, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const lineY = getLineY(alert.price, yFromPrice, chartTop, chartBottom, false);
     if (lineY === null) return;
@@ -5457,13 +5483,11 @@ function createChart(element, options = {}) {
     ctx.restore();
     const fontSize = Math.max(8, axis.fontSize);
     ctx.font = `${fontSize}px ${mergedOptions.fontFamily}`;
-    const text = alert.label ? `${formatPrice(alert.price)} ${alert.label}` : formatPrice(alert.price);
     const paddingX = 6;
     const bellWidth = fontSize + 2;
     const labelHeight = 20;
     const hovered = hoveredAlertId === alert.id;
-    const removeWidth = hovered ? labelHeight : 0;
-    const contentWidth = Math.ceil(measureTextWidth(text)) + bellWidth + paddingX * 3 + removeWidth;
+    const contentWidth = bellWidth + paddingX * 2;
     const labelWidth = getRightAxisLabelWidth(chartRight, contentWidth);
     const labelX = getRightAxisLabelX(chartRight);
     const labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
@@ -5473,29 +5497,26 @@ function createChart(element, options = {}) {
     fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, 3);
     const inkColor = labelTextColorOn(color, "#101114");
     drawBellGlyph(labelX + paddingX + bellWidth / 2, labelY + labelHeight / 2, fontSize, inkColor);
-    drawText(text, labelX + paddingX * 2 + bellWidth, labelY + labelHeight / 2, "left", "middle", inkColor);
+    ctx.restore();
     if (hovered) {
-      const removeX = labelX + labelWidth - removeWidth;
-      ctx.strokeStyle = inkColor;
-      ctx.lineWidth = 1.4;
-      const inset = 6;
-      ctx.beginPath();
-      ctx.moveTo(removeX + inset, labelY + inset);
-      ctx.lineTo(removeX + removeWidth - inset, labelY + labelHeight - inset);
-      ctx.moveTo(removeX + removeWidth - inset, labelY + inset);
-      ctx.lineTo(removeX + inset, labelY + labelHeight - inset);
-      ctx.stroke();
+      const buttonSize = labelHeight;
+      const buttonX = chartLeft + 10;
+      const buttonY = lineY - buttonSize / 2;
+      ctx.save();
+      ctx.fillStyle = color;
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, 3);
+      drawTrashGlyph(buttonX + buttonSize / 2, lineY, fontSize, inkColor);
+      ctx.restore();
       alertRegions.push({
         id: alert.id,
-        x: removeX,
-        y: labelY,
-        width: removeWidth,
-        height: labelHeight,
+        x: buttonX,
+        y: buttonY,
+        width: buttonSize,
+        height: buttonSize,
         part: "remove"
       });
     }
-    ctx.restore();
-    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth - removeWidth, height: labelHeight, part: "line" });
+    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth, height: labelHeight, part: "line" });
     alertRegions.push({ id: alert.id, x: chartLeft, y: lineY - 5, width: chartRight - chartLeft, height: 10, part: "line" });
   };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
@@ -8480,30 +8501,42 @@ function createChart(element, options = {}) {
           ctx.fill();
           cursorX += dotRadius * 2 + 6;
         }
-        const headline = [dataLine.symbol, dataLine.interval, dataLine.exchange].filter((part) => part && part.length > 0).join(" \xB7 ");
+        const headline = [
+          dataLine.symbol,
+          dataLine.description,
+          dataLine.interval,
+          dataLine.exchange,
+          dataLine.chartTypeLabel
+        ].filter((part) => part && part.length > 0).join(" \xB7 ");
         if (headline) {
           ctx.fillStyle = symbolColor;
           ctx.fillText(headline, cursorX, rowY);
-          cursorX += measureTextWidth(headline) + 10;
+          cursorX += measureTextWidth(headline) + 12;
         }
         if (dataLine.showOhlc !== false) {
-          const ohlc = `O${formatPrice(bar.o)} H${formatPrice(bar.h)} L${formatPrice(bar.l)} C${formatPrice(bar.c)}`;
-          ctx.fillStyle = changeColor;
-          ctx.fillText(ohlc, cursorX, rowY);
-          cursorX += measureTextWidth(ohlc) + 8;
+          const ohlcLabelColor = dataLine.ohlcLabelColor || textColor;
+          const pairs = [
+            ["O", formatPrice(bar.o)],
+            ["H", formatPrice(bar.h)],
+            ["L", formatPrice(bar.l)],
+            ["C", formatPrice(bar.c)]
+          ];
+          for (const [label, value] of pairs) {
+            ctx.fillStyle = ohlcLabelColor;
+            ctx.fillText(label, cursorX, rowY);
+            cursorX += measureTextWidth(label) + 2;
+            ctx.fillStyle = changeColor;
+            ctx.fillText(value, cursorX, rowY);
+            cursorX += measureTextWidth(value) + 9;
+          }
+          cursorX += 3;
         }
         if (dataLine.showChange !== false) {
           const pct = bar.o !== 0 ? changeAbs / bar.o * 100 : 0;
           const changeText = `${changeAbs >= 0 ? "+" : ""}${formatPrice(changeAbs)} (${changeAbs >= 0 ? "+" : ""}${pct.toFixed(2)}%)`;
           ctx.fillStyle = changeColor;
           ctx.fillText(changeText, cursorX, rowY);
-          cursorX += measureTextWidth(changeText) + 10;
-        }
-        if (dataLine.showVolume && bar.v !== void 0) {
-          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
-          ctx.fillStyle = textColor;
-          ctx.fillText(volumeText, cursorX, rowY);
-          cursorX += measureTextWidth(volumeText) + 10;
+          cursorX += measureTextWidth(changeText) + 12;
         }
         for (const detail of dataLine.details ?? []) {
           const text = detail.label ? `${detail.label} ${detail.value}` : detail.value;
@@ -8517,7 +8550,14 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 6;
+        let lastRowY = rowY;
+        if (dataLine.showVolume && bar.v !== void 0) {
+          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
+          lastRowY = rowY + fontSize + 4;
+          ctx.fillStyle = textColor;
+          ctx.fillText(volumeText, chartLeft + legendInsetX, lastRowY);
+        }
+        dataLineBottom = lastRowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }

package/dist/hyperprop-charting-library.d.ts

@@ -697,15 +697,26 @@ interface DataLineOptions {
     visible?: boolean;
     /** e.g. "NQU6" — drawn first, in the emphasis color. */
     symbol?: string;
+    /**
+     * Long instrument name, e.g. "NASDAQ 100 E-mini Futures". Drawn after the
+     * symbol in the emphasis color, the way other charting platforms label a
+     * pane. Omit to keep the headline to the code alone.
+     */
+    description?: string;
     /** e.g. "1h". */
     interval?: string;
     /** e.g. "CME". */
     exchange?: string;
+    /**
+     * Chart style, e.g. "Candles" or "Renko [ATR(14), 1000]" — the last part of
+     * the headline, so a non-default style is never a surprise.
+     */
+    chartTypeLabel?: string;
     /** O/H/L/C values for the hovered (or latest) bar. Default true. */
     showOhlc?: boolean;
     /** Absolute and percent change of that bar, colored by direction. Default true. */
     showChange?: boolean;
-    /** Bar volume. Default false. */
+    /** Bar volume. Drawn on its own row beneath the values. Default false. */
     showVolume?: boolean;
     /**
      * Extra chips after the values — session, currency, a "Closed" badge. Each
@@ -724,6 +735,12 @@ interface DataLineOptions {
     symbolColor?: string;
     /** Everything after the symbol. Defaults to the indicator legend color. */
     textColor?: string;
+    /**
+     * Color of the O/H/L/C letters. Values stay colored by direction, so dimming
+     * the letters is what makes the numbers readable at a glance rather than one
+     * run of same-colored text. Defaults to `textColor`.
+     */
+    ohlcLabelColor?: string;
 }
 interface IndicatorUpdateOptions {
     /**

package/dist/hyperprop-charting-library.js

@@ -5400,6 +5400,32 @@ function createChart(element, options = {}) {
     ctx.fill();
     ctx.restore();
   };
+  const drawTrashGlyph = (x, y, size, color) => {
+    const w = size * 0.8;
+    const h = size * 0.9;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(x - w / 2, y - h * 0.28);
+    ctx.lineTo(x + w / 2, y - h * 0.28);
+    ctx.moveTo(x - w * 0.22, y - h * 0.28);
+    ctx.lineTo(x - w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.28);
+    ctx.moveTo(x - w * 0.36, y - h * 0.28);
+    ctx.lineTo(x - w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.36, y - h * 0.28);
+    ctx.moveTo(x - w * 0.1, y - h * 0.08);
+    ctx.lineTo(x - w * 0.1, y + h * 0.3);
+    ctx.moveTo(x + w * 0.1, y - h * 0.08);
+    ctx.lineTo(x + w * 0.1, y + h * 0.3);
+    ctx.stroke();
+    ctx.restore();
+  };
   const drawAlertLine = (alert, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const lineY = getLineY(alert.price, yFromPrice, chartTop, chartBottom, false);
     if (lineY === null) return;
@@ -5418,13 +5444,11 @@ function createChart(element, options = {}) {
     ctx.restore();
     const fontSize = Math.max(8, axis.fontSize);
     ctx.font = `${fontSize}px ${mergedOptions.fontFamily}`;
-    const text = alert.label ? `${formatPrice(alert.price)} ${alert.label}` : formatPrice(alert.price);
     const paddingX = 6;
     const bellWidth = fontSize + 2;
     const labelHeight = 20;
     const hovered = hoveredAlertId === alert.id;
-    const removeWidth = hovered ? labelHeight : 0;
-    const contentWidth = Math.ceil(measureTextWidth(text)) + bellWidth + paddingX * 3 + removeWidth;
+    const contentWidth = bellWidth + paddingX * 2;
     const labelWidth = getRightAxisLabelWidth(chartRight, contentWidth);
     const labelX = getRightAxisLabelX(chartRight);
     const labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
@@ -5434,29 +5458,26 @@ function createChart(element, options = {}) {
     fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, 3);
     const inkColor = labelTextColorOn(color, "#101114");
     drawBellGlyph(labelX + paddingX + bellWidth / 2, labelY + labelHeight / 2, fontSize, inkColor);
-    drawText(text, labelX + paddingX * 2 + bellWidth, labelY + labelHeight / 2, "left", "middle", inkColor);
+    ctx.restore();
     if (hovered) {
-      const removeX = labelX + labelWidth - removeWidth;
-      ctx.strokeStyle = inkColor;
-      ctx.lineWidth = 1.4;
-      const inset = 6;
-      ctx.beginPath();
-      ctx.moveTo(removeX + inset, labelY + inset);
-      ctx.lineTo(removeX + removeWidth - inset, labelY + labelHeight - inset);
-      ctx.moveTo(removeX + removeWidth - inset, labelY + inset);
-      ctx.lineTo(removeX + inset, labelY + labelHeight - inset);
-      ctx.stroke();
+      const buttonSize = labelHeight;
+      const buttonX = chartLeft + 10;
+      const buttonY = lineY - buttonSize / 2;
+      ctx.save();
+      ctx.fillStyle = color;
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, 3);
+      drawTrashGlyph(buttonX + buttonSize / 2, lineY, fontSize, inkColor);
+      ctx.restore();
       alertRegions.push({
         id: alert.id,
-        x: removeX,
-        y: labelY,
-        width: removeWidth,
-        height: labelHeight,
+        x: buttonX,
+        y: buttonY,
+        width: buttonSize,
+        height: buttonSize,
         part: "remove"
       });
     }
-    ctx.restore();
-    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth - removeWidth, height: labelHeight, part: "line" });
+    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth, height: labelHeight, part: "line" });
     alertRegions.push({ id: alert.id, x: chartLeft, y: lineY - 5, width: chartRight - chartLeft, height: 10, part: "line" });
   };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
@@ -8441,30 +8462,42 @@ function createChart(element, options = {}) {
           ctx.fill();
           cursorX += dotRadius * 2 + 6;
         }
-        const headline = [dataLine.symbol, dataLine.interval, dataLine.exchange].filter((part) => part && part.length > 0).join(" \xB7 ");
+        const headline = [
+          dataLine.symbol,
+          dataLine.description,
+          dataLine.interval,
+          dataLine.exchange,
+          dataLine.chartTypeLabel
+        ].filter((part) => part && part.length > 0).join(" \xB7 ");
         if (headline) {
           ctx.fillStyle = symbolColor;
           ctx.fillText(headline, cursorX, rowY);
-          cursorX += measureTextWidth(headline) + 10;
+          cursorX += measureTextWidth(headline) + 12;
         }
         if (dataLine.showOhlc !== false) {
-          const ohlc = `O${formatPrice(bar.o)} H${formatPrice(bar.h)} L${formatPrice(bar.l)} C${formatPrice(bar.c)}`;
-          ctx.fillStyle = changeColor;
-          ctx.fillText(ohlc, cursorX, rowY);
-          cursorX += measureTextWidth(ohlc) + 8;
+          const ohlcLabelColor = dataLine.ohlcLabelColor || textColor;
+          const pairs = [
+            ["O", formatPrice(bar.o)],
+            ["H", formatPrice(bar.h)],
+            ["L", formatPrice(bar.l)],
+            ["C", formatPrice(bar.c)]
+          ];
+          for (const [label, value] of pairs) {
+            ctx.fillStyle = ohlcLabelColor;
+            ctx.fillText(label, cursorX, rowY);
+            cursorX += measureTextWidth(label) + 2;
+            ctx.fillStyle = changeColor;
+            ctx.fillText(value, cursorX, rowY);
+            cursorX += measureTextWidth(value) + 9;
+          }
+          cursorX += 3;
         }
         if (dataLine.showChange !== false) {
           const pct = bar.o !== 0 ? changeAbs / bar.o * 100 : 0;
           const changeText = `${changeAbs >= 0 ? "+" : ""}${formatPrice(changeAbs)} (${changeAbs >= 0 ? "+" : ""}${pct.toFixed(2)}%)`;
           ctx.fillStyle = changeColor;
           ctx.fillText(changeText, cursorX, rowY);
-          cursorX += measureTextWidth(changeText) + 10;
-        }
-        if (dataLine.showVolume && bar.v !== void 0) {
-          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
-          ctx.fillStyle = textColor;
-          ctx.fillText(volumeText, cursorX, rowY);
-          cursorX += measureTextWidth(volumeText) + 10;
+          cursorX += measureTextWidth(changeText) + 12;
         }
         for (const detail of dataLine.details ?? []) {
           const text = detail.label ? `${detail.label} ${detail.value}` : detail.value;
@@ -8478,7 +8511,14 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 6;
+        let lastRowY = rowY;
+        if (dataLine.showVolume && bar.v !== void 0) {
+          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
+          lastRowY = rowY + fontSize + 4;
+          ctx.fillStyle = textColor;
+          ctx.fillText(volumeText, chartLeft + legendInsetX, lastRowY);
+        }
+        dataLineBottom = lastRowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }

package/dist/index.cjs

@@ -5439,6 +5439,32 @@ function createChart(element, options = {}) {
     ctx.fill();
     ctx.restore();
   };
+  const drawTrashGlyph = (x, y, size, color) => {
+    const w = size * 0.8;
+    const h = size * 0.9;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(x - w / 2, y - h * 0.28);
+    ctx.lineTo(x + w / 2, y - h * 0.28);
+    ctx.moveTo(x - w * 0.22, y - h * 0.28);
+    ctx.lineTo(x - w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.28);
+    ctx.moveTo(x - w * 0.36, y - h * 0.28);
+    ctx.lineTo(x - w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.36, y - h * 0.28);
+    ctx.moveTo(x - w * 0.1, y - h * 0.08);
+    ctx.lineTo(x - w * 0.1, y + h * 0.3);
+    ctx.moveTo(x + w * 0.1, y - h * 0.08);
+    ctx.lineTo(x + w * 0.1, y + h * 0.3);
+    ctx.stroke();
+    ctx.restore();
+  };
   const drawAlertLine = (alert, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const lineY = getLineY(alert.price, yFromPrice, chartTop, chartBottom, false);
     if (lineY === null) return;
@@ -5457,13 +5483,11 @@ function createChart(element, options = {}) {
     ctx.restore();
     const fontSize = Math.max(8, axis.fontSize);
     ctx.font = `${fontSize}px ${mergedOptions.fontFamily}`;
-    const text = alert.label ? `${formatPrice(alert.price)} ${alert.label}` : formatPrice(alert.price);
     const paddingX = 6;
     const bellWidth = fontSize + 2;
     const labelHeight = 20;
     const hovered = hoveredAlertId === alert.id;
-    const removeWidth = hovered ? labelHeight : 0;
-    const contentWidth = Math.ceil(measureTextWidth(text)) + bellWidth + paddingX * 3 + removeWidth;
+    const contentWidth = bellWidth + paddingX * 2;
     const labelWidth = getRightAxisLabelWidth(chartRight, contentWidth);
     const labelX = getRightAxisLabelX(chartRight);
     const labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
@@ -5473,29 +5497,26 @@ function createChart(element, options = {}) {
     fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, 3);
     const inkColor = labelTextColorOn(color, "#101114");
     drawBellGlyph(labelX + paddingX + bellWidth / 2, labelY + labelHeight / 2, fontSize, inkColor);
-    drawText(text, labelX + paddingX * 2 + bellWidth, labelY + labelHeight / 2, "left", "middle", inkColor);
+    ctx.restore();
     if (hovered) {
-      const removeX = labelX + labelWidth - removeWidth;
-      ctx.strokeStyle = inkColor;
-      ctx.lineWidth = 1.4;
-      const inset = 6;
-      ctx.beginPath();
-      ctx.moveTo(removeX + inset, labelY + inset);
-      ctx.lineTo(removeX + removeWidth - inset, labelY + labelHeight - inset);
-      ctx.moveTo(removeX + removeWidth - inset, labelY + inset);
-      ctx.lineTo(removeX + inset, labelY + labelHeight - inset);
-      ctx.stroke();
+      const buttonSize = labelHeight;
+      const buttonX = chartLeft + 10;
+      const buttonY = lineY - buttonSize / 2;
+      ctx.save();
+      ctx.fillStyle = color;
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, 3);
+      drawTrashGlyph(buttonX + buttonSize / 2, lineY, fontSize, inkColor);
+      ctx.restore();
       alertRegions.push({
         id: alert.id,
-        x: removeX,
-        y: labelY,
-        width: removeWidth,
-        height: labelHeight,
+        x: buttonX,
+        y: buttonY,
+        width: buttonSize,
+        height: buttonSize,
         part: "remove"
       });
     }
-    ctx.restore();
-    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth - removeWidth, height: labelHeight, part: "line" });
+    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth, height: labelHeight, part: "line" });
     alertRegions.push({ id: alert.id, x: chartLeft, y: lineY - 5, width: chartRight - chartLeft, height: 10, part: "line" });
   };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
@@ -8480,30 +8501,42 @@ function createChart(element, options = {}) {
           ctx.fill();
           cursorX += dotRadius * 2 + 6;
         }
-        const headline = [dataLine.symbol, dataLine.interval, dataLine.exchange].filter((part) => part && part.length > 0).join(" \xB7 ");
+        const headline = [
+          dataLine.symbol,
+          dataLine.description,
+          dataLine.interval,
+          dataLine.exchange,
+          dataLine.chartTypeLabel
+        ].filter((part) => part && part.length > 0).join(" \xB7 ");
         if (headline) {
           ctx.fillStyle = symbolColor;
           ctx.fillText(headline, cursorX, rowY);
-          cursorX += measureTextWidth(headline) + 10;
+          cursorX += measureTextWidth(headline) + 12;
         }
         if (dataLine.showOhlc !== false) {
-          const ohlc = `O${formatPrice(bar.o)} H${formatPrice(bar.h)} L${formatPrice(bar.l)} C${formatPrice(bar.c)}`;
-          ctx.fillStyle = changeColor;
-          ctx.fillText(ohlc, cursorX, rowY);
-          cursorX += measureTextWidth(ohlc) + 8;
+          const ohlcLabelColor = dataLine.ohlcLabelColor || textColor;
+          const pairs = [
+            ["O", formatPrice(bar.o)],
+            ["H", formatPrice(bar.h)],
+            ["L", formatPrice(bar.l)],
+            ["C", formatPrice(bar.c)]
+          ];
+          for (const [label, value] of pairs) {
+            ctx.fillStyle = ohlcLabelColor;
+            ctx.fillText(label, cursorX, rowY);
+            cursorX += measureTextWidth(label) + 2;
+            ctx.fillStyle = changeColor;
+            ctx.fillText(value, cursorX, rowY);
+            cursorX += measureTextWidth(value) + 9;
+          }
+          cursorX += 3;
         }
         if (dataLine.showChange !== false) {
           const pct = bar.o !== 0 ? changeAbs / bar.o * 100 : 0;
           const changeText = `${changeAbs >= 0 ? "+" : ""}${formatPrice(changeAbs)} (${changeAbs >= 0 ? "+" : ""}${pct.toFixed(2)}%)`;
           ctx.fillStyle = changeColor;
           ctx.fillText(changeText, cursorX, rowY);
-          cursorX += measureTextWidth(changeText) + 10;
-        }
-        if (dataLine.showVolume && bar.v !== void 0) {
-          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
-          ctx.fillStyle = textColor;
-          ctx.fillText(volumeText, cursorX, rowY);
-          cursorX += measureTextWidth(volumeText) + 10;
+          cursorX += measureTextWidth(changeText) + 12;
         }
         for (const detail of dataLine.details ?? []) {
           const text = detail.label ? `${detail.label} ${detail.value}` : detail.value;
@@ -8517,7 +8550,14 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 6;
+        let lastRowY = rowY;
+        if (dataLine.showVolume && bar.v !== void 0) {
+          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
+          lastRowY = rowY + fontSize + 4;
+          ctx.fillStyle = textColor;
+          ctx.fillText(volumeText, chartLeft + legendInsetX, lastRowY);
+        }
+        dataLineBottom = lastRowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }

package/dist/index.d.cts

@@ -697,15 +697,26 @@ interface DataLineOptions {
     visible?: boolean;
     /** e.g. "NQU6" — drawn first, in the emphasis color. */
     symbol?: string;
+    /**
+     * Long instrument name, e.g. "NASDAQ 100 E-mini Futures". Drawn after the
+     * symbol in the emphasis color, the way other charting platforms label a
+     * pane. Omit to keep the headline to the code alone.
+     */
+    description?: string;
     /** e.g. "1h". */
     interval?: string;
     /** e.g. "CME". */
     exchange?: string;
+    /**
+     * Chart style, e.g. "Candles" or "Renko [ATR(14), 1000]" — the last part of
+     * the headline, so a non-default style is never a surprise.
+     */
+    chartTypeLabel?: string;
     /** O/H/L/C values for the hovered (or latest) bar. Default true. */
     showOhlc?: boolean;
     /** Absolute and percent change of that bar, colored by direction. Default true. */
     showChange?: boolean;
-    /** Bar volume. Default false. */
+    /** Bar volume. Drawn on its own row beneath the values. Default false. */
     showVolume?: boolean;
     /**
      * Extra chips after the values — session, currency, a "Closed" badge. Each
@@ -724,6 +735,12 @@ interface DataLineOptions {
     symbolColor?: string;
     /** Everything after the symbol. Defaults to the indicator legend color. */
     textColor?: string;
+    /**
+     * Color of the O/H/L/C letters. Values stay colored by direction, so dimming
+     * the letters is what makes the numbers readable at a glance rather than one
+     * run of same-colored text. Defaults to `textColor`.
+     */
+    ohlcLabelColor?: string;
 }
 interface IndicatorUpdateOptions {
     /**

package/dist/index.d.ts

@@ -697,15 +697,26 @@ interface DataLineOptions {
     visible?: boolean;
     /** e.g. "NQU6" — drawn first, in the emphasis color. */
     symbol?: string;
+    /**
+     * Long instrument name, e.g. "NASDAQ 100 E-mini Futures". Drawn after the
+     * symbol in the emphasis color, the way other charting platforms label a
+     * pane. Omit to keep the headline to the code alone.
+     */
+    description?: string;
     /** e.g. "1h". */
     interval?: string;
     /** e.g. "CME". */
     exchange?: string;
+    /**
+     * Chart style, e.g. "Candles" or "Renko [ATR(14), 1000]" — the last part of
+     * the headline, so a non-default style is never a surprise.
+     */
+    chartTypeLabel?: string;
     /** O/H/L/C values for the hovered (or latest) bar. Default true. */
     showOhlc?: boolean;
     /** Absolute and percent change of that bar, colored by direction. Default true. */
     showChange?: boolean;
-    /** Bar volume. Default false. */
+    /** Bar volume. Drawn on its own row beneath the values. Default false. */
     showVolume?: boolean;
     /**
      * Extra chips after the values — session, currency, a "Closed" badge. Each
@@ -724,6 +735,12 @@ interface DataLineOptions {
     symbolColor?: string;
     /** Everything after the symbol. Defaults to the indicator legend color. */
     textColor?: string;
+    /**
+     * Color of the O/H/L/C letters. Values stay colored by direction, so dimming
+     * the letters is what makes the numbers readable at a glance rather than one
+     * run of same-colored text. Defaults to `textColor`.
+     */
+    ohlcLabelColor?: string;
 }
 interface IndicatorUpdateOptions {
     /**

package/dist/index.js

@@ -5400,6 +5400,32 @@ function createChart(element, options = {}) {
     ctx.fill();
     ctx.restore();
   };
+  const drawTrashGlyph = (x, y, size, color) => {
+    const w = size * 0.8;
+    const h = size * 0.9;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(x - w / 2, y - h * 0.28);
+    ctx.lineTo(x + w / 2, y - h * 0.28);
+    ctx.moveTo(x - w * 0.22, y - h * 0.28);
+    ctx.lineTo(x - w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.28);
+    ctx.moveTo(x - w * 0.36, y - h * 0.28);
+    ctx.lineTo(x - w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.36, y - h * 0.28);
+    ctx.moveTo(x - w * 0.1, y - h * 0.08);
+    ctx.lineTo(x - w * 0.1, y + h * 0.3);
+    ctx.moveTo(x + w * 0.1, y - h * 0.08);
+    ctx.lineTo(x + w * 0.1, y + h * 0.3);
+    ctx.stroke();
+    ctx.restore();
+  };
   const drawAlertLine = (alert, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const lineY = getLineY(alert.price, yFromPrice, chartTop, chartBottom, false);
     if (lineY === null) return;
@@ -5418,13 +5444,11 @@ function createChart(element, options = {}) {
     ctx.restore();
     const fontSize = Math.max(8, axis.fontSize);
     ctx.font = `${fontSize}px ${mergedOptions.fontFamily}`;
-    const text = alert.label ? `${formatPrice(alert.price)} ${alert.label}` : formatPrice(alert.price);
     const paddingX = 6;
     const bellWidth = fontSize + 2;
     const labelHeight = 20;
     const hovered = hoveredAlertId === alert.id;
-    const removeWidth = hovered ? labelHeight : 0;
-    const contentWidth = Math.ceil(measureTextWidth(text)) + bellWidth + paddingX * 3 + removeWidth;
+    const contentWidth = bellWidth + paddingX * 2;
     const labelWidth = getRightAxisLabelWidth(chartRight, contentWidth);
     const labelX = getRightAxisLabelX(chartRight);
     const labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
@@ -5434,29 +5458,26 @@ function createChart(element, options = {}) {
     fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, 3);
     const inkColor = labelTextColorOn(color, "#101114");
     drawBellGlyph(labelX + paddingX + bellWidth / 2, labelY + labelHeight / 2, fontSize, inkColor);
-    drawText(text, labelX + paddingX * 2 + bellWidth, labelY + labelHeight / 2, "left", "middle", inkColor);
+    ctx.restore();
     if (hovered) {
-      const removeX = labelX + labelWidth - removeWidth;
-      ctx.strokeStyle = inkColor;
-      ctx.lineWidth = 1.4;
-      const inset = 6;
-      ctx.beginPath();
-      ctx.moveTo(removeX + inset, labelY + inset);
-      ctx.lineTo(removeX + removeWidth - inset, labelY + labelHeight - inset);
-      ctx.moveTo(removeX + removeWidth - inset, labelY + inset);
-      ctx.lineTo(removeX + inset, labelY + labelHeight - inset);
-      ctx.stroke();
+      const buttonSize = labelHeight;
+      const buttonX = chartLeft + 10;
+      const buttonY = lineY - buttonSize / 2;
+      ctx.save();
+      ctx.fillStyle = color;
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, 3);
+      drawTrashGlyph(buttonX + buttonSize / 2, lineY, fontSize, inkColor);
+      ctx.restore();
       alertRegions.push({
         id: alert.id,
-        x: removeX,
-        y: labelY,
-        width: removeWidth,
-        height: labelHeight,
+        x: buttonX,
+        y: buttonY,
+        width: buttonSize,
+        height: buttonSize,
         part: "remove"
       });
     }
-    ctx.restore();
-    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth - removeWidth, height: labelHeight, part: "line" });
+    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth, height: labelHeight, part: "line" });
     alertRegions.push({ id: alert.id, x: chartLeft, y: lineY - 5, width: chartRight - chartLeft, height: 10, part: "line" });
   };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
@@ -8441,30 +8462,42 @@ function createChart(element, options = {}) {
           ctx.fill();
           cursorX += dotRadius * 2 + 6;
         }
-        const headline = [dataLine.symbol, dataLine.interval, dataLine.exchange].filter((part) => part && part.length > 0).join(" \xB7 ");
+        const headline = [
+          dataLine.symbol,
+          dataLine.description,
+          dataLine.interval,
+          dataLine.exchange,
+          dataLine.chartTypeLabel
+        ].filter((part) => part && part.length > 0).join(" \xB7 ");
         if (headline) {
           ctx.fillStyle = symbolColor;
           ctx.fillText(headline, cursorX, rowY);
-          cursorX += measureTextWidth(headline) + 10;
+          cursorX += measureTextWidth(headline) + 12;
         }
         if (dataLine.showOhlc !== false) {
-          const ohlc = `O${formatPrice(bar.o)} H${formatPrice(bar.h)} L${formatPrice(bar.l)} C${formatPrice(bar.c)}`;
-          ctx.fillStyle = changeColor;
-          ctx.fillText(ohlc, cursorX, rowY);
-          cursorX += measureTextWidth(ohlc) + 8;
+          const ohlcLabelColor = dataLine.ohlcLabelColor || textColor;
+          const pairs = [
+            ["O", formatPrice(bar.o)],
+            ["H", formatPrice(bar.h)],
+            ["L", formatPrice(bar.l)],
+            ["C", formatPrice(bar.c)]
+          ];
+          for (const [label, value] of pairs) {
+            ctx.fillStyle = ohlcLabelColor;
+            ctx.fillText(label, cursorX, rowY);
+            cursorX += measureTextWidth(label) + 2;
+            ctx.fillStyle = changeColor;
+            ctx.fillText(value, cursorX, rowY);
+            cursorX += measureTextWidth(value) + 9;
+          }
+          cursorX += 3;
         }
         if (dataLine.showChange !== false) {
           const pct = bar.o !== 0 ? changeAbs / bar.o * 100 : 0;
           const changeText = `${changeAbs >= 0 ? "+" : ""}${formatPrice(changeAbs)} (${changeAbs >= 0 ? "+" : ""}${pct.toFixed(2)}%)`;
           ctx.fillStyle = changeColor;
           ctx.fillText(changeText, cursorX, rowY);
-          cursorX += measureTextWidth(changeText) + 10;
-        }
-        if (dataLine.showVolume && bar.v !== void 0) {
-          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
-          ctx.fillStyle = textColor;
-          ctx.fillText(volumeText, cursorX, rowY);
-          cursorX += measureTextWidth(volumeText) + 10;
+          cursorX += measureTextWidth(changeText) + 12;
         }
         for (const detail of dataLine.details ?? []) {
           const text = detail.label ? `${detail.label} ${detail.value}` : detail.value;
@@ -8478,7 +8511,14 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 6;
+        let lastRowY = rowY;
+        if (dataLine.showVolume && bar.v !== void 0) {
+          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
+          lastRowY = rowY + fontSize + 4;
+          ctx.fillStyle = textColor;
+          ctx.fillText(volumeText, chartLeft + legendInsetX, lastRowY);
+        }
+        dataLineBottom = lastRowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }

package/package.json

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