hyperprop-charting-library 0.1.122 → 0.1.124

package/dist/hyperprop-charting-library.cjs

@@ -222,6 +222,7 @@ var DEFAULT_OPTIONS = {
   autoScaleIgnoreLatestCandle: true,
   kineticScroll: { touch: true, mouse: false },
   timeStepMs: 0,
+  clockOffsetMs: 0,
   pinOutOfRangeLines: false,
   doubleClickEnabled: true,
   doubleClickAction: "reset",
@@ -1363,7 +1364,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -1800,6 +1801,56 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const indexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    const firstMs = data[0].time.getTime();
+    const lastMs = data[data.length - 1].time.getTime();
+    if (timeMs < firstMs) {
+      const stepMs = getTimeStepMs();
+      return stepMs > 0 ? (timeMs - firstMs) / stepMs : 0;
+    }
+    if (timeMs > lastMs) {
+      const stepMs = getTimeStepMs();
+      return data.length - 1 + (stepMs > 0 ? (timeMs - lastMs) / stepMs : 0);
+    }
+    return findNearestIndexForTimeMs(timeMs);
+  };
+  const reanchorDrawingPoint = (point) => {
+    if (!point.time) {
+      return point;
+    }
+    const timeMs = Date.parse(point.time);
+    if (!Number.isFinite(timeMs)) {
+      return point;
+    }
+    const rounded = Math.round(point.index);
+    if (data[rounded]?.time.getTime() === timeMs) {
+      return point;
+    }
+    const mapped = indexForTimeMs(timeMs);
+    if (mapped === null) {
+      return point;
+    }
+    const fraction = point.index - rounded;
+    return { ...point, index: mapped + fraction };
+  };
+  const reanchorDrawingsToData = () => {
+    if (data.length === 0) {
+      return;
+    }
+    drawings = drawings.map((drawing) => ({
+      ...drawing,
+      points: drawing.points.map((point) => reanchorDrawingPoint(point))
+    }));
+    if (draftDrawing) {
+      draftDrawing = {
+        ...draftDrawing,
+        points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
+      };
+    }
+  };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
     if (!point) {
@@ -3639,7 +3690,8 @@ function createChart(element, options = {}) {
         return null;
       }
       const stepMs = getTimeStepMs();
-      const elapsedMs = Date.now() - last.time.getTime();
+      const nowMs = Date.now() + (Number(mergedOptions.clockOffsetMs) || 0);
+      const elapsedMs = nowMs - last.time.getTime();
       const countdownMs = elapsedMs >= 0 ? stepMs - elapsedMs % stepMs : Math.min(stepMs, stepMs - elapsedMs);
       return formatDuration(countdownMs);
     };
@@ -3893,7 +3945,8 @@ function createChart(element, options = {}) {
     }
     if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
       const stepMs = getTimeStepMs();
-      const elapsedMs = Date.now() - lastPoint.time.getTime();
+      const nowMs = Date.now() + (Number(mergedOptions.clockOffsetMs) || 0);
+      const elapsedMs = nowMs - lastPoint.time.getTime();
       const countdownMs = elapsedMs >= 0 ? stepMs - elapsedMs % stepMs : Math.min(stepMs, stepMs - elapsedMs);
       const countdownText = formatDuration(countdownMs);
       const prevFont = ctx.font;
@@ -5782,6 +5835,7 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    reanchorDrawingsToData();
     const lastPoint = data[data.length - 1];
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
@@ -5828,6 +5882,7 @@ function createChart(element, options = {}) {
       }
       merged.set(timeMs, parsed);
       data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+      reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
     scheduleDraw();
@@ -6010,11 +6065,13 @@ function createChart(element, options = {}) {
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
+    reanchorDrawingsToData();
     emitDrawingsChange();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
+    next.points = next.points.map((point) => reanchorDrawingPoint(point));
     drawings.push(next);
     emitDrawingsChange();
     scheduleDraw();
@@ -6026,7 +6083,7 @@ function createChart(element, options = {}) {
         ...serializeDrawing(drawing),
         ...patch,
         id,
-        points: patch.points ?? drawing.points
+        points: (patch.points ?? drawing.points).map((point) => reanchorDrawingPoint(point))
       }) : drawing
     );
     emitDrawingsChange();

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

@@ -45,6 +45,14 @@ interface ChartOptions {
      * futures data with sparse back-month eras). 0/undefined = infer.
      */
     timeStepMs?: number;
+    /**
+     * Correction added to the machine's clock for time-sensitive rendering
+     * (bar-close countdowns): exchangeNow ≈ Date.now() + clockOffsetMs. Hosts
+     * should derive it from exchange-stamped ticks; without it a skewed local
+     * clock freezes the countdown at one full interval (bars arrive stamped
+     * "in the future") or makes it run visibly early/late.
+     */
+    clockOffsetMs?: number;
     pinOutOfRangeLines?: boolean;
     doubleClickEnabled?: boolean;
     doubleClickAction?: "reset" | "placeLimitOrder";

