hyperprop-charting-library 0.1.45 → 0.1.47

package/README.md

@@ -60,6 +60,19 @@ const chart = createChart(root, {
 });
 ```
 
+## Current Price Label Subtext
+
+```ts
+const chart = createChart(root, {
+  tickerLine: {
+    labelSubtexts: ["MNQ", "RTH"],
+    showCountdownInLabel: true
+  }
+});
+```
+
+The price label grows to fit all extra lines. `labelSubtext: "MNQ"` still works for the simple one-line case.
+
 ## Candle Color Behavior
 
 You can control how up/down candle color is decided:

package/dist/hyperprop-charting-library.cjs

@@ -201,6 +201,11 @@ var DEFAULT_OPTIONS = {
     style: "dotted",
     thickness: 1,
     labelTextColor: "#0b1220",
+    labelSubtext: "",
+    labelSubtexts: [],
+    labelSubtextColor: "#0b1220",
+    labelSubtextFontSize: 0,
+    showCountdownInLabel: false,
     labelBorderRadius: 3
   },
   labels: DEFAULT_LABELS_OPTIONS,
@@ -2103,6 +2108,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 +2142,16 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      const tickerSubtexts = [
+        ...ticker.labelSubtext ? [ticker.labelSubtext] : [],
+        ...ticker.labelSubtexts ?? [],
+        ...ticker.showCountdownInLabel ? [getCountdownText()] : []
+      ].map((value) => value === null || value === void 0 ? "" : String(value).trim()).filter((value) => value.length > 0);
       addPriceAxisLabel({
         text: formatPrice(tickerPrice),
+        ...tickerSubtexts.length > 0 ? { subtexts: tickerSubtexts } : {},
+        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 +2230,44 @@ 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 subtexts = (label.subtexts ?? []).map((value) => value.trim()).filter((value) => value.length > 0);
+        const subtextFontSize = label.subtextFontSize !== void 0 && label.subtextFontSize > 0 ? Math.max(8, Math.round(label.subtextFontSize)) : priceLabelFontSize;
+        const subtextLineGap = 5;
+        const labelHeight = baseLabelHeight + (subtexts.length > 0 ? subtexts.length * subtextFontSize + subtexts.length * subtextLineGap : 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 (subtexts.length > 0) {
+          const baseFont = ctx.font;
+          ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
+          subtextWidth = Math.max(...subtexts.map((subtext) => Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2));
+          ctx.font = baseFont;
+        }
+        const labelTextWidth = Math.max(primaryWidth, subtextWidth);
         return {
           ...label,
+          subtexts,
+          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 = Math.max(minY, 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 +2277,25 @@ 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 hasSubtexts = label.subtexts.length > 0;
+        const primaryY = hasSubtexts ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        if (hasSubtexts) {
+          const baseFont = ctx.font;
+          ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
+          label.subtexts.forEach((subtext, index) => {
+            drawText(
+              subtext,
+              labelX + labelPaddingX,
+              label.y + baseLabelHeight + index * (label.subtextFontSize + 5) + 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,11 @@ interface TickerLineOptions {
     color?: string;
     labelBackgroundColor?: string;
     labelTextColor?: string;
+    labelSubtext?: string;
+    labelSubtexts?: Array<string | number>;
+    labelSubtextColor?: string;
+    labelSubtextFontSize?: number;
+    showCountdownInLabel?: boolean;
     labelBorderRadius?: number;
     smoothing?: boolean;
     smoothingSpeed?: number;

package/dist/hyperprop-charting-library.js

@@ -177,6 +177,11 @@ var DEFAULT_OPTIONS = {
     style: "dotted",
     thickness: 1,
     labelTextColor: "#0b1220",
+    labelSubtext: "",
+    labelSubtexts: [],
+    labelSubtextColor: "#0b1220",
+    labelSubtextFontSize: 0,
+    showCountdownInLabel: false,
     labelBorderRadius: 3
   },
   labels: DEFAULT_LABELS_OPTIONS,
@@ -2079,6 +2084,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 +2118,16 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      const tickerSubtexts = [
+        ...ticker.labelSubtext ? [ticker.labelSubtext] : [],
+        ...ticker.labelSubtexts ?? [],
+        ...ticker.showCountdownInLabel ? [getCountdownText()] : []
+      ].map((value) => value === null || value === void 0 ? "" : String(value).trim()).filter((value) => value.length > 0);
       addPriceAxisLabel({
         text: formatPrice(tickerPrice),
+        ...tickerSubtexts.length > 0 ? { subtexts: tickerSubtexts } : {},
+        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 +2206,44 @@ 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 subtexts = (label.subtexts ?? []).map((value) => value.trim()).filter((value) => value.length > 0);
+        const subtextFontSize = label.subtextFontSize !== void 0 && label.subtextFontSize > 0 ? Math.max(8, Math.round(label.subtextFontSize)) : priceLabelFontSize;
+        const subtextLineGap = 5;
+        const labelHeight = baseLabelHeight + (subtexts.length > 0 ? subtexts.length * subtextFontSize + subtexts.length * subtextLineGap : 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 (subtexts.length > 0) {
+          const baseFont = ctx.font;
+          ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
+          subtextWidth = Math.max(...subtexts.map((subtext) => Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2));
+          ctx.font = baseFont;
+        }
+        const labelTextWidth = Math.max(primaryWidth, subtextWidth);
         return {
           ...label,
+          subtexts,
+          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 = Math.max(minY, 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 +2253,25 @@ 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 hasSubtexts = label.subtexts.length > 0;
+        const primaryY = hasSubtexts ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        if (hasSubtexts) {
+          const baseFont = ctx.font;
+          ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
+          label.subtexts.forEach((subtext, index) => {
+            drawText(
+              subtext,
+              labelX + labelPaddingX,
+              label.y + baseLabelHeight + index * (label.subtextFontSize + 5) + label.subtextFontSize / 2,
+              "left",
+              "middle",
+              label.subtextColor ?? label.textColor
+            );
+          });
+          ctx.font = baseFont;
+        }
       }
     }
     for (const priceLine of priceLines) {

package/dist/index.cjs

@@ -201,6 +201,11 @@ var DEFAULT_OPTIONS = {
     style: "dotted",
     thickness: 1,
     labelTextColor: "#0b1220",
+    labelSubtext: "",
+    labelSubtexts: [],
+    labelSubtextColor: "#0b1220",
+    labelSubtextFontSize: 0,
+    showCountdownInLabel: false,
     labelBorderRadius: 3
   },
   labels: DEFAULT_LABELS_OPTIONS,
@@ -2103,6 +2108,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 +2142,16 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      const tickerSubtexts = [
+        ...ticker.labelSubtext ? [ticker.labelSubtext] : [],
+        ...ticker.labelSubtexts ?? [],
+        ...ticker.showCountdownInLabel ? [getCountdownText()] : []
+      ].map((value) => value === null || value === void 0 ? "" : String(value).trim()).filter((value) => value.length > 0);
       addPriceAxisLabel({
         text: formatPrice(tickerPrice),
+        ...tickerSubtexts.length > 0 ? { subtexts: tickerSubtexts } : {},
+        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 +2230,44 @@ 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 subtexts = (label.subtexts ?? []).map((value) => value.trim()).filter((value) => value.length > 0);
+        const subtextFontSize = label.subtextFontSize !== void 0 && label.subtextFontSize > 0 ? Math.max(8, Math.round(label.subtextFontSize)) : priceLabelFontSize;
+        const subtextLineGap = 5;
+        const labelHeight = baseLabelHeight + (subtexts.length > 0 ? subtexts.length * subtextFontSize + subtexts.length * subtextLineGap : 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 (subtexts.length > 0) {
+          const baseFont = ctx.font;
+          ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
+          subtextWidth = Math.max(...subtexts.map((subtext) => Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2));
+          ctx.font = baseFont;
+        }
+        const labelTextWidth = Math.max(primaryWidth, subtextWidth);
         return {
           ...label,
+          subtexts,
+          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 = Math.max(minY, 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 +2277,25 @@ 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 hasSubtexts = label.subtexts.length > 0;
+        const primaryY = hasSubtexts ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        if (hasSubtexts) {
+          const baseFont = ctx.font;
+          ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
+          label.subtexts.forEach((subtext, index) => {
+            drawText(
+              subtext,
+              labelX + labelPaddingX,
+              label.y + baseLabelHeight + index * (label.subtextFontSize + 5) + 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,11 @@ interface TickerLineOptions {
     color?: string;
     labelBackgroundColor?: string;
     labelTextColor?: string;
+    labelSubtext?: string;
+    labelSubtexts?: Array<string | number>;
+    labelSubtextColor?: string;
+    labelSubtextFontSize?: number;
+    showCountdownInLabel?: boolean;
     labelBorderRadius?: number;
     smoothing?: boolean;
     smoothingSpeed?: number;

package/dist/index.d.ts

@@ -260,6 +260,11 @@ interface TickerLineOptions {
     color?: string;
     labelBackgroundColor?: string;
     labelTextColor?: string;
+    labelSubtext?: string;
+    labelSubtexts?: Array<string | number>;
+    labelSubtextColor?: string;
+    labelSubtextFontSize?: number;
+    showCountdownInLabel?: boolean;
     labelBorderRadius?: number;
     smoothing?: boolean;
     smoothingSpeed?: number;

package/dist/index.js

@@ -177,6 +177,11 @@ var DEFAULT_OPTIONS = {
     style: "dotted",
     thickness: 1,
     labelTextColor: "#0b1220",
+    labelSubtext: "",
+    labelSubtexts: [],
+    labelSubtextColor: "#0b1220",
+    labelSubtextFontSize: 0,
+    showCountdownInLabel: false,
     labelBorderRadius: 3
   },
   labels: DEFAULT_LABELS_OPTIONS,
@@ -2079,6 +2084,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 +2118,16 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      const tickerSubtexts = [
+        ...ticker.labelSubtext ? [ticker.labelSubtext] : [],
+        ...ticker.labelSubtexts ?? [],
+        ...ticker.showCountdownInLabel ? [getCountdownText()] : []
+      ].map((value) => value === null || value === void 0 ? "" : String(value).trim()).filter((value) => value.length > 0);
       addPriceAxisLabel({
         text: formatPrice(tickerPrice),
+        ...tickerSubtexts.length > 0 ? { subtexts: tickerSubtexts } : {},
+        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 +2206,44 @@ 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 subtexts = (label.subtexts ?? []).map((value) => value.trim()).filter((value) => value.length > 0);
+        const subtextFontSize = label.subtextFontSize !== void 0 && label.subtextFontSize > 0 ? Math.max(8, Math.round(label.subtextFontSize)) : priceLabelFontSize;
+        const subtextLineGap = 5;
+        const labelHeight = baseLabelHeight + (subtexts.length > 0 ? subtexts.length * subtextFontSize + subtexts.length * subtextLineGap : 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 (subtexts.length > 0) {
+          const baseFont = ctx.font;
+          ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
+          subtextWidth = Math.max(...subtexts.map((subtext) => Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2));
+          ctx.font = baseFont;
+        }
+        const labelTextWidth = Math.max(primaryWidth, subtextWidth);
         return {
           ...label,
+          subtexts,
+          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 = Math.max(minY, 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 +2253,25 @@ 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 hasSubtexts = label.subtexts.length > 0;
+        const primaryY = hasSubtexts ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        if (hasSubtexts) {
+          const baseFont = ctx.font;
+          ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
+          label.subtexts.forEach((subtext, index) => {
+            drawText(
+              subtext,
+              labelX + labelPaddingX,
+              label.y + baseLabelHeight + index * (label.subtextFontSize + 5) + label.subtextFontSize / 2,
+              "left",
+              "middle",
+              label.subtextColor ?? label.textColor
+            );
+          });
+          ctx.font = baseFont;
+        }
       }
     }
     for (const priceLine of priceLines) {

package/docs/API.md

@@ -149,6 +149,11 @@ watermark: {
 - `color` (default `#38bdf8`)
 - `labelBackgroundColor` (default `#38bdf8`)
 - `labelTextColor` (default `#0b1220`)
+- `labelSubtext` (optional single extra line inside the current-price label, for example `"MNQ"`)
+- `labelSubtexts` (optional array of extra lines inside the current-price label, for example `["MNQ", "RTH"]`)
+- `labelSubtextColor` (defaults to the label text color)
+- `labelSubtextFontSize` (default `0`, meaning each extra line uses the same font size as the price)
+- `showCountdownInLabel` (default `false`; appends bar-close countdown as another extra line)
 - `labelBorderRadius` (default `3`)
 
 ### `LabelsOptions`

package/package.json

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