hyperprop-charting-library 0.1.151 → 0.1.152

package/dist/hyperprop-charting-library.cjs

@@ -3587,8 +3587,10 @@ var DEFAULT_LABELS_OPTIONS = {
   showIndicatorValues: false,
   showIndicatorValueLabels: true,
   indicatorLegendPosition: "top-left",
-  indicatorLegendOffsetX: 10,
-  indicatorLegendOffsetY: 10,
+  // One inset for the whole top-left block (data line + legend), so the gap
+  // from the left edge matches the gap from the top.
+  indicatorLegendOffsetX: 12,
+  indicatorLegendOffsetY: 12,
   showCountdownToBarClose: false,
   noOverlapping: true,
   backgroundColor: "#0b1220",
@@ -8264,6 +8266,8 @@ function createChart(element, options = {}) {
     for (const orderLine of orderLines) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    const legendInsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
+    const legendInsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
     let dataLineBottom = chartTop;
     const dataLine = mergedOptions.dataLine;
     if (dataLine?.visible && data.length > 0) {
@@ -8280,8 +8284,8 @@ function createChart(element, options = {}) {
         const textColor = dataLine.textColor || labels.indicatorTextColor;
         const changeAbs = bar.c - bar.o;
         const changeColor = changeAbs >= 0 ? mergedOptions.upColor : mergedOptions.downColor;
-        const rowY = chartTop + 6;
-        let cursorX = chartLeft + 10;
+        const rowY = chartTop + legendInsetY;
+        let cursorX = chartLeft + legendInsetX;
         if (dataLine.statusColor) {
           const dotRadius = Math.max(2.5, fontSize / 4);
           ctx.fillStyle = dataLine.statusColor;
@@ -8327,7 +8331,7 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 4;
+        dataLineBottom = rowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }
@@ -8357,8 +8361,8 @@ function createChart(element, options = {}) {
         const prevFont = ctx.font;
         const legendFontSize = Math.max(8, axis.fontSize);
         ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
-        const offsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
-        const offsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
+        const offsetX = legendInsetX;
+        const offsetY = legendInsetY;
         const position = labels.indicatorLegendPosition;
         const isRight = position === "top-right" || position === "bottom-right";
         const isBottom = position === "bottom-left" || position === "bottom-right";

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

@@ -844,6 +844,11 @@ interface LabelsOptions {
     showIndicatorValues?: boolean;
     showIndicatorValueLabels?: boolean;
     indicatorLegendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Inset of the whole top-left block — the data line and the indicator
+     * legend stacked under it — from the plot edges. Both axes use the same
+     * pair so the block never sits closer to the top than to the side.
+     */
     indicatorLegendOffsetX?: number;
     indicatorLegendOffsetY?: number;
     showCountdownToBarClose?: boolean;

package/dist/hyperprop-charting-library.js

@@ -3551,8 +3551,10 @@ var DEFAULT_LABELS_OPTIONS = {
   showIndicatorValues: false,
   showIndicatorValueLabels: true,
   indicatorLegendPosition: "top-left",
-  indicatorLegendOffsetX: 10,
-  indicatorLegendOffsetY: 10,
+  // One inset for the whole top-left block (data line + legend), so the gap
+  // from the left edge matches the gap from the top.
+  indicatorLegendOffsetX: 12,
+  indicatorLegendOffsetY: 12,
   showCountdownToBarClose: false,
   noOverlapping: true,
   backgroundColor: "#0b1220",
@@ -8228,6 +8230,8 @@ function createChart(element, options = {}) {
     for (const orderLine of orderLines) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    const legendInsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
+    const legendInsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
     let dataLineBottom = chartTop;
     const dataLine = mergedOptions.dataLine;
     if (dataLine?.visible && data.length > 0) {
@@ -8244,8 +8248,8 @@ function createChart(element, options = {}) {
         const textColor = dataLine.textColor || labels.indicatorTextColor;
         const changeAbs = bar.c - bar.o;
         const changeColor = changeAbs >= 0 ? mergedOptions.upColor : mergedOptions.downColor;
-        const rowY = chartTop + 6;
-        let cursorX = chartLeft + 10;
+        const rowY = chartTop + legendInsetY;
+        let cursorX = chartLeft + legendInsetX;
         if (dataLine.statusColor) {
           const dotRadius = Math.max(2.5, fontSize / 4);
           ctx.fillStyle = dataLine.statusColor;
@@ -8291,7 +8295,7 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 4;
+        dataLineBottom = rowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }
@@ -8321,8 +8325,8 @@ function createChart(element, options = {}) {
         const prevFont = ctx.font;
         const legendFontSize = Math.max(8, axis.fontSize);
         ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
-        const offsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
-        const offsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
+        const offsetX = legendInsetX;
+        const offsetY = legendInsetY;
         const position = labels.indicatorLegendPosition;
         const isRight = position === "top-right" || position === "bottom-right";
         const isBottom = position === "bottom-left" || position === "bottom-right";

package/dist/index.cjs

@@ -3587,8 +3587,10 @@ var DEFAULT_LABELS_OPTIONS = {
   showIndicatorValues: false,
   showIndicatorValueLabels: true,
   indicatorLegendPosition: "top-left",
-  indicatorLegendOffsetX: 10,
-  indicatorLegendOffsetY: 10,
+  // One inset for the whole top-left block (data line + legend), so the gap
+  // from the left edge matches the gap from the top.
+  indicatorLegendOffsetX: 12,
+  indicatorLegendOffsetY: 12,
   showCountdownToBarClose: false,
   noOverlapping: true,
   backgroundColor: "#0b1220",
@@ -8264,6 +8266,8 @@ function createChart(element, options = {}) {
     for (const orderLine of orderLines) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    const legendInsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
+    const legendInsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
     let dataLineBottom = chartTop;
     const dataLine = mergedOptions.dataLine;
     if (dataLine?.visible && data.length > 0) {
@@ -8280,8 +8284,8 @@ function createChart(element, options = {}) {
         const textColor = dataLine.textColor || labels.indicatorTextColor;
         const changeAbs = bar.c - bar.o;
         const changeColor = changeAbs >= 0 ? mergedOptions.upColor : mergedOptions.downColor;
-        const rowY = chartTop + 6;
-        let cursorX = chartLeft + 10;
+        const rowY = chartTop + legendInsetY;
+        let cursorX = chartLeft + legendInsetX;
         if (dataLine.statusColor) {
           const dotRadius = Math.max(2.5, fontSize / 4);
           ctx.fillStyle = dataLine.statusColor;
@@ -8327,7 +8331,7 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 4;
+        dataLineBottom = rowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }
@@ -8357,8 +8361,8 @@ function createChart(element, options = {}) {
         const prevFont = ctx.font;
         const legendFontSize = Math.max(8, axis.fontSize);
         ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
-        const offsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
-        const offsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
+        const offsetX = legendInsetX;
+        const offsetY = legendInsetY;
         const position = labels.indicatorLegendPosition;
         const isRight = position === "top-right" || position === "bottom-right";
         const isBottom = position === "bottom-left" || position === "bottom-right";

package/dist/index.d.cts

@@ -844,6 +844,11 @@ interface LabelsOptions {
     showIndicatorValues?: boolean;
     showIndicatorValueLabels?: boolean;
     indicatorLegendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Inset of the whole top-left block — the data line and the indicator
+     * legend stacked under it — from the plot edges. Both axes use the same
+     * pair so the block never sits closer to the top than to the side.
+     */
     indicatorLegendOffsetX?: number;
     indicatorLegendOffsetY?: number;
     showCountdownToBarClose?: boolean;

package/dist/index.d.ts

@@ -844,6 +844,11 @@ interface LabelsOptions {
     showIndicatorValues?: boolean;
     showIndicatorValueLabels?: boolean;
     indicatorLegendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Inset of the whole top-left block — the data line and the indicator
+     * legend stacked under it — from the plot edges. Both axes use the same
+     * pair so the block never sits closer to the top than to the side.
+     */
     indicatorLegendOffsetX?: number;
     indicatorLegendOffsetY?: number;
     showCountdownToBarClose?: boolean;

package/dist/index.js

@@ -3551,8 +3551,10 @@ var DEFAULT_LABELS_OPTIONS = {
   showIndicatorValues: false,
   showIndicatorValueLabels: true,
   indicatorLegendPosition: "top-left",
-  indicatorLegendOffsetX: 10,
-  indicatorLegendOffsetY: 10,
+  // One inset for the whole top-left block (data line + legend), so the gap
+  // from the left edge matches the gap from the top.
+  indicatorLegendOffsetX: 12,
+  indicatorLegendOffsetY: 12,
   showCountdownToBarClose: false,
   noOverlapping: true,
   backgroundColor: "#0b1220",
@@ -8228,6 +8230,8 @@ function createChart(element, options = {}) {
     for (const orderLine of orderLines) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    const legendInsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
+    const legendInsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
     let dataLineBottom = chartTop;
     const dataLine = mergedOptions.dataLine;
     if (dataLine?.visible && data.length > 0) {
@@ -8244,8 +8248,8 @@ function createChart(element, options = {}) {
         const textColor = dataLine.textColor || labels.indicatorTextColor;
         const changeAbs = bar.c - bar.o;
         const changeColor = changeAbs >= 0 ? mergedOptions.upColor : mergedOptions.downColor;
-        const rowY = chartTop + 6;
-        let cursorX = chartLeft + 10;
+        const rowY = chartTop + legendInsetY;
+        let cursorX = chartLeft + legendInsetX;
         if (dataLine.statusColor) {
           const dotRadius = Math.max(2.5, fontSize / 4);
           ctx.fillStyle = dataLine.statusColor;
@@ -8291,7 +8295,7 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 4;
+        dataLineBottom = rowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }
@@ -8321,8 +8325,8 @@ function createChart(element, options = {}) {
         const prevFont = ctx.font;
         const legendFontSize = Math.max(8, axis.fontSize);
         ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
-        const offsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
-        const offsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
+        const offsetX = legendInsetX;
+        const offsetY = legendInsetY;
         const position = labels.indicatorLegendPosition;
         const isRight = position === "top-right" || position === "bottom-right";
         const isBottom = position === "bottom-left" || position === "bottom-right";

package/package.json

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