hyperprop-charting-library 0.1.61 → 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;
@@ -2023,16 +2061,17 @@ function createChart(element, options = {}) {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
-    const FIB_LEVELS = [
-      { ratio: 0, color: "#787b86" },
-      { ratio: 0.236, color: "#f23645", band: "rgba(242,54,69,0.10)" },
-      { ratio: 0.382, color: "#ff9800", band: "rgba(255,152,0,0.10)" },
-      { ratio: 0.5, color: "#4caf50", band: "rgba(76,175,80,0.10)" },
-      { ratio: 0.618, color: "#089981", band: "rgba(8,153,129,0.10)" },
-      { ratio: 0.786, color: "#00bcd4", band: "rgba(0,188,212,0.10)" },
-      { ratio: 1, color: "#787b86", band: "rgba(120,123,134,0.10)" },
-      { ratio: 1.618, color: "#2962ff", band: "rgba(41,98,255,0.08)" }
-    ];
+    const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const hexToRgba = (hex, alpha) => {
+      const cleaned = hex.replace("#", "");
+      if (cleaned.length !== 6) {
+        return `rgba(0,0,0,${alpha})`;
+      }
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2119,28 +2158,27 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
-          const levelLines = FIB_LEVELS.map((level) => {
-            const price = first.price + (second.price - first.price) * (1 - level.ratio);
-            return { ...level, price, y: yFromPrice(price) };
+          const levelLines = FIB_RATIOS.map((ratio) => {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            return { ratio, price, y: yFromPrice(price) };
           });
+          const bandColor = hexToRgba(drawing.color, 0.1);
           for (let index = 0; index < levelLines.length - 1; index += 1) {
             const top = levelLines[index];
             const bottom = levelLines[index + 1];
-            const fillColor = bottom.band ?? top.band;
-            if (!fillColor) continue;
             const bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = fillColor;
+            ctx.fillStyle = bandColor;
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
+          ctx.strokeStyle = drawing.color;
           applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
           for (const level of levelLines) {
-            ctx.strokeStyle = level.color;
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
@@ -2148,7 +2186,7 @@ function createChart(element, options = {}) {
           }
           ctx.restore();
           ctx.save();
-          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
           ctx.setLineDash([4, 4]);
           ctx.lineWidth = 1;
           ctx.beginPath();
@@ -2168,7 +2206,7 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = level.color;
+            ctx.fillStyle = drawing.color;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
@@ -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;
@@ -1999,16 +2037,17 @@ function createChart(element, options = {}) {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
-    const FIB_LEVELS = [
-      { ratio: 0, color: "#787b86" },
-      { ratio: 0.236, color: "#f23645", band: "rgba(242,54,69,0.10)" },
-      { ratio: 0.382, color: "#ff9800", band: "rgba(255,152,0,0.10)" },
-      { ratio: 0.5, color: "#4caf50", band: "rgba(76,175,80,0.10)" },
-      { ratio: 0.618, color: "#089981", band: "rgba(8,153,129,0.10)" },
-      { ratio: 0.786, color: "#00bcd4", band: "rgba(0,188,212,0.10)" },
-      { ratio: 1, color: "#787b86", band: "rgba(120,123,134,0.10)" },
-      { ratio: 1.618, color: "#2962ff", band: "rgba(41,98,255,0.08)" }
-    ];
+    const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const hexToRgba = (hex, alpha) => {
+      const cleaned = hex.replace("#", "");
+      if (cleaned.length !== 6) {
+        return `rgba(0,0,0,${alpha})`;
+      }
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2095,28 +2134,27 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
-          const levelLines = FIB_LEVELS.map((level) => {
-            const price = first.price + (second.price - first.price) * (1 - level.ratio);
-            return { ...level, price, y: yFromPrice(price) };
+          const levelLines = FIB_RATIOS.map((ratio) => {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            return { ratio, price, y: yFromPrice(price) };
           });
+          const bandColor = hexToRgba(drawing.color, 0.1);
           for (let index = 0; index < levelLines.length - 1; index += 1) {
             const top = levelLines[index];
             const bottom = levelLines[index + 1];
-            const fillColor = bottom.band ?? top.band;
-            if (!fillColor) continue;
             const bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = fillColor;
+            ctx.fillStyle = bandColor;
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
+          ctx.strokeStyle = drawing.color;
           applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
           for (const level of levelLines) {
-            ctx.strokeStyle = level.color;
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
@@ -2124,7 +2162,7 @@ function createChart(element, options = {}) {
           }
           ctx.restore();
           ctx.save();
-          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
           ctx.setLineDash([4, 4]);
           ctx.lineWidth = 1;
           ctx.beginPath();
@@ -2144,7 +2182,7 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = level.color;
+            ctx.fillStyle = drawing.color;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
@@ -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;
@@ -2023,16 +2061,17 @@ function createChart(element, options = {}) {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
-    const FIB_LEVELS = [
-      { ratio: 0, color: "#787b86" },
-      { ratio: 0.236, color: "#f23645", band: "rgba(242,54,69,0.10)" },
-      { ratio: 0.382, color: "#ff9800", band: "rgba(255,152,0,0.10)" },
-      { ratio: 0.5, color: "#4caf50", band: "rgba(76,175,80,0.10)" },
-      { ratio: 0.618, color: "#089981", band: "rgba(8,153,129,0.10)" },
-      { ratio: 0.786, color: "#00bcd4", band: "rgba(0,188,212,0.10)" },
-      { ratio: 1, color: "#787b86", band: "rgba(120,123,134,0.10)" },
-      { ratio: 1.618, color: "#2962ff", band: "rgba(41,98,255,0.08)" }
-    ];
+    const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const hexToRgba = (hex, alpha) => {
+      const cleaned = hex.replace("#", "");
+      if (cleaned.length !== 6) {
+        return `rgba(0,0,0,${alpha})`;
+      }
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2119,28 +2158,27 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
-          const levelLines = FIB_LEVELS.map((level) => {
-            const price = first.price + (second.price - first.price) * (1 - level.ratio);
-            return { ...level, price, y: yFromPrice(price) };
+          const levelLines = FIB_RATIOS.map((ratio) => {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            return { ratio, price, y: yFromPrice(price) };
           });
+          const bandColor = hexToRgba(drawing.color, 0.1);
           for (let index = 0; index < levelLines.length - 1; index += 1) {
             const top = levelLines[index];
             const bottom = levelLines[index + 1];
-            const fillColor = bottom.band ?? top.band;
-            if (!fillColor) continue;
             const bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = fillColor;
+            ctx.fillStyle = bandColor;
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
+          ctx.strokeStyle = drawing.color;
           applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
           for (const level of levelLines) {
-            ctx.strokeStyle = level.color;
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
@@ -2148,7 +2186,7 @@ function createChart(element, options = {}) {
           }
           ctx.restore();
           ctx.save();
-          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
           ctx.setLineDash([4, 4]);
           ctx.lineWidth = 1;
           ctx.beginPath();
@@ -2168,7 +2206,7 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = level.color;
+            ctx.fillStyle = drawing.color;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
@@ -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;
@@ -1999,16 +2037,17 @@ function createChart(element, options = {}) {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
-    const FIB_LEVELS = [
-      { ratio: 0, color: "#787b86" },
-      { ratio: 0.236, color: "#f23645", band: "rgba(242,54,69,0.10)" },
-      { ratio: 0.382, color: "#ff9800", band: "rgba(255,152,0,0.10)" },
-      { ratio: 0.5, color: "#4caf50", band: "rgba(76,175,80,0.10)" },
-      { ratio: 0.618, color: "#089981", band: "rgba(8,153,129,0.10)" },
-      { ratio: 0.786, color: "#00bcd4", band: "rgba(0,188,212,0.10)" },
-      { ratio: 1, color: "#787b86", band: "rgba(120,123,134,0.10)" },
-      { ratio: 1.618, color: "#2962ff", band: "rgba(41,98,255,0.08)" }
-    ];
+    const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const hexToRgba = (hex, alpha) => {
+      const cleaned = hex.replace("#", "");
+      if (cleaned.length !== 6) {
+        return `rgba(0,0,0,${alpha})`;
+      }
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2095,28 +2134,27 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
-          const levelLines = FIB_LEVELS.map((level) => {
-            const price = first.price + (second.price - first.price) * (1 - level.ratio);
-            return { ...level, price, y: yFromPrice(price) };
+          const levelLines = FIB_RATIOS.map((ratio) => {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            return { ratio, price, y: yFromPrice(price) };
           });
+          const bandColor = hexToRgba(drawing.color, 0.1);
           for (let index = 0; index < levelLines.length - 1; index += 1) {
             const top = levelLines[index];
             const bottom = levelLines[index + 1];
-            const fillColor = bottom.band ?? top.band;
-            if (!fillColor) continue;
             const bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = fillColor;
+            ctx.fillStyle = bandColor;
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
+          ctx.strokeStyle = drawing.color;
           applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
           for (const level of levelLines) {
-            ctx.strokeStyle = level.color;
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
@@ -2124,7 +2162,7 @@ function createChart(element, options = {}) {
           }
           ctx.restore();
           ctx.save();
-          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
           ctx.setLineDash([4, 4]);
           ctx.lineWidth = 1;
           ctx.beginPath();
@@ -2144,7 +2182,7 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = level.color;
+            ctx.fillStyle = drawing.color;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
@@ -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.61",
+  "version": "0.1.63",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",