hyperprop-charting-library 0.1.34 → 0.1.36

package/dist/hyperprop-charting-library.cjs

@@ -171,8 +171,6 @@ var DEFAULT_OPTIONS = {
     visible: true,
     style: "dotted",
     thickness: 1,
-    color: "#38bdf8",
-    labelBackgroundColor: "#38bdf8",
     labelTextColor: "#0b1220",
     labelBorderRadius: 3
   },
@@ -852,6 +850,41 @@ function createChart(element, options = {}) {
   let crosshairPoint = null;
   let doubleClickEnabled = mergedOptions.doubleClickEnabled;
   let doubleClickAction = mergedOptions.doubleClickAction;
+  let smoothedTickerPrice = null;
+  let tickerPriceTarget = null;
+  let smoothingRafId = null;
+  const tickerSmoothingLoop = () => {
+    smoothingRafId = null;
+    if (smoothedTickerPrice === null || tickerPriceTarget === null) return;
+    const diff = tickerPriceTarget - smoothedTickerPrice;
+    if (Math.abs(diff) < 1e-9) {
+      smoothedTickerPrice = tickerPriceTarget;
+      draw();
+      return;
+    }
+    const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const dt = 1 / 60;
+    const lerp = 1 - Math.exp(-speed * dt);
+    smoothedTickerPrice += diff * lerp;
+    draw();
+    smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
+  };
+  const pushSmoothedPrice = (target) => {
+    const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    if (!tickerOpts.smoothing) {
+      smoothedTickerPrice = null;
+      tickerPriceTarget = null;
+      return;
+    }
+    tickerPriceTarget = target;
+    if (smoothedTickerPrice === null) {
+      smoothedTickerPrice = target;
+    }
+    if (smoothingRafId === null) {
+      smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
+    }
+  };
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   if (!ctx) {
@@ -1812,28 +1845,37 @@ function createChart(element, options = {}) {
       }
       ctx.restore();
     }
+    const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
+    const lastDataIndex = data.length - 1;
     for (let index = startIndex; index <= endIndex; index += 1) {
       const point = data[index];
       if (!point) {
         continue;
       }
+      const isLastCandle = useSmoothedCandle && index === lastDataIndex;
+      const displayClose = isLastCandle ? smoothedTickerPrice : point.c;
+      const displayHigh = isLastCandle ? Math.max(point.h, smoothedTickerPrice) : point.h;
+      const displayLow = isLastCandle ? Math.min(point.l, smoothedTickerPrice) : point.l;
       const centerX = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       const openY = yFromPrice(point.o);
-      const closeY = yFromPrice(point.c);
-      const highY = yFromPrice(point.h);
-      const lowY = yFromPrice(point.l);
-      const direction = getCandleDirectionByIndex(index);
+      const closeY = yFromPrice(displayClose);
+      const highY = yFromPrice(displayHigh);
+      const lowY = yFromPrice(displayLow);
+      const direction = isLastCandle ? displayClose >= point.o ? "up" : "down" : getCandleDirectionByIndex(index);
       const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
+      const roundedCenterX = Math.round(centerX);
       ctx.strokeStyle = candleColor;
       ctx.lineWidth = candleWickWidth;
       ctx.beginPath();
-      ctx.moveTo(crisp(centerX), crisp(highY));
-      ctx.lineTo(crisp(centerX), crisp(lowY));
+      ctx.moveTo(roundedCenterX + 0.5, crisp(highY));
+      ctx.lineTo(roundedCenterX + 0.5, crisp(lowY));
       ctx.stroke();
+      const bodyLeft = roundedCenterX - Math.floor(bodyWidth / 2);
       const bodyTop = Math.min(openY, closeY);
       const bodyHeight = Math.max(1, Math.abs(closeY - openY));
       ctx.fillStyle = candleColor;
-      ctx.fillRect(Math.round(centerX - bodyWidth / 2), Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
+      ctx.fillRect(bodyLeft, Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
     }
     const activeOverlayIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "overlay"
@@ -1967,10 +2009,10 @@ function createChart(element, options = {}) {
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
     if ((ticker.visible ?? true) && lastPoint) {
-      const tickerPrice = lastPoint.c;
+      const tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
       const tickerY = yFromPrice(tickerPrice);
       const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
-      const lastDirection = getCandleDirectionByIndex(data.length - 1);
+      const lastDirection = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice >= lastPoint.o ? "up" : "down" : getCandleDirectionByIndex(data.length - 1);
       const tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
       const tickerThickness = Math.max(1, ticker.thickness ?? 1);
       const tickerStyle = ticker.style ?? "solid";
@@ -2802,6 +2844,10 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    const lastClose = data.length > 0 ? data[data.length - 1].c : null;
+    if (lastClose !== null) {
+      pushSmoothedPrice(lastClose);
+    }
     draw();
   };
   const setPriceLines = (lines) => {
@@ -2952,6 +2998,10 @@ function createChart(element, options = {}) {
     draw();
   };
   const destroy = () => {
+    if (smoothingRafId !== null) {
+      cancelAnimationFrame(smoothingRafId);
+      smoothingRafId = null;
+    }
     canvas.removeEventListener("pointerdown", onPointerDown);
     canvas.removeEventListener("pointermove", onPointerMove);
     canvas.removeEventListener("pointerup", endPointerDrag);

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

@@ -259,6 +259,8 @@ interface TickerLineOptions {
     labelBackgroundColor?: string;
     labelTextColor?: string;
     labelBorderRadius?: number;
+    smoothing?: boolean;
+    smoothingSpeed?: number;
 }
 interface ChartInstance {
     setData: (data: OhlcDataPoint[]) => void;

package/dist/hyperprop-charting-library.js

@@ -147,8 +147,6 @@ var DEFAULT_OPTIONS = {
     visible: true,
     style: "dotted",
     thickness: 1,
-    color: "#38bdf8",
-    labelBackgroundColor: "#38bdf8",
     labelTextColor: "#0b1220",
     labelBorderRadius: 3
   },
@@ -828,6 +826,41 @@ function createChart(element, options = {}) {
   let crosshairPoint = null;
   let doubleClickEnabled = mergedOptions.doubleClickEnabled;
   let doubleClickAction = mergedOptions.doubleClickAction;
+  let smoothedTickerPrice = null;
+  let tickerPriceTarget = null;
+  let smoothingRafId = null;
+  const tickerSmoothingLoop = () => {
+    smoothingRafId = null;
+    if (smoothedTickerPrice === null || tickerPriceTarget === null) return;
+    const diff = tickerPriceTarget - smoothedTickerPrice;
+    if (Math.abs(diff) < 1e-9) {
+      smoothedTickerPrice = tickerPriceTarget;
+      draw();
+      return;
+    }
+    const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const dt = 1 / 60;
+    const lerp = 1 - Math.exp(-speed * dt);
+    smoothedTickerPrice += diff * lerp;
+    draw();
+    smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
+  };
+  const pushSmoothedPrice = (target) => {
+    const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    if (!tickerOpts.smoothing) {
+      smoothedTickerPrice = null;
+      tickerPriceTarget = null;
+      return;
+    }
+    tickerPriceTarget = target;
+    if (smoothedTickerPrice === null) {
+      smoothedTickerPrice = target;
+    }
+    if (smoothingRafId === null) {
+      smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
+    }
+  };
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   if (!ctx) {
@@ -1788,28 +1821,37 @@ function createChart(element, options = {}) {
       }
       ctx.restore();
     }
+    const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
+    const lastDataIndex = data.length - 1;
     for (let index = startIndex; index <= endIndex; index += 1) {
       const point = data[index];
       if (!point) {
         continue;
       }
+      const isLastCandle = useSmoothedCandle && index === lastDataIndex;
+      const displayClose = isLastCandle ? smoothedTickerPrice : point.c;
+      const displayHigh = isLastCandle ? Math.max(point.h, smoothedTickerPrice) : point.h;
+      const displayLow = isLastCandle ? Math.min(point.l, smoothedTickerPrice) : point.l;
       const centerX = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       const openY = yFromPrice(point.o);
-      const closeY = yFromPrice(point.c);
-      const highY = yFromPrice(point.h);
-      const lowY = yFromPrice(point.l);
-      const direction = getCandleDirectionByIndex(index);
+      const closeY = yFromPrice(displayClose);
+      const highY = yFromPrice(displayHigh);
+      const lowY = yFromPrice(displayLow);
+      const direction = isLastCandle ? displayClose >= point.o ? "up" : "down" : getCandleDirectionByIndex(index);
       const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
+      const roundedCenterX = Math.round(centerX);
       ctx.strokeStyle = candleColor;
       ctx.lineWidth = candleWickWidth;
       ctx.beginPath();
-      ctx.moveTo(crisp(centerX), crisp(highY));
-      ctx.lineTo(crisp(centerX), crisp(lowY));
+      ctx.moveTo(roundedCenterX + 0.5, crisp(highY));
+      ctx.lineTo(roundedCenterX + 0.5, crisp(lowY));
       ctx.stroke();
+      const bodyLeft = roundedCenterX - Math.floor(bodyWidth / 2);
       const bodyTop = Math.min(openY, closeY);
       const bodyHeight = Math.max(1, Math.abs(closeY - openY));
       ctx.fillStyle = candleColor;
-      ctx.fillRect(Math.round(centerX - bodyWidth / 2), Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
+      ctx.fillRect(bodyLeft, Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
     }
     const activeOverlayIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "overlay"
@@ -1943,10 +1985,10 @@ function createChart(element, options = {}) {
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
     if ((ticker.visible ?? true) && lastPoint) {
-      const tickerPrice = lastPoint.c;
+      const tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
       const tickerY = yFromPrice(tickerPrice);
       const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
-      const lastDirection = getCandleDirectionByIndex(data.length - 1);
+      const lastDirection = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice >= lastPoint.o ? "up" : "down" : getCandleDirectionByIndex(data.length - 1);
       const tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
       const tickerThickness = Math.max(1, ticker.thickness ?? 1);
       const tickerStyle = ticker.style ?? "solid";
@@ -2778,6 +2820,10 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    const lastClose = data.length > 0 ? data[data.length - 1].c : null;
+    if (lastClose !== null) {
+      pushSmoothedPrice(lastClose);
+    }
     draw();
   };
   const setPriceLines = (lines) => {
@@ -2928,6 +2974,10 @@ function createChart(element, options = {}) {
     draw();
   };
   const destroy = () => {
+    if (smoothingRafId !== null) {
+      cancelAnimationFrame(smoothingRafId);
+      smoothingRafId = null;
+    }
     canvas.removeEventListener("pointerdown", onPointerDown);
     canvas.removeEventListener("pointermove", onPointerMove);
     canvas.removeEventListener("pointerup", endPointerDrag);

package/dist/index.cjs

@@ -171,8 +171,6 @@ var DEFAULT_OPTIONS = {
     visible: true,
     style: "dotted",
     thickness: 1,
-    color: "#38bdf8",
-    labelBackgroundColor: "#38bdf8",
     labelTextColor: "#0b1220",
     labelBorderRadius: 3
   },
@@ -852,6 +850,41 @@ function createChart(element, options = {}) {
   let crosshairPoint = null;
   let doubleClickEnabled = mergedOptions.doubleClickEnabled;
   let doubleClickAction = mergedOptions.doubleClickAction;
+  let smoothedTickerPrice = null;
+  let tickerPriceTarget = null;
+  let smoothingRafId = null;
+  const tickerSmoothingLoop = () => {
+    smoothingRafId = null;
+    if (smoothedTickerPrice === null || tickerPriceTarget === null) return;
+    const diff = tickerPriceTarget - smoothedTickerPrice;
+    if (Math.abs(diff) < 1e-9) {
+      smoothedTickerPrice = tickerPriceTarget;
+      draw();
+      return;
+    }
+    const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const dt = 1 / 60;
+    const lerp = 1 - Math.exp(-speed * dt);
+    smoothedTickerPrice += diff * lerp;
+    draw();
+    smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
+  };
+  const pushSmoothedPrice = (target) => {
+    const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    if (!tickerOpts.smoothing) {
+      smoothedTickerPrice = null;
+      tickerPriceTarget = null;
+      return;
+    }
+    tickerPriceTarget = target;
+    if (smoothedTickerPrice === null) {
+      smoothedTickerPrice = target;
+    }
+    if (smoothingRafId === null) {
+      smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
+    }
+  };
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   if (!ctx) {
@@ -1812,28 +1845,37 @@ function createChart(element, options = {}) {
       }
       ctx.restore();
     }
+    const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
+    const lastDataIndex = data.length - 1;
     for (let index = startIndex; index <= endIndex; index += 1) {
       const point = data[index];
       if (!point) {
         continue;
       }
+      const isLastCandle = useSmoothedCandle && index === lastDataIndex;
+      const displayClose = isLastCandle ? smoothedTickerPrice : point.c;
+      const displayHigh = isLastCandle ? Math.max(point.h, smoothedTickerPrice) : point.h;
+      const displayLow = isLastCandle ? Math.min(point.l, smoothedTickerPrice) : point.l;
       const centerX = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       const openY = yFromPrice(point.o);
-      const closeY = yFromPrice(point.c);
-      const highY = yFromPrice(point.h);
-      const lowY = yFromPrice(point.l);
-      const direction = getCandleDirectionByIndex(index);
+      const closeY = yFromPrice(displayClose);
+      const highY = yFromPrice(displayHigh);
+      const lowY = yFromPrice(displayLow);
+      const direction = isLastCandle ? displayClose >= point.o ? "up" : "down" : getCandleDirectionByIndex(index);
       const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
+      const roundedCenterX = Math.round(centerX);
       ctx.strokeStyle = candleColor;
       ctx.lineWidth = candleWickWidth;
       ctx.beginPath();
-      ctx.moveTo(crisp(centerX), crisp(highY));
-      ctx.lineTo(crisp(centerX), crisp(lowY));
+      ctx.moveTo(roundedCenterX + 0.5, crisp(highY));
+      ctx.lineTo(roundedCenterX + 0.5, crisp(lowY));
       ctx.stroke();
+      const bodyLeft = roundedCenterX - Math.floor(bodyWidth / 2);
       const bodyTop = Math.min(openY, closeY);
       const bodyHeight = Math.max(1, Math.abs(closeY - openY));
       ctx.fillStyle = candleColor;
-      ctx.fillRect(Math.round(centerX - bodyWidth / 2), Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
+      ctx.fillRect(bodyLeft, Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
     }
     const activeOverlayIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "overlay"
@@ -1967,10 +2009,10 @@ function createChart(element, options = {}) {
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
     if ((ticker.visible ?? true) && lastPoint) {
-      const tickerPrice = lastPoint.c;
+      const tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
       const tickerY = yFromPrice(tickerPrice);
       const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
-      const lastDirection = getCandleDirectionByIndex(data.length - 1);
+      const lastDirection = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice >= lastPoint.o ? "up" : "down" : getCandleDirectionByIndex(data.length - 1);
       const tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
       const tickerThickness = Math.max(1, ticker.thickness ?? 1);
       const tickerStyle = ticker.style ?? "solid";
@@ -2802,6 +2844,10 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    const lastClose = data.length > 0 ? data[data.length - 1].c : null;
+    if (lastClose !== null) {
+      pushSmoothedPrice(lastClose);
+    }
     draw();
   };
   const setPriceLines = (lines) => {
@@ -2952,6 +2998,10 @@ function createChart(element, options = {}) {
     draw();
   };
   const destroy = () => {
+    if (smoothingRafId !== null) {
+      cancelAnimationFrame(smoothingRafId);
+      smoothingRafId = null;
+    }
     canvas.removeEventListener("pointerdown", onPointerDown);
     canvas.removeEventListener("pointermove", onPointerMove);
     canvas.removeEventListener("pointerup", endPointerDrag);

package/dist/index.d.cts

@@ -259,6 +259,8 @@ interface TickerLineOptions {
     labelBackgroundColor?: string;
     labelTextColor?: string;
     labelBorderRadius?: number;
+    smoothing?: boolean;
+    smoothingSpeed?: number;
 }
 interface ChartInstance {
     setData: (data: OhlcDataPoint[]) => void;

package/dist/index.d.ts

@@ -259,6 +259,8 @@ interface TickerLineOptions {
     labelBackgroundColor?: string;
     labelTextColor?: string;
     labelBorderRadius?: number;
+    smoothing?: boolean;
+    smoothingSpeed?: number;
 }
 interface ChartInstance {
     setData: (data: OhlcDataPoint[]) => void;

package/dist/index.js

@@ -147,8 +147,6 @@ var DEFAULT_OPTIONS = {
     visible: true,
     style: "dotted",
     thickness: 1,
-    color: "#38bdf8",
-    labelBackgroundColor: "#38bdf8",
     labelTextColor: "#0b1220",
     labelBorderRadius: 3
   },
@@ -828,6 +826,41 @@ function createChart(element, options = {}) {
   let crosshairPoint = null;
   let doubleClickEnabled = mergedOptions.doubleClickEnabled;
   let doubleClickAction = mergedOptions.doubleClickAction;
+  let smoothedTickerPrice = null;
+  let tickerPriceTarget = null;
+  let smoothingRafId = null;
+  const tickerSmoothingLoop = () => {
+    smoothingRafId = null;
+    if (smoothedTickerPrice === null || tickerPriceTarget === null) return;
+    const diff = tickerPriceTarget - smoothedTickerPrice;
+    if (Math.abs(diff) < 1e-9) {
+      smoothedTickerPrice = tickerPriceTarget;
+      draw();
+      return;
+    }
+    const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const dt = 1 / 60;
+    const lerp = 1 - Math.exp(-speed * dt);
+    smoothedTickerPrice += diff * lerp;
+    draw();
+    smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
+  };
+  const pushSmoothedPrice = (target) => {
+    const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    if (!tickerOpts.smoothing) {
+      smoothedTickerPrice = null;
+      tickerPriceTarget = null;
+      return;
+    }
+    tickerPriceTarget = target;
+    if (smoothedTickerPrice === null) {
+      smoothedTickerPrice = target;
+    }
+    if (smoothingRafId === null) {
+      smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
+    }
+  };
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   if (!ctx) {
@@ -1788,28 +1821,37 @@ function createChart(element, options = {}) {
       }
       ctx.restore();
     }
+    const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
+    const lastDataIndex = data.length - 1;
     for (let index = startIndex; index <= endIndex; index += 1) {
       const point = data[index];
       if (!point) {
         continue;
       }
+      const isLastCandle = useSmoothedCandle && index === lastDataIndex;
+      const displayClose = isLastCandle ? smoothedTickerPrice : point.c;
+      const displayHigh = isLastCandle ? Math.max(point.h, smoothedTickerPrice) : point.h;
+      const displayLow = isLastCandle ? Math.min(point.l, smoothedTickerPrice) : point.l;
       const centerX = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       const openY = yFromPrice(point.o);
-      const closeY = yFromPrice(point.c);
-      const highY = yFromPrice(point.h);
-      const lowY = yFromPrice(point.l);
-      const direction = getCandleDirectionByIndex(index);
+      const closeY = yFromPrice(displayClose);
+      const highY = yFromPrice(displayHigh);
+      const lowY = yFromPrice(displayLow);
+      const direction = isLastCandle ? displayClose >= point.o ? "up" : "down" : getCandleDirectionByIndex(index);
       const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
+      const roundedCenterX = Math.round(centerX);
       ctx.strokeStyle = candleColor;
       ctx.lineWidth = candleWickWidth;
       ctx.beginPath();
-      ctx.moveTo(crisp(centerX), crisp(highY));
-      ctx.lineTo(crisp(centerX), crisp(lowY));
+      ctx.moveTo(roundedCenterX + 0.5, crisp(highY));
+      ctx.lineTo(roundedCenterX + 0.5, crisp(lowY));
       ctx.stroke();
+      const bodyLeft = roundedCenterX - Math.floor(bodyWidth / 2);
       const bodyTop = Math.min(openY, closeY);
       const bodyHeight = Math.max(1, Math.abs(closeY - openY));
       ctx.fillStyle = candleColor;
-      ctx.fillRect(Math.round(centerX - bodyWidth / 2), Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
+      ctx.fillRect(bodyLeft, Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
     }
     const activeOverlayIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "overlay"
@@ -1943,10 +1985,10 @@ function createChart(element, options = {}) {
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
     if ((ticker.visible ?? true) && lastPoint) {
-      const tickerPrice = lastPoint.c;
+      const tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
       const tickerY = yFromPrice(tickerPrice);
       const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
-      const lastDirection = getCandleDirectionByIndex(data.length - 1);
+      const lastDirection = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice >= lastPoint.o ? "up" : "down" : getCandleDirectionByIndex(data.length - 1);
       const tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
       const tickerThickness = Math.max(1, ticker.thickness ?? 1);
       const tickerStyle = ticker.style ?? "solid";
@@ -2778,6 +2820,10 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    const lastClose = data.length > 0 ? data[data.length - 1].c : null;
+    if (lastClose !== null) {
+      pushSmoothedPrice(lastClose);
+    }
     draw();
   };
   const setPriceLines = (lines) => {
@@ -2928,6 +2974,10 @@ function createChart(element, options = {}) {
     draw();
   };
   const destroy = () => {
+    if (smoothingRafId !== null) {
+      cancelAnimationFrame(smoothingRafId);
+      smoothingRafId = null;
+    }
     canvas.removeEventListener("pointerdown", onPointerDown);
     canvas.removeEventListener("pointermove", onPointerMove);
     canvas.removeEventListener("pointerup", endPointerDrag);

package/package.json

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