hyperprop-charting-library 0.1.46 → 0.1.48

package/README.md

@@ -65,13 +65,14 @@ const chart = createChart(root, {
 ```ts
 const chart = createChart(root, {
   tickerLine: {
-    labelSubtext: "MNQ"
-    // or:
-    // showCountdownInLabel: true
+    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

@@ -202,6 +202,7 @@ var DEFAULT_OPTIONS = {
     thickness: 1,
     labelTextColor: "#0b1220",
     labelSubtext: "",
+    labelSubtexts: [],
     labelSubtextColor: "#0b1220",
     labelSubtextFontSize: 0,
     showCountdownInLabel: false,
@@ -2141,10 +2142,14 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
-      const tickerSubtext = ticker.showCountdownInLabel ? getCountdownText() : ticker.labelSubtext?.trim();
+      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),
-        ...tickerSubtext ? { subtext: tickerSubtext } : {},
+        ...tickerSubtexts.length > 0 ? { subtexts: tickerSubtexts } : {},
         subtextColor: ticker.labelSubtextColor ?? ticker.labelTextColor ?? "#0b1220",
         ...ticker.labelSubtextFontSize === void 0 ? {} : { subtextFontSize: ticker.labelSubtextFontSize },
         price: tickerPrice,
@@ -2230,21 +2235,22 @@ function createChart(element, options = {}) {
       const priceLabelFontSize = Math.max(8, axis.fontSize);
       ctx.font = `${priceLabelFontSize}px ${mergedOptions.fontFamily}`;
       const positionedLabels = priceAxisLabels.map((label) => {
-        const subtext = label.subtext?.trim();
+        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 labelHeight = baseLabelHeight + (subtext ? subtextFontSize + 5 : 0);
+        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 (subtext) {
+        if (subtexts.length > 0) {
           const baseFont = ctx.font;
           ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
-          subtextWidth = Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2;
+          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,
-          subtext,
+          subtexts,
           subtextFontSize,
           height: labelHeight,
           width: labelTextWidth,
@@ -2255,7 +2261,7 @@ function createChart(element, options = {}) {
       const minY = chartTop;
       let cursorY = minY;
       for (const label of positionedLabels) {
-        const maxY = chartBottom - label.height;
+        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 + label.height + 2;
       }
@@ -2272,19 +2278,22 @@ function createChart(element, options = {}) {
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;
         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;
+        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 (label.subtext) {
+        if (hasSubtexts) {
           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
-          );
+          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;
         }
       }
@@ -2502,6 +2511,16 @@ function createChart(element, options = {}) {
     emitViewportChange();
     draw();
   };
+  const zoomXFromAxis = (factor) => {
+    if (!drawState) {
+      return;
+    }
+    if (followLatest) {
+      zoomXToLatest(factor);
+      return;
+    }
+    zoomX(factor, drawState.chartLeft + drawState.chartWidth / 2);
+  };
   const zoomY = (factor, anchorY) => {
     if (!drawState || data.length === 0) {
       return;
@@ -3025,7 +3044,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
     } else if (dragMode === "x-axis") {
       canvas.style.cursor = "ew-resize";
-      zoomXToLatest(Math.exp(deltaX * 6e-3));
+      zoomXFromAxis(Math.exp(deltaX * 6e-3));
       setCrosshairPoint(null);
     } else if (dragMode === "y-axis") {
       canvas.style.cursor = "ns-resize";
@@ -3136,7 +3155,7 @@ function createChart(element, options = {}) {
       return;
     }
     if (region === "x-axis") {
-      zoomXToLatest(factor);
+      zoomXFromAxis(factor);
       return;
     }
     zoomX(factor, point.x);

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

@@ -261,6 +261,7 @@ interface TickerLineOptions {
     labelBackgroundColor?: string;
     labelTextColor?: string;
     labelSubtext?: string;
+    labelSubtexts?: Array<string | number>;
     labelSubtextColor?: string;
     labelSubtextFontSize?: number;
     showCountdownInLabel?: boolean;

package/dist/hyperprop-charting-library.js

@@ -178,6 +178,7 @@ var DEFAULT_OPTIONS = {
     thickness: 1,
     labelTextColor: "#0b1220",
     labelSubtext: "",
+    labelSubtexts: [],
     labelSubtextColor: "#0b1220",
     labelSubtextFontSize: 0,
     showCountdownInLabel: false,
@@ -2117,10 +2118,14 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
-      const tickerSubtext = ticker.showCountdownInLabel ? getCountdownText() : ticker.labelSubtext?.trim();
+      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),
-        ...tickerSubtext ? { subtext: tickerSubtext } : {},
+        ...tickerSubtexts.length > 0 ? { subtexts: tickerSubtexts } : {},
         subtextColor: ticker.labelSubtextColor ?? ticker.labelTextColor ?? "#0b1220",
         ...ticker.labelSubtextFontSize === void 0 ? {} : { subtextFontSize: ticker.labelSubtextFontSize },
         price: tickerPrice,
@@ -2206,21 +2211,22 @@ function createChart(element, options = {}) {
       const priceLabelFontSize = Math.max(8, axis.fontSize);
       ctx.font = `${priceLabelFontSize}px ${mergedOptions.fontFamily}`;
       const positionedLabels = priceAxisLabels.map((label) => {
-        const subtext = label.subtext?.trim();
+        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 labelHeight = baseLabelHeight + (subtext ? subtextFontSize + 5 : 0);
+        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 (subtext) {
+        if (subtexts.length > 0) {
           const baseFont = ctx.font;
           ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
-          subtextWidth = Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2;
+          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,
-          subtext,
+          subtexts,
           subtextFontSize,
           height: labelHeight,
           width: labelTextWidth,
@@ -2231,7 +2237,7 @@ function createChart(element, options = {}) {
       const minY = chartTop;
       let cursorY = minY;
       for (const label of positionedLabels) {
-        const maxY = chartBottom - label.height;
+        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 + label.height + 2;
       }
@@ -2248,19 +2254,22 @@ function createChart(element, options = {}) {
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;
         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;
+        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 (label.subtext) {
+        if (hasSubtexts) {
           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
-          );
+          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;
         }
       }
@@ -2478,6 +2487,16 @@ function createChart(element, options = {}) {
     emitViewportChange();
     draw();
   };
+  const zoomXFromAxis = (factor) => {
+    if (!drawState) {
+      return;
+    }
+    if (followLatest) {
+      zoomXToLatest(factor);
+      return;
+    }
+    zoomX(factor, drawState.chartLeft + drawState.chartWidth / 2);
+  };
   const zoomY = (factor, anchorY) => {
     if (!drawState || data.length === 0) {
       return;
@@ -3001,7 +3020,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
     } else if (dragMode === "x-axis") {
       canvas.style.cursor = "ew-resize";
-      zoomXToLatest(Math.exp(deltaX * 6e-3));
+      zoomXFromAxis(Math.exp(deltaX * 6e-3));
       setCrosshairPoint(null);
     } else if (dragMode === "y-axis") {
       canvas.style.cursor = "ns-resize";
@@ -3112,7 +3131,7 @@ function createChart(element, options = {}) {
       return;
     }
     if (region === "x-axis") {
-      zoomXToLatest(factor);
+      zoomXFromAxis(factor);
       return;
     }
     zoomX(factor, point.x);

package/dist/index.cjs

@@ -202,6 +202,7 @@ var DEFAULT_OPTIONS = {
     thickness: 1,
     labelTextColor: "#0b1220",
     labelSubtext: "",
+    labelSubtexts: [],
     labelSubtextColor: "#0b1220",
     labelSubtextFontSize: 0,
     showCountdownInLabel: false,
@@ -2141,10 +2142,14 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
-      const tickerSubtext = ticker.showCountdownInLabel ? getCountdownText() : ticker.labelSubtext?.trim();
+      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),
-        ...tickerSubtext ? { subtext: tickerSubtext } : {},
+        ...tickerSubtexts.length > 0 ? { subtexts: tickerSubtexts } : {},
         subtextColor: ticker.labelSubtextColor ?? ticker.labelTextColor ?? "#0b1220",
         ...ticker.labelSubtextFontSize === void 0 ? {} : { subtextFontSize: ticker.labelSubtextFontSize },
         price: tickerPrice,
@@ -2230,21 +2235,22 @@ function createChart(element, options = {}) {
       const priceLabelFontSize = Math.max(8, axis.fontSize);
       ctx.font = `${priceLabelFontSize}px ${mergedOptions.fontFamily}`;
       const positionedLabels = priceAxisLabels.map((label) => {
-        const subtext = label.subtext?.trim();
+        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 labelHeight = baseLabelHeight + (subtext ? subtextFontSize + 5 : 0);
+        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 (subtext) {
+        if (subtexts.length > 0) {
           const baseFont = ctx.font;
           ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
-          subtextWidth = Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2;
+          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,
-          subtext,
+          subtexts,
           subtextFontSize,
           height: labelHeight,
           width: labelTextWidth,
@@ -2255,7 +2261,7 @@ function createChart(element, options = {}) {
       const minY = chartTop;
       let cursorY = minY;
       for (const label of positionedLabels) {
-        const maxY = chartBottom - label.height;
+        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 + label.height + 2;
       }
@@ -2272,19 +2278,22 @@ function createChart(element, options = {}) {
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;
         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;
+        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 (label.subtext) {
+        if (hasSubtexts) {
           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
-          );
+          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;
         }
       }
@@ -2502,6 +2511,16 @@ function createChart(element, options = {}) {
     emitViewportChange();
     draw();
   };
+  const zoomXFromAxis = (factor) => {
+    if (!drawState) {
+      return;
+    }
+    if (followLatest) {
+      zoomXToLatest(factor);
+      return;
+    }
+    zoomX(factor, drawState.chartLeft + drawState.chartWidth / 2);
+  };
   const zoomY = (factor, anchorY) => {
     if (!drawState || data.length === 0) {
       return;
@@ -3025,7 +3044,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
     } else if (dragMode === "x-axis") {
       canvas.style.cursor = "ew-resize";
-      zoomXToLatest(Math.exp(deltaX * 6e-3));
+      zoomXFromAxis(Math.exp(deltaX * 6e-3));
       setCrosshairPoint(null);
     } else if (dragMode === "y-axis") {
       canvas.style.cursor = "ns-resize";
@@ -3136,7 +3155,7 @@ function createChart(element, options = {}) {
       return;
     }
     if (region === "x-axis") {
-      zoomXToLatest(factor);
+      zoomXFromAxis(factor);
       return;
     }
     zoomX(factor, point.x);

package/dist/index.d.cts

@@ -261,6 +261,7 @@ interface TickerLineOptions {
     labelBackgroundColor?: string;
     labelTextColor?: string;
     labelSubtext?: string;
+    labelSubtexts?: Array<string | number>;
     labelSubtextColor?: string;
     labelSubtextFontSize?: number;
     showCountdownInLabel?: boolean;

package/dist/index.d.ts

@@ -261,6 +261,7 @@ interface TickerLineOptions {
     labelBackgroundColor?: string;
     labelTextColor?: string;
     labelSubtext?: string;
+    labelSubtexts?: Array<string | number>;
     labelSubtextColor?: string;
     labelSubtextFontSize?: number;
     showCountdownInLabel?: boolean;

package/dist/index.js

@@ -178,6 +178,7 @@ var DEFAULT_OPTIONS = {
     thickness: 1,
     labelTextColor: "#0b1220",
     labelSubtext: "",
+    labelSubtexts: [],
     labelSubtextColor: "#0b1220",
     labelSubtextFontSize: 0,
     showCountdownInLabel: false,
@@ -2117,10 +2118,14 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
-      const tickerSubtext = ticker.showCountdownInLabel ? getCountdownText() : ticker.labelSubtext?.trim();
+      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),
-        ...tickerSubtext ? { subtext: tickerSubtext } : {},
+        ...tickerSubtexts.length > 0 ? { subtexts: tickerSubtexts } : {},
         subtextColor: ticker.labelSubtextColor ?? ticker.labelTextColor ?? "#0b1220",
         ...ticker.labelSubtextFontSize === void 0 ? {} : { subtextFontSize: ticker.labelSubtextFontSize },
         price: tickerPrice,
@@ -2206,21 +2211,22 @@ function createChart(element, options = {}) {
       const priceLabelFontSize = Math.max(8, axis.fontSize);
       ctx.font = `${priceLabelFontSize}px ${mergedOptions.fontFamily}`;
       const positionedLabels = priceAxisLabels.map((label) => {
-        const subtext = label.subtext?.trim();
+        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 labelHeight = baseLabelHeight + (subtext ? subtextFontSize + 5 : 0);
+        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 (subtext) {
+        if (subtexts.length > 0) {
           const baseFont = ctx.font;
           ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
-          subtextWidth = Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2;
+          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,
-          subtext,
+          subtexts,
           subtextFontSize,
           height: labelHeight,
           width: labelTextWidth,
@@ -2231,7 +2237,7 @@ function createChart(element, options = {}) {
       const minY = chartTop;
       let cursorY = minY;
       for (const label of positionedLabels) {
-        const maxY = chartBottom - label.height;
+        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 + label.height + 2;
       }
@@ -2248,19 +2254,22 @@ function createChart(element, options = {}) {
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;
         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;
+        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 (label.subtext) {
+        if (hasSubtexts) {
           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
-          );
+          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;
         }
       }
@@ -2478,6 +2487,16 @@ function createChart(element, options = {}) {
     emitViewportChange();
     draw();
   };
+  const zoomXFromAxis = (factor) => {
+    if (!drawState) {
+      return;
+    }
+    if (followLatest) {
+      zoomXToLatest(factor);
+      return;
+    }
+    zoomX(factor, drawState.chartLeft + drawState.chartWidth / 2);
+  };
   const zoomY = (factor, anchorY) => {
     if (!drawState || data.length === 0) {
       return;
@@ -3001,7 +3020,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
     } else if (dragMode === "x-axis") {
       canvas.style.cursor = "ew-resize";
-      zoomXToLatest(Math.exp(deltaX * 6e-3));
+      zoomXFromAxis(Math.exp(deltaX * 6e-3));
       setCrosshairPoint(null);
     } else if (dragMode === "y-axis") {
       canvas.style.cursor = "ns-resize";
@@ -3112,7 +3131,7 @@ function createChart(element, options = {}) {
       return;
     }
     if (region === "x-axis") {
-      zoomXToLatest(factor);
+      zoomXFromAxis(factor);
       return;
     }
     zoomX(factor, point.x);

package/docs/API.md

@@ -149,10 +149,11 @@ watermark: {
 - `color` (default `#38bdf8`)
 - `labelBackgroundColor` (default `#38bdf8`)
 - `labelTextColor` (default `#0b1220`)
-- `labelSubtext` (optional second line inside the current-price label, for example `"MNQ"`)
+- `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 use the same font size as the price)
-- `showCountdownInLabel` (default `false`; renders bar-close countdown as the second line)
+- `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.46",
+  "version": "0.1.48",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",