hyperprop-charting-library 0.1.62 → 0.1.63

package/dist/hyperprop-charting-library.cjs

@@ -1068,6 +1068,7 @@ function createChart(element, options = {}) {
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
+  let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
   const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
@@ -1289,14 +1290,34 @@ function createChart(element, options = {}) {
     const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
     return `${integerPart}${decimalPart}`;
   };
+  const getMeasuredLabelWidth = (text, paddingX) => {
+    return Math.ceil(ctx.measureText(text).width) + paddingX * 2;
+  };
+  const getStabilizedNumericLabelWidth = (text, paddingX) => {
+    const measured = getMeasuredLabelWidth(text, paddingX);
+    if (!mergedOptions.stabilizePriceLabels || !/\d/.test(text)) {
+      return measured;
+    }
+    let stableWidth = measured;
+    for (const digit of ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]) {
+      stableWidth = Math.max(stableWidth, getMeasuredLabelWidth(text.replace(/\d/g, digit), paddingX));
+    }
+    return stableWidth;
+  };
   const getPriceLabelWidth = (priceText, paddingX) => {
-    const measured = Math.ceil(ctx.measureText(priceText).width) + paddingX * 2;
+    const measured = getStabilizedNumericLabelWidth(priceText, paddingX);
     if (!mergedOptions.stabilizePriceLabels) {
       return measured;
     }
-    const templateWidth = Math.ceil(ctx.measureText(getStabilizedPriceTemplate()).width) + paddingX * 2;
+    const templateWidth = getStabilizedNumericLabelWidth(getStabilizedPriceTemplate(), paddingX);
     return Math.max(measured, templateWidth);
   };