package/dist/hyperprop-charting-library.js

@@ -196,6 +196,7 @@ var DEFAULT_OPTIONS = {
   autoScaleIgnoreLatestCandle: true,
   kineticScroll: { touch: true, mouse: false },
   timeStepMs: 0,
+  clockOffsetMs: 0,
   pinOutOfRangeLines: false,
   doubleClickEnabled: true,
   doubleClickAction: "reset",
@@ -1337,7 +1338,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -1774,6 +1775,56 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const indexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    const firstMs = data[0].time.getTime();
+    const lastMs = data[data.length - 1].time.getTime();
+    if (timeMs < firstMs) {
+      const stepMs = getTimeStepMs();
+      return stepMs > 0 ? (timeMs - firstMs) / stepMs : 0;
+    }
+    if (timeMs > lastMs) {
+      const stepMs = getTimeStepMs();
+      return data.length - 1 + (stepMs > 0 ? (timeMs - lastMs) / stepMs : 0);
+    }
+    return findNearestIndexForTimeMs(timeMs);
+  };
+  const reanchorDrawingPoint = (point) => {
+    if (!point.time) {
+      return point;
+    }
+    const timeMs = Date.parse(point.time);
+    if (!Number.isFinite(timeMs)) {
+      return point;
+    }
+    const rounded = Math.round(point.index);
+    if (data[rounded]?.time.getTime() === timeMs) {
+      return point;
+    }
+    const mapped = indexForTimeMs(timeMs);
+    if (mapped === null) {
+      return point;
+    }
+    const fraction = point.index - rounded;
+    return { ...point, index: mapped + fraction };
+  };
+  const reanchorDrawingsToData = () => {
+    if (data.length === 0) {
+      return;
+    }
+    drawings = drawings.map((drawing) => ({
+      ...drawing,
+      points: drawing.points.map((point) => reanchorDrawingPoint(point))
+    }));
+    if (draftDrawing) {
+      draftDrawing = {
+        ...draftDrawing,
+        points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
+      };
+    }
+  };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
     if (!point) {
@@ -3613,7 +3664,8 @@ function createChart(element, options = {}) {
         return null;
       }
       const stepMs = getTimeStepMs();
-      const elapsedMs = Date.now() - last.time.getTime();
+      const nowMs = Date.now() + (Number(mergedOptions.clockOffsetMs) || 0);
+      const elapsedMs = nowMs - last.time.getTime();
       const countdownMs = elapsedMs >= 0 ? stepMs - elapsedMs % stepMs : Math.min(stepMs, stepMs - elapsedMs);
       return formatDuration(countdownMs);
     };
@@ -3867,7 +3919,8 @@ function createChart(element, options = {}) {
     }
     if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
       const stepMs = getTimeStepMs();
-      const elapsedMs = Date.now() - lastPoint.time.getTime();
+      const nowMs = Date.now() + (Number(mergedOptions.clockOffsetMs) || 0);
+      const elapsedMs = nowMs - lastPoint.time.getTime();
       const countdownMs = elapsedMs >= 0 ? stepMs - elapsedMs % stepMs : Math.min(stepMs, stepMs - elapsedMs);
       const countdownText = formatDuration(countdownMs);
       const prevFont = ctx.font;
@@ -5756,6 +5809,7 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    reanchorDrawingsToData();
     const lastPoint = data[data.length - 1];
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
@@ -5802,6 +5856,7 @@ function createChart(element, options = {}) {
       }
       merged.set(timeMs, parsed);
       data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+      reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
     scheduleDraw();
@@ -5984,11 +6039,13 @@ function createChart(element, options = {}) {
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
+    reanchorDrawingsToData();
     emitDrawingsChange();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
+    next.points = next.points.map((point) => reanchorDrawingPoint(point));
     drawings.push(next);
     emitDrawingsChange();
     scheduleDraw();
@@ -6000,7 +6057,7 @@ function createChart(element, options = {}) {
         ...serializeDrawing(drawing),
         ...patch,
         id,
-        points: patch.points ?? drawing.points
+        points: (patch.points ?? drawing.points).map((point) => reanchorDrawingPoint(point))
       }) : drawing
     );
     emitDrawingsChange();

package/dist/index.cjs

