hyperprop-charting-library 0.1.13 → 0.1.14

package/README.md

@@ -46,6 +46,18 @@ const chart = createChart(root, {
 });
 ```
 
+## Stable Price Labels (No Shake)
+
+If fast ticks make right-side labels jitter, keep width stable:
+
+```ts
+const chart = createChart(root, {
+  priceDecimals: 2,
+  stabilizePriceLabels: true,
+  priceLabelMinIntegerDigits: 4
+});
+```
+
 ## Full Documentation
 
 - API reference: `docs/API.md`

package/dist/hyperprop-charting-library.cjs

@@ -108,6 +108,8 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   actionButtonFontWeight: 500,
   actionButtonBorderColor: "#2563eb",
   actionButtonBorderStyle: "solid",
+  actionButtonsInnerGap: 6,
+  actionButtonsGroupGap: 8,
   actionButtons: [],
   connectorToPrice: Number.NaN,
   connectorColor: "#2563eb",
@@ -124,6 +126,8 @@ var DEFAULT_OPTIONS = {
   axisColor: "#7f8289",
   axis: DEFAULT_AXIS_OPTIONS,
   priceDecimals: 2,
+  stabilizePriceLabels: true,
+  priceLabelMinIntegerDigits: 3,
   initialViewport: "latest",
   initialVisibleBars: 60,
   minVisibleBars: 5,
@@ -363,6 +367,27 @@ function createChart(element, options = {}) {
     const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
     return price.toFixed(decimals);
   };
+  const getStabilizedPriceTemplate = () => {
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    const configuredDigits = Math.max(1, Math.floor(mergedOptions.priceLabelMinIntegerDigits));
+    let maxAbsPrice = 0;
+    for (const point of data) {
+      maxAbsPrice = Math.max(maxAbsPrice, Math.abs(point.o), Math.abs(point.h), Math.abs(point.l), Math.abs(point.c));
+    }
+    const observedDigits = maxAbsPrice >= 1 ? Math.floor(Math.log10(maxAbsPrice)) + 1 : 1;
+    const integerDigits = Math.max(configuredDigits, observedDigits);
+    const integerPart = "8".repeat(integerDigits);
+    const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
+    return `${integerPart}${decimalPart}`;
+  };
+  const getPriceLabelWidth = (priceText, paddingX) => {
+    const measured = Math.ceil(ctx.measureText(priceText).width) + paddingX * 2;
+    if (!mergedOptions.stabilizePriceLabels) {
+      return measured;
+    }
+    const templateWidth = Math.ceil(ctx.measureText(getStabilizedPriceTemplate()).width) + paddingX * 2;
+    return Math.max(measured, templateWidth);
+  };
   const parseData = (nextData) => {
     return nextData.map((point) => ({
       time: new Date(point.t),
@@ -481,7 +506,7 @@ function createChart(element, options = {}) {
     ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
     const labelPaddingX = 8;
     const labelHeight = 20;
-    const labelWidth = Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
+    const labelWidth = mergedLine.label === void 0 ? getPriceLabelWidth(labelText, labelPaddingX) : Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
     const labelX = chartRight + 4;
     const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
     ctx.fillStyle = mergedLine.labelBackgroundColor;
@@ -583,9 +608,9 @@ function createChart(element, options = {}) {
       const width2 = Math.max(minWidth, Math.ceil(ctx.measureText(button.text).width) + paddingX * 2);
       return { button, width: width2 };
     });
-    const actionButtonInnerGap = actionButtonMetrics.length > 1 ? 4 : 0;
+    const actionButtonInnerGap = actionButtonMetrics.length > 1 ? Math.max(0, mergedLine.actionButtonsInnerGap) : 0;
     const actionButtonsTotalWidth = actionButtonMetrics.reduce((sum, metric) => sum + metric.width, 0) + Math.max(0, actionButtonMetrics.length - 1) * actionButtonInnerGap;
-    const actionButtonsGap = actionButtonMetrics.length > 0 ? 6 : 0;
+    const actionButtonsGap = actionButtonMetrics.length > 0 ? Math.max(0, mergedLine.actionButtonsGroupGap) : 0;
     const segmentPaddingX = 8;
     const labelHeight = 22;
     const qtyWidth = qtyText ? Math.ceil(ctx.measureText(qtyText).width) + segmentPaddingX * 2 : 0;
@@ -709,7 +734,7 @@ function createChart(element, options = {}) {
     }
     const priceText = formatPrice(renderPrice);
     const pricePaddingX = 8;
-    const measuredPriceWidth = Math.ceil(ctx.measureText(priceText).width) + pricePaddingX * 2;
+    const measuredPriceWidth = getPriceLabelWidth(priceText, pricePaddingX);
     const priceWidth = mergedLine.id === void 0 ? measuredPriceWidth : Math.max(measuredPriceWidth, orderPriceTagWidthById.get(mergedLine.id) ?? 0);
     if (mergedLine.id) {
       orderPriceTagWidthById.set(mergedLine.id, priceWidth);
@@ -1036,7 +1061,7 @@ function createChart(element, options = {}) {
       ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
       const labelPaddingX = 8;
       const labelHeight = 20;
-      const labelWidth = Math.ceil(ctx.measureText(tickerLabel).width) + labelPaddingX * 2;
+      const labelWidth = getPriceLabelWidth(tickerLabel, labelPaddingX);
       const labelX = chartRight + 4;
       const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
       const labelRadius = Math.max(0, ticker.labelBorderRadius ?? 0);
@@ -1109,7 +1134,7 @@ function createChart(element, options = {}) {
       if (crosshair.showPriceLabel) {
         const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
         const priceText = formatPrice(hoverPrice);
-        const priceWidth = Math.ceil(ctx.measureText(priceText).width) + labelPaddingX * 2;
+        const priceWidth = getPriceLabelWidth(priceText, labelPaddingX);
         const priceX = chartRight + 4;
         const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
         ctx.fillStyle = labelBackground;

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

@@ -5,6 +5,8 @@ interface ChartOptions {
     axisColor?: string;
     axis?: AxisOptions;
     priceDecimals?: number;
+    stabilizePriceLabels?: boolean;
+    priceLabelMinIntegerDigits?: number;
     initialViewport?: "latest" | "center";
     initialVisibleBars?: number;
     minVisibleBars?: number;
@@ -128,6 +130,8 @@ interface OrderLineOptions {
     actionButtonFontWeight?: number | string;
     actionButtonBorderColor?: string;
     actionButtonBorderStyle?: "solid" | "dotted" | "dashed";
+    actionButtonsInnerGap?: number;
+    actionButtonsGroupGap?: number;
     actionButtons?: OrderActionButton[];
     connectorToPrice?: number;
     connectorColor?: string;

package/dist/hyperprop-charting-library.js

@@ -84,6 +84,8 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   actionButtonFontWeight: 500,
   actionButtonBorderColor: "#2563eb",
   actionButtonBorderStyle: "solid",
+  actionButtonsInnerGap: 6,
+  actionButtonsGroupGap: 8,
   actionButtons: [],
   connectorToPrice: Number.NaN,
   connectorColor: "#2563eb",
@@ -100,6 +102,8 @@ var DEFAULT_OPTIONS = {
   axisColor: "#7f8289",
   axis: DEFAULT_AXIS_OPTIONS,
   priceDecimals: 2,
+  stabilizePriceLabels: true,
+  priceLabelMinIntegerDigits: 3,
   initialViewport: "latest",
   initialVisibleBars: 60,
   minVisibleBars: 5,
@@ -339,6 +343,27 @@ function createChart(element, options = {}) {
     const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
     return price.toFixed(decimals);
   };
+  const getStabilizedPriceTemplate = () => {
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    const configuredDigits = Math.max(1, Math.floor(mergedOptions.priceLabelMinIntegerDigits));
+    let maxAbsPrice = 0;
+    for (const point of data) {
+      maxAbsPrice = Math.max(maxAbsPrice, Math.abs(point.o), Math.abs(point.h), Math.abs(point.l), Math.abs(point.c));
+    }
+    const observedDigits = maxAbsPrice >= 1 ? Math.floor(Math.log10(maxAbsPrice)) + 1 : 1;
+    const integerDigits = Math.max(configuredDigits, observedDigits);
+    const integerPart = "8".repeat(integerDigits);
+    const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
+    return `${integerPart}${decimalPart}`;
+  };
+  const getPriceLabelWidth = (priceText, paddingX) => {
+    const measured = Math.ceil(ctx.measureText(priceText).width) + paddingX * 2;
+    if (!mergedOptions.stabilizePriceLabels) {
+      return measured;
+    }
+    const templateWidth = Math.ceil(ctx.measureText(getStabilizedPriceTemplate()).width) + paddingX * 2;
+    return Math.max(measured, templateWidth);
+  };
   const parseData = (nextData) => {
     return nextData.map((point) => ({
       time: new Date(point.t),
@@ -457,7 +482,7 @@ function createChart(element, options = {}) {
     ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
     const labelPaddingX = 8;
     const labelHeight = 20;
-    const labelWidth = Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
+    const labelWidth = mergedLine.label === void 0 ? getPriceLabelWidth(labelText, labelPaddingX) : Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
     const labelX = chartRight + 4;
     const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
     ctx.fillStyle = mergedLine.labelBackgroundColor;
@@ -559,9 +584,9 @@ function createChart(element, options = {}) {
       const width2 = Math.max(minWidth, Math.ceil(ctx.measureText(button.text).width) + paddingX * 2);
       return { button, width: width2 };
     });
-    const actionButtonInnerGap = actionButtonMetrics.length > 1 ? 4 : 0;
+    const actionButtonInnerGap = actionButtonMetrics.length > 1 ? Math.max(0, mergedLine.actionButtonsInnerGap) : 0;
     const actionButtonsTotalWidth = actionButtonMetrics.reduce((sum, metric) => sum + metric.width, 0) + Math.max(0, actionButtonMetrics.length - 1) * actionButtonInnerGap;
-    const actionButtonsGap = actionButtonMetrics.length > 0 ? 6 : 0;
+    const actionButtonsGap = actionButtonMetrics.length > 0 ? Math.max(0, mergedLine.actionButtonsGroupGap) : 0;
     const segmentPaddingX = 8;
     const labelHeight = 22;
     const qtyWidth = qtyText ? Math.ceil(ctx.measureText(qtyText).width) + segmentPaddingX * 2 : 0;
@@ -685,7 +710,7 @@ function createChart(element, options = {}) {
     }
     const priceText = formatPrice(renderPrice);
     const pricePaddingX = 8;
-    const measuredPriceWidth = Math.ceil(ctx.measureText(priceText).width) + pricePaddingX * 2;
+    const measuredPriceWidth = getPriceLabelWidth(priceText, pricePaddingX);
     const priceWidth = mergedLine.id === void 0 ? measuredPriceWidth : Math.max(measuredPriceWidth, orderPriceTagWidthById.get(mergedLine.id) ?? 0);
     if (mergedLine.id) {
       orderPriceTagWidthById.set(mergedLine.id, priceWidth);
@@ -1012,7 +1037,7 @@ function createChart(element, options = {}) {
       ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
       const labelPaddingX = 8;
       const labelHeight = 20;
-      const labelWidth = Math.ceil(ctx.measureText(tickerLabel).width) + labelPaddingX * 2;
+      const labelWidth = getPriceLabelWidth(tickerLabel, labelPaddingX);
       const labelX = chartRight + 4;
       const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
       const labelRadius = Math.max(0, ticker.labelBorderRadius ?? 0);
@@ -1085,7 +1110,7 @@ function createChart(element, options = {}) {
       if (crosshair.showPriceLabel) {
         const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
         const priceText = formatPrice(hoverPrice);
-        const priceWidth = Math.ceil(ctx.measureText(priceText).width) + labelPaddingX * 2;
+        const priceWidth = getPriceLabelWidth(priceText, labelPaddingX);
         const priceX = chartRight + 4;
         const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
         ctx.fillStyle = labelBackground;

package/dist/index.cjs

@@ -108,6 +108,8 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   actionButtonFontWeight: 500,
   actionButtonBorderColor: "#2563eb",
   actionButtonBorderStyle: "solid",
+  actionButtonsInnerGap: 6,
+  actionButtonsGroupGap: 8,
   actionButtons: [],
   connectorToPrice: Number.NaN,
   connectorColor: "#2563eb",
@@ -124,6 +126,8 @@ var DEFAULT_OPTIONS = {
   axisColor: "#7f8289",
   axis: DEFAULT_AXIS_OPTIONS,
   priceDecimals: 2,
+  stabilizePriceLabels: true,
+  priceLabelMinIntegerDigits: 3,
   initialViewport: "latest",
   initialVisibleBars: 60,
   minVisibleBars: 5,
@@ -363,6 +367,27 @@ function createChart(element, options = {}) {
     const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
     return price.toFixed(decimals);
   };
+  const getStabilizedPriceTemplate = () => {
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    const configuredDigits = Math.max(1, Math.floor(mergedOptions.priceLabelMinIntegerDigits));
+    let maxAbsPrice = 0;
+    for (const point of data) {
+      maxAbsPrice = Math.max(maxAbsPrice, Math.abs(point.o), Math.abs(point.h), Math.abs(point.l), Math.abs(point.c));
+    }
+    const observedDigits = maxAbsPrice >= 1 ? Math.floor(Math.log10(maxAbsPrice)) + 1 : 1;
+    const integerDigits = Math.max(configuredDigits, observedDigits);
+    const integerPart = "8".repeat(integerDigits);
+    const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
+    return `${integerPart}${decimalPart}`;
+  };
+  const getPriceLabelWidth = (priceText, paddingX) => {
+    const measured = Math.ceil(ctx.measureText(priceText).width) + paddingX * 2;
+    if (!mergedOptions.stabilizePriceLabels) {
+      return measured;
+    }
+    const templateWidth = Math.ceil(ctx.measureText(getStabilizedPriceTemplate()).width) + paddingX * 2;
+    return Math.max(measured, templateWidth);
+  };
   const parseData = (nextData) => {
     return nextData.map((point) => ({
       time: new Date(point.t),
@@ -481,7 +506,7 @@ function createChart(element, options = {}) {
     ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
     const labelPaddingX = 8;
     const labelHeight = 20;
-    const labelWidth = Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
+    const labelWidth = mergedLine.label === void 0 ? getPriceLabelWidth(labelText, labelPaddingX) : Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
     const labelX = chartRight + 4;
     const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
     ctx.fillStyle = mergedLine.labelBackgroundColor;
@@ -583,9 +608,9 @@ function createChart(element, options = {}) {
       const width2 = Math.max(minWidth, Math.ceil(ctx.measureText(button.text).width) + paddingX * 2);
       return { button, width: width2 };
     });
-    const actionButtonInnerGap = actionButtonMetrics.length > 1 ? 4 : 0;
+    const actionButtonInnerGap = actionButtonMetrics.length > 1 ? Math.max(0, mergedLine.actionButtonsInnerGap) : 0;
     const actionButtonsTotalWidth = actionButtonMetrics.reduce((sum, metric) => sum + metric.width, 0) + Math.max(0, actionButtonMetrics.length - 1) * actionButtonInnerGap;
-    const actionButtonsGap = actionButtonMetrics.length > 0 ? 6 : 0;
+    const actionButtonsGap = actionButtonMetrics.length > 0 ? Math.max(0, mergedLine.actionButtonsGroupGap) : 0;
     const segmentPaddingX = 8;
     const labelHeight = 22;
     const qtyWidth = qtyText ? Math.ceil(ctx.measureText(qtyText).width) + segmentPaddingX * 2 : 0;
@@ -709,7 +734,7 @@ function createChart(element, options = {}) {
     }
     const priceText = formatPrice(renderPrice);
     const pricePaddingX = 8;
-    const measuredPriceWidth = Math.ceil(ctx.measureText(priceText).width) + pricePaddingX * 2;
+    const measuredPriceWidth = getPriceLabelWidth(priceText, pricePaddingX);
     const priceWidth = mergedLine.id === void 0 ? measuredPriceWidth : Math.max(measuredPriceWidth, orderPriceTagWidthById.get(mergedLine.id) ?? 0);
     if (mergedLine.id) {
       orderPriceTagWidthById.set(mergedLine.id, priceWidth);
@@ -1036,7 +1061,7 @@ function createChart(element, options = {}) {
       ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
       const labelPaddingX = 8;
       const labelHeight = 20;
-      const labelWidth = Math.ceil(ctx.measureText(tickerLabel).width) + labelPaddingX * 2;
+      const labelWidth = getPriceLabelWidth(tickerLabel, labelPaddingX);
       const labelX = chartRight + 4;
       const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
       const labelRadius = Math.max(0, ticker.labelBorderRadius ?? 0);
@@ -1109,7 +1134,7 @@ function createChart(element, options = {}) {
       if (crosshair.showPriceLabel) {
         const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
         const priceText = formatPrice(hoverPrice);
-        const priceWidth = Math.ceil(ctx.measureText(priceText).width) + labelPaddingX * 2;
+        const priceWidth = getPriceLabelWidth(priceText, labelPaddingX);
         const priceX = chartRight + 4;
         const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
         ctx.fillStyle = labelBackground;

package/dist/index.d.cts

@@ -5,6 +5,8 @@ interface ChartOptions {
     axisColor?: string;
     axis?: AxisOptions;
     priceDecimals?: number;
+    stabilizePriceLabels?: boolean;
+    priceLabelMinIntegerDigits?: number;
     initialViewport?: "latest" | "center";
     initialVisibleBars?: number;
     minVisibleBars?: number;
@@ -128,6 +130,8 @@ interface OrderLineOptions {
     actionButtonFontWeight?: number | string;
     actionButtonBorderColor?: string;
     actionButtonBorderStyle?: "solid" | "dotted" | "dashed";
+    actionButtonsInnerGap?: number;
+    actionButtonsGroupGap?: number;
     actionButtons?: OrderActionButton[];
     connectorToPrice?: number;
     connectorColor?: string;

package/dist/index.d.ts

@@ -5,6 +5,8 @@ interface ChartOptions {
     axisColor?: string;
     axis?: AxisOptions;
     priceDecimals?: number;
+    stabilizePriceLabels?: boolean;
+    priceLabelMinIntegerDigits?: number;
     initialViewport?: "latest" | "center";
     initialVisibleBars?: number;
     minVisibleBars?: number;
@@ -128,6 +130,8 @@ interface OrderLineOptions {
     actionButtonFontWeight?: number | string;
     actionButtonBorderColor?: string;
     actionButtonBorderStyle?: "solid" | "dotted" | "dashed";
+    actionButtonsInnerGap?: number;
+    actionButtonsGroupGap?: number;
     actionButtons?: OrderActionButton[];
     connectorToPrice?: number;
     connectorColor?: string;

package/dist/index.js

@@ -84,6 +84,8 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   actionButtonFontWeight: 500,
   actionButtonBorderColor: "#2563eb",
   actionButtonBorderStyle: "solid",
+  actionButtonsInnerGap: 6,
+  actionButtonsGroupGap: 8,
   actionButtons: [],
   connectorToPrice: Number.NaN,
   connectorColor: "#2563eb",
@@ -100,6 +102,8 @@ var DEFAULT_OPTIONS = {
   axisColor: "#7f8289",
   axis: DEFAULT_AXIS_OPTIONS,
   priceDecimals: 2,
+  stabilizePriceLabels: true,
+  priceLabelMinIntegerDigits: 3,
   initialViewport: "latest",
   initialVisibleBars: 60,
   minVisibleBars: 5,
@@ -339,6 +343,27 @@ function createChart(element, options = {}) {
     const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
     return price.toFixed(decimals);
   };
+  const getStabilizedPriceTemplate = () => {
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    const configuredDigits = Math.max(1, Math.floor(mergedOptions.priceLabelMinIntegerDigits));
+    let maxAbsPrice = 0;
+    for (const point of data) {
+      maxAbsPrice = Math.max(maxAbsPrice, Math.abs(point.o), Math.abs(point.h), Math.abs(point.l), Math.abs(point.c));
+    }
+    const observedDigits = maxAbsPrice >= 1 ? Math.floor(Math.log10(maxAbsPrice)) + 1 : 1;
+    const integerDigits = Math.max(configuredDigits, observedDigits);
+    const integerPart = "8".repeat(integerDigits);
+    const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
+    return `${integerPart}${decimalPart}`;
+  };
+  const getPriceLabelWidth = (priceText, paddingX) => {
+    const measured = Math.ceil(ctx.measureText(priceText).width) + paddingX * 2;
+    if (!mergedOptions.stabilizePriceLabels) {
+      return measured;
+    }
+    const templateWidth = Math.ceil(ctx.measureText(getStabilizedPriceTemplate()).width) + paddingX * 2;
+    return Math.max(measured, templateWidth);
+  };
   const parseData = (nextData) => {
     return nextData.map((point) => ({
       time: new Date(point.t),
@@ -457,7 +482,7 @@ function createChart(element, options = {}) {
     ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
     const labelPaddingX = 8;
     const labelHeight = 20;
-    const labelWidth = Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
+    const labelWidth = mergedLine.label === void 0 ? getPriceLabelWidth(labelText, labelPaddingX) : Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
     const labelX = chartRight + 4;
     const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
     ctx.fillStyle = mergedLine.labelBackgroundColor;
@@ -559,9 +584,9 @@ function createChart(element, options = {}) {
       const width2 = Math.max(minWidth, Math.ceil(ctx.measureText(button.text).width) + paddingX * 2);
       return { button, width: width2 };
     });
-    const actionButtonInnerGap = actionButtonMetrics.length > 1 ? 4 : 0;
+    const actionButtonInnerGap = actionButtonMetrics.length > 1 ? Math.max(0, mergedLine.actionButtonsInnerGap) : 0;
     const actionButtonsTotalWidth = actionButtonMetrics.reduce((sum, metric) => sum + metric.width, 0) + Math.max(0, actionButtonMetrics.length - 1) * actionButtonInnerGap;
-    const actionButtonsGap = actionButtonMetrics.length > 0 ? 6 : 0;
+    const actionButtonsGap = actionButtonMetrics.length > 0 ? Math.max(0, mergedLine.actionButtonsGroupGap) : 0;
     const segmentPaddingX = 8;
     const labelHeight = 22;
     const qtyWidth = qtyText ? Math.ceil(ctx.measureText(qtyText).width) + segmentPaddingX * 2 : 0;
@@ -685,7 +710,7 @@ function createChart(element, options = {}) {
     }
     const priceText = formatPrice(renderPrice);
     const pricePaddingX = 8;
-    const measuredPriceWidth = Math.ceil(ctx.measureText(priceText).width) + pricePaddingX * 2;
+    const measuredPriceWidth = getPriceLabelWidth(priceText, pricePaddingX);
     const priceWidth = mergedLine.id === void 0 ? measuredPriceWidth : Math.max(measuredPriceWidth, orderPriceTagWidthById.get(mergedLine.id) ?? 0);
     if (mergedLine.id) {
       orderPriceTagWidthById.set(mergedLine.id, priceWidth);
@@ -1012,7 +1037,7 @@ function createChart(element, options = {}) {
       ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
       const labelPaddingX = 8;
       const labelHeight = 20;
-      const labelWidth = Math.ceil(ctx.measureText(tickerLabel).width) + labelPaddingX * 2;
+      const labelWidth = getPriceLabelWidth(tickerLabel, labelPaddingX);
       const labelX = chartRight + 4;
       const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
       const labelRadius = Math.max(0, ticker.labelBorderRadius ?? 0);
@@ -1085,7 +1110,7 @@ function createChart(element, options = {}) {
       if (crosshair.showPriceLabel) {
         const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
         const priceText = formatPrice(hoverPrice);
-        const priceWidth = Math.ceil(ctx.measureText(priceText).width) + labelPaddingX * 2;
+        const priceWidth = getPriceLabelWidth(priceText, labelPaddingX);
         const priceX = chartRight + 4;
         const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
         ctx.fillStyle = labelBackground;

package/docs/API.md

@@ -33,6 +33,8 @@ Top-level options:
 - `axisColor` (legacy shorthand for axis line/text color)
 - `axis?: AxisOptions`
 - `priceDecimals` (default `2`, used for axis/ticker/line price labels)
+- `stabilizePriceLabels` (default `true`, prevents ticker/crosshair/price-tag width jitter)
+- `priceLabelMinIntegerDigits` (default `3`, baseline integer-digit width for stabilized labels)
 - `initialViewport` (`"latest"` | `"center"`, default `"latest"`)
 - `initialVisibleBars` (default `60`)
 - `minVisibleBars` (default `5`, lower clamp for x zoom)
@@ -208,6 +210,8 @@ Legacy single action button:
 - `actionButtonFontWeight?: number | string`
 - `actionButtonBorderColor?: string`
 - `actionButtonBorderStyle?: "solid" | "dotted" | "dashed"`
+- `actionButtonsInnerGap?: number` (default `6`, spacing between action buttons)
+- `actionButtonsGroupGap?: number` (default `8`, spacing between action-button group and main order widget)
 
 Multi-button actions:
 

package/docs/RECIPES.md

@@ -51,6 +51,16 @@ const chart = createChart(root, {
 });
 ```
 
+## Keep price labels from shaking on fast ticks
+
+```ts
+const chart = createChart(root, {
+  priceDecimals: 2,
+  stabilizePriceLabels: true,
+  priceLabelMinIntegerDigits: 4
+});
+```
+
 ## Add a draggable pending limit line
 
 ```ts

package/package.json

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