hyperprop-charting-library 0.1.45 → 0.1.46

package/README.md

@@ -60,6 +60,18 @@ const chart = createChart(root, {
 });
 ```
 
+## Current Price Label Subtext
+
+```ts
+const chart = createChart(root, {
+  tickerLine: {
+    labelSubtext: "MNQ"
+    // or:
+    // showCountdownInLabel: true
+  }
+});
+```
+
 ## Candle Color Behavior
 
 You can control how up/down candle color is decided:

package/dist/hyperprop-charting-library.cjs

@@ -201,6 +201,10 @@ var DEFAULT_OPTIONS = {
     style: "dotted",
     thickness: 1,
     labelTextColor: "#0b1220",
+    labelSubtext: "",
+    labelSubtextColor: "#0b1220",
+    labelSubtextFontSize: 0,
+    showCountdownInLabel: false,
     labelBorderRadius: 3
   },
   labels: DEFAULT_LABELS_OPTIONS,
@@ -2103,6 +2107,16 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     };
+    const getCountdownText = () => {
+      const last = data[data.length - 1];
+      if (!last) {
+        return null;
+      }
+      const stepMs = getTimeStepMs();
+      const rawRemainingMs = last.time.getTime() + stepMs - Date.now();
+      const countdownMs = rawRemainingMs >= 0 && rawRemainingMs <= stepMs * 2 ? rawRemainingMs : stepMs - Date.now() % stepMs;
+      return formatDuration(countdownMs);
+    };
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
     let tickerPrice = null;
@@ -2127,8 +2141,12 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      const tickerSubtext = ticker.showCountdownInLabel ? getCountdownText() : ticker.labelSubtext?.trim();
       addPriceAxisLabel({
         text: formatPrice(tickerPrice),
+        ...tickerSubtext ? { subtext: tickerSubtext } : {},
+        subtextColor: ticker.labelSubtextColor ?? ticker.labelTextColor ?? "#0b1220",
+        ...ticker.labelSubtextFontSize === void 0 ? {} : { subtextFontSize: ticker.labelSubtextFontSize },
         price: tickerPrice,
         backgroundColor: ticker.labelBackgroundColor ?? tickerColor,
         textColor: ticker.labelTextColor ?? "#0b1220",
@@ -2207,28 +2225,43 @@ function createChart(element, options = {}) {
     }
     if (priceAxisLabels.length > 0) {
       const labelPaddingX = Math.max(4, labels.labelPaddingX);
-      const labelHeight = Math.max(14, labels.labelHeight);
+      const baseLabelHeight = Math.max(14, labels.labelHeight);
       const labelRadius = Math.max(0, labels.borderRadius);
-      ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+      const priceLabelFontSize = Math.max(8, axis.fontSize);
+      ctx.font = `${priceLabelFontSize}px ${mergedOptions.fontFamily}`;
       const positionedLabels = priceAxisLabels.map((label) => {
-        const labelTextWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        const subtext = label.subtext?.trim();
+        const subtextFontSize = label.subtextFontSize !== void 0 && label.subtextFontSize > 0 ? Math.max(8, Math.round(label.subtextFontSize)) : priceLabelFontSize;
+        const labelHeight = baseLabelHeight + (subtext ? subtextFontSize + 5 : 0);
+        const primaryWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        let subtextWidth = 0;
+        if (subtext) {
+          const baseFont = ctx.font;
+          ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
+          subtextWidth = Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2;
+          ctx.font = baseFont;
+        }
+        const labelTextWidth = Math.max(primaryWidth, subtextWidth);
         return {
           ...label,
+          subtext,
+          subtextFontSize,
+          height: labelHeight,
           width: labelTextWidth,
           targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
           y: 0
         };
       }).sort((a, b) => a.targetY - b.targetY || b.priority - a.priority);
       const minY = chartTop;
-      const maxY = chartBottom - labelHeight;
       let cursorY = minY;
       for (const label of positionedLabels) {
+        const maxY = chartBottom - label.height;
         label.y = labels.noOverlapping ? Math.max(clamp(label.targetY, minY, maxY), cursorY) : clamp(label.targetY, minY, maxY);
-        cursorY = label.y + labelHeight + 2;
+        cursorY = label.y + label.height + 2;
       }
       if (labels.noOverlapping && positionedLabels.length > 0) {
         const lastLabel = positionedLabels[positionedLabels.length - 1];
-        const overflow = lastLabel ? lastLabel.y + labelHeight - maxY : 0;
+        const overflow = lastLabel ? lastLabel.y + lastLabel.height - chartBottom : 0;
         if (overflow > 0) {
           for (const label of positionedLabels) {
             label.y = Math.max(minY, label.y - overflow);
@@ -2238,8 +2271,22 @@ function createChart(element, options = {}) {
       const labelX = chartRight + 4;
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;
-        fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, labelHeight, labelRadius);
-        drawText(label.text, labelX + labelPaddingX, label.y + labelHeight / 2, "left", "middle", label.textColor);
+        fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, label.height, labelRadius);
+        const primaryY = label.subtext ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        if (label.subtext) {
+          const baseFont = ctx.font;
+          ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
+          drawText(
+            label.subtext,
+            labelX + labelPaddingX,
+            label.y + baseLabelHeight + label.subtextFontSize / 2,
+            "left",
+            "middle",
+            label.subtextColor ?? label.textColor
+          );
+          ctx.font = baseFont;
+        }
       }
     }
     for (const priceLine of priceLines) {

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

@@ -260,6 +260,10 @@ interface TickerLineOptions {
     color?: string;
     labelBackgroundColor?: string;
     labelTextColor?: string;
+    labelSubtext?: string;
+    labelSubtextColor?: string;
+    labelSubtextFontSize?: number;
+    showCountdownInLabel?: boolean;
     labelBorderRadius?: number;
     smoothing?: boolean;
     smoothingSpeed?: number;

package/dist/hyperprop-charting-library.js

@@ -177,6 +177,10 @@ var DEFAULT_OPTIONS = {
     style: "dotted",
     thickness: 1,
     labelTextColor: "#0b1220",
+    labelSubtext: "",
+    labelSubtextColor: "#0b1220",
+    labelSubtextFontSize: 0,
+    showCountdownInLabel: false,
     labelBorderRadius: 3
   },
   labels: DEFAULT_LABELS_OPTIONS,
@@ -2079,6 +2083,16 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     };
+    const getCountdownText = () => {
+      const last = data[data.length - 1];
+      if (!last) {
+        return null;
+      }
+      const stepMs = getTimeStepMs();
+      const rawRemainingMs = last.time.getTime() + stepMs - Date.now();
+      const countdownMs = rawRemainingMs >= 0 && rawRemainingMs <= stepMs * 2 ? rawRemainingMs : stepMs - Date.now() % stepMs;
+      return formatDuration(countdownMs);
+    };
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
     let tickerPrice = null;
@@ -2103,8 +2117,12 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      const tickerSubtext = ticker.showCountdownInLabel ? getCountdownText() : ticker.labelSubtext?.trim();
       addPriceAxisLabel({
         text: formatPrice(tickerPrice),
+        ...tickerSubtext ? { subtext: tickerSubtext } : {},
+        subtextColor: ticker.labelSubtextColor ?? ticker.labelTextColor ?? "#0b1220",
+        ...ticker.labelSubtextFontSize === void 0 ? {} : { subtextFontSize: ticker.labelSubtextFontSize },
         price: tickerPrice,
         backgroundColor: ticker.labelBackgroundColor ?? tickerColor,
         textColor: ticker.labelTextColor ?? "#0b1220",
@@ -2183,28 +2201,43 @@ function createChart(element, options = {}) {
     }
     if (priceAxisLabels.length > 0) {
       const labelPaddingX = Math.max(4, labels.labelPaddingX);
-      const labelHeight = Math.max(14, labels.labelHeight);
+      const baseLabelHeight = Math.max(14, labels.labelHeight);
       const labelRadius = Math.max(0, labels.borderRadius);
-      ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+      const priceLabelFontSize = Math.max(8, axis.fontSize);
+      ctx.font = `${priceLabelFontSize}px ${mergedOptions.fontFamily}`;
       const positionedLabels = priceAxisLabels.map((label) => {
-        const labelTextWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        const subtext = label.subtext?.trim();
+        const subtextFontSize = label.subtextFontSize !== void 0 && label.subtextFontSize > 0 ? Math.max(8, Math.round(label.subtextFontSize)) : priceLabelFontSize;
+        const labelHeight = baseLabelHeight + (subtext ? subtextFontSize + 5 : 0);
+        const primaryWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        let subtextWidth = 0;
+        if (subtext) {
+          const baseFont = ctx.font;
+          ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
+          subtextWidth = Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2;
+          ctx.font = baseFont;
+        }
+        const labelTextWidth = Math.max(primaryWidth, subtextWidth);
         return {
           ...label,
+          subtext,
+          subtextFontSize,
+          height: labelHeight,
           width: labelTextWidth,
           targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
           y: 0
         };
       }).sort((a, b) => a.targetY - b.targetY || b.priority - a.priority);
       const minY = chartTop;
-      const maxY = chartBottom - labelHeight;
       let cursorY = minY;
       for (const label of positionedLabels) {
+        const maxY = chartBottom - label.height;
         label.y = labels.noOverlapping ? Math.max(clamp(label.targetY, minY, maxY), cursorY) : clamp(label.targetY, minY, maxY);
-        cursorY = label.y + labelHeight + 2;
+        cursorY = label.y + label.height + 2;
       }
       if (labels.noOverlapping && positionedLabels.length > 0) {
         const lastLabel = positionedLabels[positionedLabels.length - 1];
-        const overflow = lastLabel ? lastLabel.y + labelHeight - maxY : 0;
+        const overflow = lastLabel ? lastLabel.y + lastLabel.height - chartBottom : 0;
         if (overflow > 0) {
           for (const label of positionedLabels) {
             label.y = Math.max(minY, label.y - overflow);
@@ -2214,8 +2247,22 @@ function createChart(element, options = {}) {
       const labelX = chartRight + 4;
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;
-        fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, labelHeight, labelRadius);
-        drawText(label.text, labelX + labelPaddingX, label.y + labelHeight / 2, "left", "middle", label.textColor);
+        fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, label.height, labelRadius);
+        const primaryY = label.subtext ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        if (label.subtext) {
+          const baseFont = ctx.font;
+          ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
+          drawText(
+            label.subtext,
+            labelX + labelPaddingX,
+            label.y + baseLabelHeight + label.subtextFontSize / 2,
+            "left",
+            "middle",
+            label.subtextColor ?? label.textColor
+          );
+          ctx.font = baseFont;
+        }
       }
     }
     for (const priceLine of priceLines) {

package/dist/index.cjs

@@ -201,6 +201,10 @@ var DEFAULT_OPTIONS = {
     style: "dotted",
     thickness: 1,
     labelTextColor: "#0b1220",
+    labelSubtext: "",
+    labelSubtextColor: "#0b1220",
+    labelSubtextFontSize: 0,
+    showCountdownInLabel: false,
     labelBorderRadius: 3
   },
   labels: DEFAULT_LABELS_OPTIONS,
@@ -2103,6 +2107,16 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     };
+    const getCountdownText = () => {
+      const last = data[data.length - 1];
+      if (!last) {
+        return null;
+      }
+      const stepMs = getTimeStepMs();
+      const rawRemainingMs = last.time.getTime() + stepMs - Date.now();
+      const countdownMs = rawRemainingMs >= 0 && rawRemainingMs <= stepMs * 2 ? rawRemainingMs : stepMs - Date.now() % stepMs;
+      return formatDuration(countdownMs);
+    };
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
     let tickerPrice = null;
@@ -2127,8 +2141,12 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      const tickerSubtext = ticker.showCountdownInLabel ? getCountdownText() : ticker.labelSubtext?.trim();
       addPriceAxisLabel({
         text: formatPrice(tickerPrice),
+        ...tickerSubtext ? { subtext: tickerSubtext } : {},
+        subtextColor: ticker.labelSubtextColor ?? ticker.labelTextColor ?? "#0b1220",
+        ...ticker.labelSubtextFontSize === void 0 ? {} : { subtextFontSize: ticker.labelSubtextFontSize },
         price: tickerPrice,
         backgroundColor: ticker.labelBackgroundColor ?? tickerColor,
         textColor: ticker.labelTextColor ?? "#0b1220",
@@ -2207,28 +2225,43 @@ function createChart(element, options = {}) {
     }
     if (priceAxisLabels.length > 0) {
       const labelPaddingX = Math.max(4, labels.labelPaddingX);
-      const labelHeight = Math.max(14, labels.labelHeight);
+      const baseLabelHeight = Math.max(14, labels.labelHeight);
       const labelRadius = Math.max(0, labels.borderRadius);
-      ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+      const priceLabelFontSize = Math.max(8, axis.fontSize);
+      ctx.font = `${priceLabelFontSize}px ${mergedOptions.fontFamily}`;
       const positionedLabels = priceAxisLabels.map((label) => {
-        const labelTextWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        const subtext = label.subtext?.trim();
+        const subtextFontSize = label.subtextFontSize !== void 0 && label.subtextFontSize > 0 ? Math.max(8, Math.round(label.subtextFontSize)) : priceLabelFontSize;
+        const labelHeight = baseLabelHeight + (subtext ? subtextFontSize + 5 : 0);
+        const primaryWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        let subtextWidth = 0;
+        if (subtext) {
+          const baseFont = ctx.font;
+          ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
+          subtextWidth = Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2;
+          ctx.font = baseFont;
+        }
+        const labelTextWidth = Math.max(primaryWidth, subtextWidth);
         return {
           ...label,
+          subtext,
+          subtextFontSize,
+          height: labelHeight,
           width: labelTextWidth,
           targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
           y: 0
         };
       }).sort((a, b) => a.targetY - b.targetY || b.priority - a.priority);
       const minY = chartTop;
-      const maxY = chartBottom - labelHeight;
       let cursorY = minY;
       for (const label of positionedLabels) {
+        const maxY = chartBottom - label.height;
         label.y = labels.noOverlapping ? Math.max(clamp(label.targetY, minY, maxY), cursorY) : clamp(label.targetY, minY, maxY);
-        cursorY = label.y + labelHeight + 2;
+        cursorY = label.y + label.height + 2;
       }
       if (labels.noOverlapping && positionedLabels.length > 0) {
         const lastLabel = positionedLabels[positionedLabels.length - 1];
-        const overflow = lastLabel ? lastLabel.y + labelHeight - maxY : 0;
+        const overflow = lastLabel ? lastLabel.y + lastLabel.height - chartBottom : 0;
         if (overflow > 0) {
           for (const label of positionedLabels) {
             label.y = Math.max(minY, label.y - overflow);
@@ -2238,8 +2271,22 @@ function createChart(element, options = {}) {
       const labelX = chartRight + 4;
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;
-        fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, labelHeight, labelRadius);
-        drawText(label.text, labelX + labelPaddingX, label.y + labelHeight / 2, "left", "middle", label.textColor);
+        fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, label.height, labelRadius);
+        const primaryY = label.subtext ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        if (label.subtext) {
+          const baseFont = ctx.font;
+          ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
+          drawText(
+            label.subtext,
+            labelX + labelPaddingX,
+            label.y + baseLabelHeight + label.subtextFontSize / 2,
+            "left",
+            "middle",
+            label.subtextColor ?? label.textColor
+          );
+          ctx.font = baseFont;
+        }
       }
     }
     for (const priceLine of priceLines) {

package/dist/index.d.cts

@@ -260,6 +260,10 @@ interface TickerLineOptions {
     color?: string;
     labelBackgroundColor?: string;
     labelTextColor?: string;
+    labelSubtext?: string;
+    labelSubtextColor?: string;
+    labelSubtextFontSize?: number;
+    showCountdownInLabel?: boolean;
     labelBorderRadius?: number;
     smoothing?: boolean;
     smoothingSpeed?: number;

package/dist/index.d.ts

@@ -260,6 +260,10 @@ interface TickerLineOptions {
     color?: string;
     labelBackgroundColor?: string;
     labelTextColor?: string;
+    labelSubtext?: string;
+    labelSubtextColor?: string;
+    labelSubtextFontSize?: number;
+    showCountdownInLabel?: boolean;
     labelBorderRadius?: number;
     smoothing?: boolean;
     smoothingSpeed?: number;

package/dist/index.js

@@ -177,6 +177,10 @@ var DEFAULT_OPTIONS = {
     style: "dotted",
     thickness: 1,
     labelTextColor: "#0b1220",
+    labelSubtext: "",
+    labelSubtextColor: "#0b1220",
+    labelSubtextFontSize: 0,
+    showCountdownInLabel: false,
     labelBorderRadius: 3
   },
   labels: DEFAULT_LABELS_OPTIONS,
@@ -2079,6 +2083,16 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     };
+    const getCountdownText = () => {
+      const last = data[data.length - 1];
+      if (!last) {
+        return null;
+      }
+      const stepMs = getTimeStepMs();
+      const rawRemainingMs = last.time.getTime() + stepMs - Date.now();
+      const countdownMs = rawRemainingMs >= 0 && rawRemainingMs <= stepMs * 2 ? rawRemainingMs : stepMs - Date.now() % stepMs;
+      return formatDuration(countdownMs);
+    };
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
     let tickerPrice = null;
@@ -2103,8 +2117,12 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      const tickerSubtext = ticker.showCountdownInLabel ? getCountdownText() : ticker.labelSubtext?.trim();
       addPriceAxisLabel({
         text: formatPrice(tickerPrice),
+        ...tickerSubtext ? { subtext: tickerSubtext } : {},
+        subtextColor: ticker.labelSubtextColor ?? ticker.labelTextColor ?? "#0b1220",
+        ...ticker.labelSubtextFontSize === void 0 ? {} : { subtextFontSize: ticker.labelSubtextFontSize },
         price: tickerPrice,
         backgroundColor: ticker.labelBackgroundColor ?? tickerColor,
         textColor: ticker.labelTextColor ?? "#0b1220",
@@ -2183,28 +2201,43 @@ function createChart(element, options = {}) {
     }
     if (priceAxisLabels.length > 0) {
       const labelPaddingX = Math.max(4, labels.labelPaddingX);
-      const labelHeight = Math.max(14, labels.labelHeight);
+      const baseLabelHeight = Math.max(14, labels.labelHeight);
       const labelRadius = Math.max(0, labels.borderRadius);
-      ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+      const priceLabelFontSize = Math.max(8, axis.fontSize);
+      ctx.font = `${priceLabelFontSize}px ${mergedOptions.fontFamily}`;
       const positionedLabels = priceAxisLabels.map((label) => {
-        const labelTextWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        const subtext = label.subtext?.trim();
+        const subtextFontSize = label.subtextFontSize !== void 0 && label.subtextFontSize > 0 ? Math.max(8, Math.round(label.subtextFontSize)) : priceLabelFontSize;
+        const labelHeight = baseLabelHeight + (subtext ? subtextFontSize + 5 : 0);
+        const primaryWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        let subtextWidth = 0;
+        if (subtext) {
+          const baseFont = ctx.font;
+          ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
+          subtextWidth = Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2;
+          ctx.font = baseFont;
+        }
+        const labelTextWidth = Math.max(primaryWidth, subtextWidth);
         return {
           ...label,
+          subtext,
+          subtextFontSize,
+          height: labelHeight,
           width: labelTextWidth,
           targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
           y: 0
         };
       }).sort((a, b) => a.targetY - b.targetY || b.priority - a.priority);
       const minY = chartTop;
-      const maxY = chartBottom - labelHeight;
       let cursorY = minY;
       for (const label of positionedLabels) {
+        const maxY = chartBottom - label.height;
         label.y = labels.noOverlapping ? Math.max(clamp(label.targetY, minY, maxY), cursorY) : clamp(label.targetY, minY, maxY);
-        cursorY = label.y + labelHeight + 2;
+        cursorY = label.y + label.height + 2;
       }
       if (labels.noOverlapping && positionedLabels.length > 0) {
         const lastLabel = positionedLabels[positionedLabels.length - 1];
-        const overflow = lastLabel ? lastLabel.y + labelHeight - maxY : 0;
+        const overflow = lastLabel ? lastLabel.y + lastLabel.height - chartBottom : 0;
         if (overflow > 0) {
           for (const label of positionedLabels) {
             label.y = Math.max(minY, label.y - overflow);
@@ -2214,8 +2247,22 @@ function createChart(element, options = {}) {
       const labelX = chartRight + 4;
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;
-        fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, labelHeight, labelRadius);
-        drawText(label.text, labelX + labelPaddingX, label.y + labelHeight / 2, "left", "middle", label.textColor);
+        fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, label.height, labelRadius);
+        const primaryY = label.subtext ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        if (label.subtext) {
+          const baseFont = ctx.font;
+          ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
+          drawText(
+            label.subtext,
+            labelX + labelPaddingX,
+            label.y + baseLabelHeight + label.subtextFontSize / 2,
+            "left",
+            "middle",
+            label.subtextColor ?? label.textColor
+          );
+          ctx.font = baseFont;
+        }
       }
     }
     for (const priceLine of priceLines) {

package/docs/API.md

@@ -149,6 +149,10 @@ watermark: {
 - `color` (default `#38bdf8`)
 - `labelBackgroundColor` (default `#38bdf8`)
 - `labelTextColor` (default `#0b1220`)
+- `labelSubtext` (optional second line inside the current-price label, for example `"MNQ"`)
+- `labelSubtextColor` (defaults to the label text color)
+- `labelSubtextFontSize` (default `0`, meaning use the same font size as the price)
+- `showCountdownInLabel` (default `false`; renders bar-close countdown as the second line)
 - `labelBorderRadius` (default `3`)
 
 ### `LabelsOptions`

package/package.json

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