@@ -222,6 +222,7 @@ var DEFAULT_OPTIONS = {
   autoScaleIgnoreLatestCandle: true,
   kineticScroll: { touch: true, mouse: false },
   timeStepMs: 0,
+  clockOffsetMs: 0,
   pinOutOfRangeLines: false,
   doubleClickEnabled: true,
   doubleClickAction: "reset",
@@ -1363,7 +1364,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -1800,6 +1801,56 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const indexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    const firstMs = data[0].time.getTime();
+    const lastMs = data[data.length - 1].time.getTime();
+    if (timeMs < firstMs) {
+      const stepMs = getTimeStepMs();
+      return stepMs > 0 ? (timeMs - firstMs) / stepMs : 0;
+    }
+    if (timeMs > lastMs) {
+      const stepMs = getTimeStepMs();
+      return data.length - 1 + (stepMs > 0 ? (timeMs - lastMs) / stepMs : 0);
+    }
+    return findNearestIndexForTimeMs(timeMs);
+  };
+  const reanchorDrawingPoint = (point) => {
+    if (!point.time) {
+      return point;
+    }
+    const timeMs = Date.parse(point.time);
+    if (!Number.isFinite(timeMs)) {
+      return point;
+    }
+    const rounded = Math.round(point.index);
+    if (data[rounded]?.time.getTime() === timeMs) {
+      return point;
+    }
+    const mapped = indexForTimeMs(timeMs);
+    if (mapped === null) {
+      return point;
+    }
+    const fraction = point.index - rounded;
+    return { ...point, index: mapped + fraction };
+  };
+  const reanchorDrawingsToData = () => {
+    if (data.length === 0) {
+      return;
+    }
+    drawings = drawings.map((drawing) => ({
+      ...drawing,
+      points: drawing.points.map((point) => reanchorDrawingPoint(point))
+    }));
+    if (draftDrawing) {
+      draftDrawing = {
+        ...draftDrawing,
+        points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
+      };
+    }
+  };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
     if (!point) {
@@ -3639,7 +3690,8 @@ function createChart(element, options = {}) {
         return null;
       }
       const stepMs = getTimeStepMs();
-      const elapsedMs = Date.now() - last.time.getTime();
+      const nowMs = Date.now() + (Number(mergedOptions.clockOffsetMs) || 0);
+      const elapsedMs = nowMs - last.time.getTime();
       const countdownMs = elapsedMs >= 0 ? stepMs - elapsedMs % stepMs : Math.min(stepMs, stepMs - elapsedMs);
       return formatDuration(countdownMs);
     };
@@ -3893,7 +3945,8 @@ function createChart(element, options = {}) {
     }
     if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
       const stepMs = getTimeStepMs();
-      const elapsedMs = Date.now() - lastPoint.time.getTime();
+      const nowMs = Date.now() + (Number(mergedOptions.clockOffsetMs) || 0);
+      const elapsedMs = nowMs - lastPoint.time.getTime();
       const countdownMs = elapsedMs >= 0 ? stepMs - elapsedMs % stepMs : Math.min(stepMs, stepMs - elapsedMs);
       const countdownText = formatDuration(countdownMs);
       const prevFont = ctx.font;
@@ -5782,6 +5835,7 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    reanchorDrawingsToData();
     const lastPoint = data[data.length - 1];
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
@@ -5828,6 +5882,7 @@ function createChart(element, options = {}) {
       }
       merged.set(timeMs, parsed);
       data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+      reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
     scheduleDraw();
@@ -6010,11 +6065,13 @@ function createChart(element, options = {}) {
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
+    reanchorDrawingsToData();
     emitDrawingsChange();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
+    next.points = next.points.map((point) => reanchorDrawingPoint(point));
     drawings.push(next);
     emitDrawingsChange();
     scheduleDraw();
@@ -6026,7 +6083,7 @@ function createChart(element, options = {}) {
         ...serializeDrawing(drawing),
         ...patch,
         id,
-        points: patch.points ?? drawing.points
+        points: (patch.points ?? drawing.points).map((point) => reanchorDrawingPoint(point))
       }) : drawing
     );
     emitDrawingsChange();

package/dist/index.d.cts

@@ -45,6 +45,14 @@ interface ChartOptions {
      * futures data with sparse back-month eras). 0/undefined = infer.
      */
     timeStepMs?: number;
+    /**
+     * Correction added to the machine's clock for time-sensitive rendering
+     * (bar-close countdowns): exchangeNow ≈ Date.now() + clockOffsetMs. Hosts
+     * should derive it from exchange-stamped ticks; without it a skewed local
+     * clock freezes the countdown at one full interval (bars arrive stamped
+     * "in the future") or makes it run visibly early/late.
+     */
+    clockOffsetMs?: number;
     pinOutOfRangeLines?: boolean;
     doubleClickEnabled?: boolean;
     doubleClickAction?: "reset" | "placeLimitOrder";

package/dist/index.d.ts

@@ -45,6 +45,14 @@ interface ChartOptions {
      * futures data with sparse back-month eras). 0/undefined = infer.
      */
     timeStepMs?: number;