+  const getStableLabelWidth = (text, paddingX) => {
+    return getStabilizedNumericLabelWidth(text, paddingX);
+  };
+  const resetRightMarginCache = () => {
+    cachedRightMargin = margin.right;
+  };
   const parseData = (nextData) => {
     const dedupedByTime = /* @__PURE__ */ new Map();
     for (const point of nextData) {
@@ -1822,22 +1843,33 @@ function createChart(element, options = {}) {
     const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
     const estimateRightMargin = () => {
       const paddingX = Math.max(4, labels.labelPaddingX);
-      const measure = (text) => Math.ceil(ctx.measureText(text).width) + paddingX * 2;
       let required = margin.right - 1;
+      const includeWidth = (contentWidth) => {
+        if (Number.isFinite(contentWidth)) {
+          required = Math.max(required, contentWidth);
+        }
+      };
       const include = (text) => {
         const normalized = text?.trim();
         if (normalized) {
-          required = Math.max(required, measure(normalized));
+          includeWidth(getStableLabelWidth(normalized, paddingX));
+        }
+      };
+      const includePrice = (price) => {
+        if (Number.isFinite(price)) {
+          includeWidth(getPriceLabelWidth(formatPrice(price), paddingX));
         }
       };
       const ticker2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
       const lastPoint2 = data[data.length - 1];
       if ((ticker2.visible ?? true) && labels.showLastPrice && lastPoint2) {
-        include(formatPrice(lastPoint2.c));
+        const tickerPrice2 = ticker2.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint2.c;
+        includePrice(tickerPrice2);
         if (ticker2.labelSubtext) include(String(ticker2.labelSubtext));
         for (const subtext of ticker2.labelSubtexts ?? []) {
           include(String(subtext));
         }
+        if (ticker2.showCountdownInLabel) include("88:88");
       }
       if (labels.showSymbolName) {
         include(labels.symbolName);
@@ -1859,18 +1891,24 @@ function createChart(element, options = {}) {
       for (const line of priceLines) {
         const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
         if (mergedLine.visible && Number.isFinite(mergedLine.price)) {
-          include(mergedLine.label ?? formatPrice(mergedLine.price));
+          if (mergedLine.label) {
+            include(mergedLine.label);
+          } else {
+            includePrice(mergedLine.price);
+          }
         }
       }
       for (const line of orderLines) {
         const mergedLine = { ...DEFAULT_ORDER_LINE_OPTIONS, ...line };
         const renderPrice = mergedLine.behavior === "follow" && Number.isFinite(mergedLine.followPrice) ? mergedLine.followPrice : mergedLine.price;
         if (mergedLine.visible && Number.isFinite(renderPrice)) {
-          include(formatPrice(renderPrice));
+          includePrice(renderPrice);
         }
       }
       const maxRightMargin = Math.max(margin.right, width - margin.left - 160);
-      return Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      const nextRightMargin = Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      cachedRightMargin = Math.max(cachedRightMargin, nextRightMargin);
+      return Math.min(maxRightMargin, cachedRightMargin);
     };
     const rightMargin = estimateRightMargin();
     const chartLeft = margin.left;
@@ -3943,6 +3981,7 @@ function createChart(element, options = {}) {
     width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
     height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
     const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
@@ -3969,6 +4008,7 @@ function createChart(element, options = {}) {
       height = nextHeight;
     }
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     draw();
   };
   const setData = (nextData) => {
@@ -3985,6 +4025,7 @@ function createChart(element, options = {}) {
       tickerPriceTarget = null;
       smoothedTickerVolume = null;
       tickerVolumeTarget = null;
+      resetRightMarginCache();
       resetYViewport();
       draw();
       return;
@@ -4018,6 +4059,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `line-${index + 1}`
     }));
+    resetRightMarginCache();
     draw();
   };
   const addPriceLine = (line) => {
@@ -4028,6 +4070,7 @@ function createChart(element, options = {}) {
   };
   const removePriceLine = (id) => {
     priceLines = priceLines.filter((line) => line.id !== id);
+    resetRightMarginCache();
     draw();
   };
   const setOrderLines = (lines) => {
@@ -4035,6 +4078,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `order-${index + 1}`
     }));
+    resetRightMarginCache();
     const activeIds = new Set(orderLines.map((line) => line.id));
     for (const id of Array.from(orderWidgetWidthById.keys())) {
       if (!activeIds.has(id)) {
@@ -4062,6 +4106,7 @@ function createChart(element, options = {}) {
     orderLines = orderLines.filter((line) => line.id !== id);
     orderWidgetWidthById.delete(id);
     orderPriceTagWidthById.delete(id);
+    resetRightMarginCache();
     draw();
   };
   const onOrderAction = (handler) => {

package/dist/hyperprop-charting-library.js

@@ -1044,6 +1044,7 @@ function createChart(element, options = {}) {
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
+  let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
   const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
@@ -1265,14 +1266,34 @@ function createChart(element, options = {}) {
     const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
     return `${integerPart}${decimalPart}`;
   };
+  const getMeasuredLabelWidth = (text, paddingX) => {
+    return Math.ceil(ctx.measureText(text).width) + paddingX * 2;
+  };
+  const getStabilizedNumericLabelWidth = (text, paddingX) => {
+    const measured = getMeasuredLabelWidth(text, paddingX);
+    if (!mergedOptions.stabilizePriceLabels || !/\d/.test(text)) {
+      return measured;
+    }
+    let stableWidth = measured;
+    for (const digit of ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]) {
+      stableWidth = Math.max(stableWidth, getMeasuredLabelWidth(text.replace(/\d/g, digit), paddingX));
+    }
+    return stableWidth;
+  };
   const getPriceLabelWidth = (priceText, paddingX) => {
-    const measured = Math.ceil(ctx.measureText(priceText).width) + paddingX * 2;
+    const measured = getStabilizedNumericLabelWidth(priceText, paddingX);
     if (!mergedOptions.stabilizePriceLabels) {
       return measured;
     }
-    const templateWidth = Math.ceil(ctx.measureText(getStabilizedPriceTemplate()).width) + paddingX * 2;
+    const templateWidth = getStabilizedNumericLabelWidth(getStabilizedPriceTemplate(), paddingX);
     return Math.max(measured, templateWidth);
   };
+  const getStableLabelWidth = (text, paddingX) => {
+    return getStabilizedNumericLabelWidth(text, paddingX);
+  };
+  const resetRightMarginCache = () => {
+    cachedRightMargin = margin.right;
+  };
   const parseData = (nextData) => {
     const dedupedByTime = /* @__PURE__ */ new Map();
     for (const point of nextData) {
@@ -1798,22 +1819,33 @@ function createChart(element, options = {}) {
     const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
     const estimateRightMargin = () => {
       const paddingX = Math.max(4, labels.labelPaddingX);
-      const measure = (text) => Math.ceil(ctx.measureText(text).width) + paddingX * 2;
       let required = margin.right - 1;
+      const includeWidth = (contentWidth) => {
+        if (Number.isFinite(contentWidth)) {
+          required = Math.max(required, contentWidth);
+        }
+      };
       const include = (text) => {
         const normalized = text?.trim();
         if (normalized) {
-          required = Math.max(required, measure(normalized));
+          includeWidth(getStableLabelWidth(normalized, paddingX));
+        }
+      };
+      const includePrice = (price) => {
+        if (Number.isFinite(price)) {
+          includeWidth(getPriceLabelWidth(formatPrice(price), paddingX));
         }
       };
       const ticker2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
       const lastPoint2 = data[data.length - 1];
       if ((ticker2.visible ?? true) && labels.showLastPrice && lastPoint2) {
-        include(formatPrice(lastPoint2.c));
+        const tickerPrice2 = ticker2.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint2.c;
+        includePrice(tickerPrice2);
         if (ticker2.labelSubtext) include(String(ticker2.labelSubtext));
         for (const subtext of ticker2.labelSubtexts ?? []) {
           include(String(subtext));
         }
+        if (ticker2.showCountdownInLabel) include("88:88");
       }
       if (labels.showSymbolName) {
         include(labels.symbolName);
@@ -1835,18 +1867,24 @@ function createChart(element, options = {}) {
       for (const line of priceLines) {
         const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
         if (mergedLine.visible && Number.isFinite(mergedLine.price)) {
-          include(mergedLine.label ?? formatPrice(mergedLine.price));
+          if (mergedLine.label) {
+            include(mergedLine.label);
+          } else {
+            includePrice(mergedLine.price);
+          }
         }
       }
       for (const line of orderLines) {
         const mergedLine = { ...DEFAULT_ORDER_LINE_OPTIONS, ...line };
         const renderPrice = mergedLine.behavior === "follow" && Number.isFinite(mergedLine.followPrice) ? mergedLine.followPrice : mergedLine.price;
         if (mergedLine.visible && Number.isFinite(renderPrice)) {
-          include(formatPrice(renderPrice));
+          includePrice(renderPrice);
         }
       }
       const maxRightMargin = Math.max(margin.right, width - margin.left - 160);
-      return Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      const nextRightMargin = Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      cachedRightMargin = Math.max(cachedRightMargin, nextRightMargin);
+      return Math.min(maxRightMargin, cachedRightMargin);
     };
     const rightMargin = estimateRightMargin();
     const chartLeft = margin.left;
@@ -3919,6 +3957,7 @@ function createChart(element, options = {}) {
     width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
     height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
     const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
@@ -3945,6 +3984,7 @@ function createChart(element, options = {}) {
       height = nextHeight;
     }
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     draw();
   };
   const setData = (nextData) => {
@@ -3961,6 +4001,7 @@ function createChart(element, options = {}) {
       tickerPriceTarget = null;
       smoothedTickerVolume = null;
       tickerVolumeTarget = null;
+      resetRightMarginCache();
       resetYViewport();
       draw();
       return;
@@ -3994,6 +4035,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `line-${index + 1}`
     }));
+    resetRightMarginCache();
     draw();
   };
   const addPriceLine = (line) => {
@@ -4004,6 +4046,7 @@ function createChart(element, options = {}) {
   };
   const removePriceLine = (id) => {
     priceLines = priceLines.filter((line) => line.id !== id);
+    resetRightMarginCache();
     draw();
   };
   const setOrderLines = (lines) => {
@@ -4011,6 +4054,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `order-${index + 1}`
     }));
+    resetRightMarginCache();
     const activeIds = new Set(orderLines.map((line) => line.id));
     for (const id of Array.from(orderWidgetWidthById.keys())) {
       if (!activeIds.has(id)) {
@@ -4038,6 +4082,7 @@ function createChart(element, options = {}) {
     orderLines = orderLines.filter((line) => line.id !== id);
     orderWidgetWidthById.delete(id);
     orderPriceTagWidthById.delete(id);
+    resetRightMarginCache();
     draw();
   };
   const onOrderAction = (handler) => {

package/dist/index.cjs

@@ -1068,6 +1068,7 @@ function createChart(element, options = {}) {
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
+  let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
   const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
@@ -1289,14 +1290,34 @@ function createChart(element, options = {}) {
     const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
     return `${integerPart}${decimalPart}`;
   };
+  const getMeasuredLabelWidth = (text, paddingX) => {
+    return Math.ceil(ctx.measureText(text).width) + paddingX * 2;
+  };
+  const getStabilizedNumericLabelWidth = (text, paddingX) => {
+    const measured = getMeasuredLabelWidth(text, paddingX);
+    if (!mergedOptions.stabilizePriceLabels || !/\d/.test(text)) {
+      return measured;
+    }
+    let stableWidth = measured;
+    for (const digit of ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]) {
+      stableWidth = Math.max(stableWidth, getMeasuredLabelWidth(text.replace(/\d/g, digit), paddingX));
+    }
+    return stableWidth;
+  };
   const getPriceLabelWidth = (priceText, paddingX) => {
-    const measured = Math.ceil(ctx.measureText(priceText).width) + paddingX * 2;
+    const measured = getStabilizedNumericLabelWidth(priceText, paddingX);
     if (!mergedOptions.stabilizePriceLabels) {
       return measured;
     }
-    const templateWidth = Math.ceil(ctx.measureText(getStabilizedPriceTemplate()).width) + paddingX * 2;
+    const templateWidth = getStabilizedNumericLabelWidth(getStabilizedPriceTemplate(), paddingX);
     return Math.max(measured, templateWidth);
   };
+  const getStableLabelWidth = (text, paddingX) => {
+    return getStabilizedNumericLabelWidth(text, paddingX);
+  };
+  const resetRightMarginCache = () => {
+    cachedRightMargin = margin.right;
+  };
   const parseData = (nextData) => {
     const dedupedByTime = /* @__PURE__ */ new Map();
     for (const point of nextData) {
@@ -1822,22 +1843,33 @@ function createChart(element, options = {}) {
     const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
     const estimateRightMargin = () => {
       const paddingX = Math.max(4, labels.labelPaddingX);
-      const measure = (text) => Math.ceil(ctx.measureText(text).width) + paddingX * 2;
       let required = margin.right - 1;
+      const includeWidth = (contentWidth) => {
+        if (Number.isFinite(contentWidth)) {
+          required = Math.max(required, contentWidth);
+        }
+      };
       const include = (text) => {
         const normalized = text?.trim();
         if (normalized) {
-          required = Math.max(required, measure(normalized));
+          includeWidth(getStableLabelWidth(normalized, paddingX));
+        }
+      };
+      const includePrice = (price) => {
+        if (Number.isFinite(price)) {
+          includeWidth(getPriceLabelWidth(formatPrice(price), paddingX));
         }
       };
       const ticker2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
       const lastPoint2 = data[data.length - 1];
       if ((ticker2.visible ?? true) && labels.showLastPrice && lastPoint2) {
-        include(formatPrice(lastPoint2.c));
+        const tickerPrice2 = ticker2.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint2.c;
+        includePrice(tickerPrice2);
         if (ticker2.labelSubtext) include(String(ticker2.labelSubtext));
         for (const subtext of ticker2.labelSubtexts ?? []) {
           include(String(subtext));
         }
+        if (ticker2.showCountdownInLabel) include("88:88");
       }
       if (labels.showSymbolName) {
         include(labels.symbolName);
@@ -1859,18 +1891,24 @@ function createChart(element, options = {}) {
       for (const line of priceLines) {
         const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
         if (mergedLine.visible && Number.isFinite(mergedLine.price)) {
-          include(mergedLine.label ?? formatPrice(mergedLine.price));
+          if (mergedLine.label) {
+            include(mergedLine.label);
+          } else {
+            includePrice(mergedLine.price);
+          }
         }
       }
       for (const line of orderLines) {
         const mergedLine = { ...DEFAULT_ORDER_LINE_OPTIONS, ...line };
         const renderPrice = mergedLine.behavior === "follow" && Number.isFinite(mergedLine.followPrice) ? mergedLine.followPrice : mergedLine.price;
         if (mergedLine.visible && Number.isFinite(renderPrice)) {
-          include(formatPrice(renderPrice));
+          includePrice(renderPrice);
         }
       }
       const maxRightMargin = Math.max(margin.right, width - margin.left - 160);
-      return Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      const nextRightMargin = Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      cachedRightMargin = Math.max(cachedRightMargin, nextRightMargin);
+      return Math.min(maxRightMargin, cachedRightMargin);
     };
     const rightMargin = estimateRightMargin();
     const chartLeft = margin.left;
@@ -3943,6 +3981,7 @@ function createChart(element, options = {}) {
     width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
     height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
     const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
@@ -3969,6 +4008,7 @@ function createChart(element, options = {}) {
       height = nextHeight;
     }
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     draw();
   };
   const setData = (nextData) => {
@@ -3985,6 +4025,7 @@ function createChart(element, options = {}) {
       tickerPriceTarget = null;
       smoothedTickerVolume = null;
       tickerVolumeTarget = null;
+      resetRightMarginCache();
       resetYViewport();
       draw();
       return;
@@ -4018,6 +4059,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `line-${index + 1}`
     }));
+    resetRightMarginCache();
     draw();
   };
   const addPriceLine = (line) => {
@@ -4028,6 +4070,7 @@ function createChart(element, options = {}) {
   };
   const removePriceLine = (id) => {
     priceLines = priceLines.filter((line) => line.id !== id);
+    resetRightMarginCache();
     draw();
   };
   const setOrderLines = (lines) => {
@@ -4035,6 +4078,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `order-${index + 1}`
     }));
+    resetRightMarginCache();
     const activeIds = new Set(orderLines.map((line) => line.id));
     for (const id of Array.from(orderWidgetWidthById.keys())) {
       if (!activeIds.has(id)) {
@@ -4062,6 +4106,7 @@ function createChart(element, options = {}) {
     orderLines = orderLines.filter((line) => line.id !== id);
     orderWidgetWidthById.delete(id);
     orderPriceTagWidthById.delete(id);
+    resetRightMarginCache();
     draw();
   };
   const onOrderAction = (handler) => {

package/dist/index.js

@@ -1044,6 +1044,7 @@ function createChart(element, options = {}) {
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
+  let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
   const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
@@ -1265,14 +1266,34 @@ function createChart(element, options = {}) {
     const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
     return `${integerPart}${decimalPart}`;
   };
+  const getMeasuredLabelWidth = (text, paddingX) => {
+    return Math.ceil(ctx.measureText(text).width) + paddingX * 2;
+  };
+  const getStabilizedNumericLabelWidth = (text, paddingX) => {
+    const measured = getMeasuredLabelWidth(text, paddingX);
+    if (!mergedOptions.stabilizePriceLabels || !/\d/.test(text)) {
+      return measured;
+    }
+    let stableWidth = measured;
+    for (const digit of ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]) {
+      stableWidth = Math.max(stableWidth, getMeasuredLabelWidth(text.replace(/\d/g, digit), paddingX));
+    }
+    return stableWidth;
+  };
   const getPriceLabelWidth = (priceText, paddingX) => {
-    const measured = Math.ceil(ctx.measureText(priceText).width) + paddingX * 2;
+    const measured = getStabilizedNumericLabelWidth(priceText, paddingX);
     if (!mergedOptions.stabilizePriceLabels) {
       return measured;
     }
-    const templateWidth = Math.ceil(ctx.measureText(getStabilizedPriceTemplate()).width) + paddingX * 2;
+    const templateWidth = getStabilizedNumericLabelWidth(getStabilizedPriceTemplate(), paddingX);
     return Math.max(measured, templateWidth);
   };
+  const getStableLabelWidth = (text, paddingX) => {
+    return getStabilizedNumericLabelWidth(text, paddingX);
+  };
+  const resetRightMarginCache = () => {
+    cachedRightMargin = margin.right;
+  };
   const parseData = (nextData) => {
     const dedupedByTime = /* @__PURE__ */ new Map();
     for (const point of nextData) {
@@ -1798,22 +1819,33 @@ function createChart(element, options = {}) {
     const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
     const estimateRightMargin = () => {
       const paddingX = Math.max(4, labels.labelPaddingX);
-      const measure = (text) => Math.ceil(ctx.measureText(text).width) + paddingX * 2;
       let required = margin.right - 1;
+      const includeWidth = (contentWidth) => {
+        if (Number.isFinite(contentWidth)) {
+          required = Math.max(required, contentWidth);
+        }
+      };
       const include = (text) => {
         const normalized = text?.trim();
         if (normalized) {
-          required = Math.max(required, measure(normalized));
+          includeWidth(getStableLabelWidth(normalized, paddingX));
+        }
+      };
+      const includePrice = (price) => {
+        if (Number.isFinite(price)) {
+          includeWidth(getPriceLabelWidth(formatPrice(price), paddingX));
         }
       };
       const ticker2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
       const lastPoint2 = data[data.length - 1];
       if ((ticker2.visible ?? true) && labels.showLastPrice && lastPoint2) {
-        include(formatPrice(lastPoint2.c));
+        const tickerPrice2 = ticker2.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint2.c;
+        includePrice(tickerPrice2);
         if (ticker2.labelSubtext) include(String(ticker2.labelSubtext));
         for (const subtext of ticker2.labelSubtexts ?? []) {
           include(String(subtext));
         }
+        if (ticker2.showCountdownInLabel) include("88:88");
       }
       if (labels.showSymbolName) {
         include(labels.symbolName);
@@ -1835,18 +1867,24 @@ function createChart(element, options = {}) {
       for (const line of priceLines) {
         const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
         if (mergedLine.visible && Number.isFinite(mergedLine.price)) {
-          include(mergedLine.label ?? formatPrice(mergedLine.price));
+          if (mergedLine.label) {
+            include(mergedLine.label);
+          } else {
+            includePrice(mergedLine.price);
+          }
         }
       }
       for (const line of orderLines) {
         const mergedLine = { ...DEFAULT_ORDER_LINE_OPTIONS, ...line };
         const renderPrice = mergedLine.behavior === "follow" && Number.isFinite(mergedLine.followPrice) ? mergedLine.followPrice : mergedLine.price;
         if (mergedLine.visible && Number.isFinite(renderPrice)) {
-          include(formatPrice(renderPrice));
+          includePrice(renderPrice);
         }
       }
       const maxRightMargin = Math.max(margin.right, width - margin.left - 160);
-      return Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      const nextRightMargin = Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+      cachedRightMargin = Math.max(cachedRightMargin, nextRightMargin);
+      return Math.min(maxRightMargin, cachedRightMargin);
     };
     const rightMargin = estimateRightMargin();
     const chartLeft = margin.left;
@@ -3919,6 +3957,7 @@ function createChart(element, options = {}) {
     width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
     height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
     const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
@@ -3945,6 +3984,7 @@ function createChart(element, options = {}) {
       height = nextHeight;
     }
     mergedOptions = { ...mergedOptions, width, height };
+    resetRightMarginCache();
     draw();
   };
   const setData = (nextData) => {
@@ -3961,6 +4001,7 @@ function createChart(element, options = {}) {
       tickerPriceTarget = null;
       smoothedTickerVolume = null;
       tickerVolumeTarget = null;
+      resetRightMarginCache();
       resetYViewport();
       draw();
       return;
@@ -3994,6 +4035,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `line-${index + 1}`
     }));
+    resetRightMarginCache();
     draw();
   };
   const addPriceLine = (line) => {
@@ -4004,6 +4046,7 @@ function createChart(element, options = {}) {
   };
   const removePriceLine = (id) => {
     priceLines = priceLines.filter((line) => line.id !== id);
+    resetRightMarginCache();
     draw();
   };
   const setOrderLines = (lines) => {
@@ -4011,6 +4054,7 @@ function createChart(element, options = {}) {
       ...line,
       id: line.id ?? `order-${index + 1}`
     }));
+    resetRightMarginCache();
     const activeIds = new Set(orderLines.map((line) => line.id));
     for (const id of Array.from(orderWidgetWidthById.keys())) {
       if (!activeIds.has(id)) {
@@ -4038,6 +4082,7 @@ function createChart(element, options = {}) {
     orderLines = orderLines.filter((line) => line.id !== id);
     orderWidgetWidthById.delete(id);
     orderPriceTagWidthById.delete(id);
+    resetRightMarginCache();
     draw();
   };
   const onOrderAction = (handler) => {

package/package.json

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