+    /**
+     * Correction added to the machine's clock for time-sensitive rendering
+     * (bar-close countdowns): exchangeNow ≈ Date.now() + clockOffsetMs. Hosts
+     * should derive it from exchange-stamped ticks; without it a skewed local
+     * clock freezes the countdown at one full interval (bars arrive stamped
+     * "in the future") or makes it run visibly early/late.
+     */
+    clockOffsetMs?: number;
     pinOutOfRangeLines?: boolean;
     doubleClickEnabled?: boolean;
     doubleClickAction?: "reset" | "placeLimitOrder";

package/dist/index.js

@@ -196,6 +196,7 @@ var DEFAULT_OPTIONS = {
   autoScaleIgnoreLatestCandle: true,
   kineticScroll: { touch: true, mouse: false },
   timeStepMs: 0,
+  clockOffsetMs: 0,
   pinOutOfRangeLines: false,
   doubleClickEnabled: true,
   doubleClickAction: "reset",
@@ -1337,7 +1338,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -1774,6 +1775,56 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const indexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    const firstMs = data[0].time.getTime();
+    const lastMs = data[data.length - 1].time.getTime();
+    if (timeMs < firstMs) {
+      const stepMs = getTimeStepMs();
+      return stepMs > 0 ? (timeMs - firstMs) / stepMs : 0;
+    }
+    if (timeMs > lastMs) {
+      const stepMs = getTimeStepMs();
+      return data.length - 1 + (stepMs > 0 ? (timeMs - lastMs) / stepMs : 0);
+    }
+    return findNearestIndexForTimeMs(timeMs);
+  };
+  const reanchorDrawingPoint = (point) => {
+    if (!point.time) {
+      return point;
+    }
+    const timeMs = Date.parse(point.time);
+    if (!Number.isFinite(timeMs)) {
+      return point;
+    }
+    const rounded = Math.round(point.index);
+    if (data[rounded]?.time.getTime() === timeMs) {
+      return point;
+    }
+    const mapped = indexForTimeMs(timeMs);
+    if (mapped === null) {
+      return point;
+    }
+    const fraction = point.index - rounded;
+    return { ...point, index: mapped + fraction };
+  };
+  const reanchorDrawingsToData = () => {
+    if (data.length === 0) {
+      return;
+    }
+    drawings = drawings.map((drawing) => ({
+      ...drawing,
+      points: drawing.points.map((point) => reanchorDrawingPoint(point))
+    }));
+    if (draftDrawing) {
+      draftDrawing = {
+        ...draftDrawing,
+        points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
+      };
+    }
+  };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
     if (!point) {
@@ -3613,7 +3664,8 @@ function createChart(element, options = {}) {
         return null;
       }
       const stepMs = getTimeStepMs();
-      const elapsedMs = Date.now() - last.time.getTime();
+      const nowMs = Date.now() + (Number(mergedOptions.clockOffsetMs) || 0);
+      const elapsedMs = nowMs - last.time.getTime();
       const countdownMs = elapsedMs >= 0 ? stepMs - elapsedMs % stepMs : Math.min(stepMs, stepMs - elapsedMs);
       return formatDuration(countdownMs);
     };
@@ -3867,7 +3919,8 @@ function createChart(element, options = {}) {
     }
     if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
       const stepMs = getTimeStepMs();
-      const elapsedMs = Date.now() - lastPoint.time.getTime();
+      const nowMs = Date.now() + (Number(mergedOptions.clockOffsetMs) || 0);
+      const elapsedMs = nowMs - lastPoint.time.getTime();
       const countdownMs = elapsedMs >= 0 ? stepMs - elapsedMs % stepMs : Math.min(stepMs, stepMs - elapsedMs);
       const countdownText = formatDuration(countdownMs);
       const prevFont = ctx.font;
@@ -5756,6 +5809,7 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    reanchorDrawingsToData();
     const lastPoint = data[data.length - 1];
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
@@ -5802,6 +5856,7 @@ function createChart(element, options = {}) {
       }
       merged.set(timeMs, parsed);
       data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+      reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
     scheduleDraw();
@@ -5984,11 +6039,13 @@ function createChart(element, options = {}) {
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
+    reanchorDrawingsToData();
     emitDrawingsChange();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
+    next.points = next.points.map((point) => reanchorDrawingPoint(point));
     drawings.push(next);
     emitDrawingsChange();
     scheduleDraw();
@@ -6000,7 +6057,7 @@ function createChart(element, options = {}) {
         ...serializeDrawing(drawing),
         ...patch,
         id,
-        points: patch.points ?? drawing.points
+        points: (patch.points ?? drawing.points).map((point) => reanchorDrawingPoint(point))
       }) : drawing
     );
     emitDrawingsChange();

package/package.json

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