hyperprop-charting-library 0.1.33 → 0.1.35

package/dist/hyperprop-charting-library.cjs

@@ -821,10 +821,21 @@ function createChart(element, options = {}) {
   let xSpan = 60;
   let followLatest = true;
   let followingLatestChangeHandler = null;
+  let viewportChangeHandler = null;
+  let viewportEmitScheduled = false;
+  const emitViewportChange = () => {
+    if (!viewportChangeHandler || viewportEmitScheduled) return;
+    viewportEmitScheduled = true;
+    queueMicrotask(() => {
+      viewportEmitScheduled = false;
+      viewportChangeHandler?.(getViewport());
+    });
+  };
   const updateFollowLatest = (next) => {
     if (followLatest === next) return;
     followLatest = next;
     followingLatestChangeHandler?.(next);
+    emitViewportChange();
   };
   let yMinOverride = null;
   let yMaxOverride = null;
@@ -841,6 +852,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) {
@@ -1801,28 +1847,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"
@@ -1956,10 +2011,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";
@@ -2158,6 +2213,7 @@ function createChart(element, options = {}) {
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const zoomXToLatest = (factor) => {
@@ -2172,6 +2228,7 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
+    emitViewportChange();
     draw();
   };
   const zoomY = (factor, anchorY) => {
@@ -2192,6 +2249,7 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(nextMin, nextMax);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const pan = (deltaX, deltaY, allowX, allowY) => {
@@ -2215,6 +2273,9 @@ function createChart(element, options = {}) {
       yMinOverride = clamped.min;
       yMaxOverride = clamped.max;
     }
+    if (allowX || allowY) {
+      emitViewportChange();
+    }
     draw();
   };
   const resetYViewport = () => {
@@ -2254,6 +2315,7 @@ function createChart(element, options = {}) {
     xCenter += bars;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const panY = (priceDelta) => {
@@ -2265,17 +2327,20 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const fitContent = () => {
     fitXViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const resetViewport = () => {
     fitXViewport();
     resetYViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const isFollowingLatest = () => followLatest;
@@ -2292,6 +2357,64 @@ function createChart(element, options = {}) {
   const onFollowingLatestChange = (handler) => {
     followingLatestChangeHandler = handler;
   };
+  const getViewport = () => {
+    let centerTimeMs = null;
+    if (data.length > 0) {
+      const centerRounded = Math.round(xCenter);
+      if (centerRounded >= 0 && centerRounded < data.length) {
+        centerTimeMs = data[centerRounded]?.time.getTime() ?? null;
+      }
+    }
+    return {
+      xSpan,
+      followingLatest: followLatest,
+      centerTimeMs,
+      yMin: yMinOverride,
+      yMax: yMaxOverride
+    };
+  };
+  const setViewport = (viewport) => {
+    let changed = false;
+    if (typeof viewport.xSpan === "number" && Number.isFinite(viewport.xSpan)) {
+      const minSpan = minVisibleBars;
+      const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+      const nextSpan = clamp(viewport.xSpan, minSpan, maxSpan);
+      if (nextSpan !== xSpan) {
+        xSpan = nextSpan;
+        changed = true;
+      }
+    }
+    if (typeof viewport.centerTimeMs === "number" && data.length > 0) {
+      const nextCenter = findNearestIndexForTimeMs(viewport.centerTimeMs);
+      if (nextCenter !== null) {
+        xCenter = nextCenter;
+        changed = true;
+      }
+    }
+    if (viewport.yMin !== void 0) {
+      yMinOverride = viewport.yMin;
+      changed = true;
+    }
+    if (viewport.yMax !== void 0) {
+      yMaxOverride = viewport.yMax;
+      changed = true;
+    }
+    if (typeof viewport.followingLatest === "boolean") {
+      if (followLatest !== viewport.followingLatest) {
+        followLatest = viewport.followingLatest;
+        followingLatestChangeHandler?.(followLatest);
+        changed = true;
+      }
+    }
+    if (changed) {
+      clampXViewport();
+      draw();
+      emitViewportChange();
+    }
+  };
+  const onViewportChange = (handler) => {
+    viewportChangeHandler = handler;
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -2723,6 +2846,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) => {
@@ -2873,6 +3000,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);
@@ -2907,6 +3038,9 @@ function createChart(element, options = {}) {
     isFollowingLatest,
     setFollowingLatest,
     onFollowingLatestChange,
+    getViewport,
+    setViewport,
+    onViewportChange,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

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;
@@ -284,6 +286,9 @@ interface ChartInstance {
     isFollowingLatest: () => boolean;
     setFollowingLatest: (follow: boolean) => void;
     onFollowingLatestChange: (handler: ((following: boolean) => void) | null) => void;
+    getViewport: () => ViewportState;
+    setViewport: (viewport: Partial<ViewportState>) => void;
+    onViewportChange: (handler: ((viewport: ViewportState) => void) | null) => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     registerIndicator: (plugin: IndicatorPlugin<any>) => void;
@@ -305,6 +310,18 @@ interface OhlcDataPoint {
     c: number;
     v?: number;
 }
+interface ViewportState {
+    /** Number of bars visible horizontally. */
+    xSpan: number;
+    /** Whether the chart is auto-following the latest candle. */
+    followingLatest: boolean;
+    /** Timestamp (ms) at the horizontal center of the viewport. null when data is empty. */
+    centerTimeMs: number | null;
+    /** Manual Y-axis min override (null = auto-scale). */
+    yMin: number | null;
+    /** Manual Y-axis max override (null = auto-scale). */
+    yMax: number | null;
+}
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/hyperprop-charting-library.js

@@ -797,10 +797,21 @@ function createChart(element, options = {}) {
   let xSpan = 60;
   let followLatest = true;
   let followingLatestChangeHandler = null;
+  let viewportChangeHandler = null;
+  let viewportEmitScheduled = false;
+  const emitViewportChange = () => {
+    if (!viewportChangeHandler || viewportEmitScheduled) return;
+    viewportEmitScheduled = true;
+    queueMicrotask(() => {
+      viewportEmitScheduled = false;
+      viewportChangeHandler?.(getViewport());
+    });
+  };
   const updateFollowLatest = (next) => {
     if (followLatest === next) return;
     followLatest = next;
     followingLatestChangeHandler?.(next);
+    emitViewportChange();
   };
   let yMinOverride = null;
   let yMaxOverride = null;
@@ -817,6 +828,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) {
@@ -1777,28 +1823,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"
@@ -1932,10 +1987,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";
@@ -2134,6 +2189,7 @@ function createChart(element, options = {}) {
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const zoomXToLatest = (factor) => {
@@ -2148,6 +2204,7 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
+    emitViewportChange();
     draw();
   };
   const zoomY = (factor, anchorY) => {
@@ -2168,6 +2225,7 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(nextMin, nextMax);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const pan = (deltaX, deltaY, allowX, allowY) => {
@@ -2191,6 +2249,9 @@ function createChart(element, options = {}) {
       yMinOverride = clamped.min;
       yMaxOverride = clamped.max;
     }
+    if (allowX || allowY) {
+      emitViewportChange();
+    }
     draw();
   };
   const resetYViewport = () => {
@@ -2230,6 +2291,7 @@ function createChart(element, options = {}) {
     xCenter += bars;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const panY = (priceDelta) => {
@@ -2241,17 +2303,20 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const fitContent = () => {
     fitXViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const resetViewport = () => {
     fitXViewport();
     resetYViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const isFollowingLatest = () => followLatest;
@@ -2268,6 +2333,64 @@ function createChart(element, options = {}) {
   const onFollowingLatestChange = (handler) => {
     followingLatestChangeHandler = handler;
   };
+  const getViewport = () => {
+    let centerTimeMs = null;
+    if (data.length > 0) {
+      const centerRounded = Math.round(xCenter);
+      if (centerRounded >= 0 && centerRounded < data.length) {
+        centerTimeMs = data[centerRounded]?.time.getTime() ?? null;
+      }
+    }
+    return {
+      xSpan,
+      followingLatest: followLatest,
+      centerTimeMs,
+      yMin: yMinOverride,
+      yMax: yMaxOverride
+    };
+  };
+  const setViewport = (viewport) => {
+    let changed = false;
+    if (typeof viewport.xSpan === "number" && Number.isFinite(viewport.xSpan)) {
+      const minSpan = minVisibleBars;
+      const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+      const nextSpan = clamp(viewport.xSpan, minSpan, maxSpan);
+      if (nextSpan !== xSpan) {
+        xSpan = nextSpan;
+        changed = true;
+      }
+    }
+    if (typeof viewport.centerTimeMs === "number" && data.length > 0) {
+      const nextCenter = findNearestIndexForTimeMs(viewport.centerTimeMs);
+      if (nextCenter !== null) {
+        xCenter = nextCenter;
+        changed = true;
+      }
+    }
+    if (viewport.yMin !== void 0) {
+      yMinOverride = viewport.yMin;
+      changed = true;
+    }
+    if (viewport.yMax !== void 0) {
+      yMaxOverride = viewport.yMax;
+      changed = true;
+    }
+    if (typeof viewport.followingLatest === "boolean") {
+      if (followLatest !== viewport.followingLatest) {
+        followLatest = viewport.followingLatest;
+        followingLatestChangeHandler?.(followLatest);
+        changed = true;
+      }
+    }
+    if (changed) {
+      clampXViewport();
+      draw();
+      emitViewportChange();
+    }
+  };
+  const onViewportChange = (handler) => {
+    viewportChangeHandler = handler;
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -2699,6 +2822,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) => {
@@ -2849,6 +2976,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);
@@ -2883,6 +3014,9 @@ function createChart(element, options = {}) {
     isFollowingLatest,
     setFollowingLatest,
     onFollowingLatestChange,
+    getViewport,
+    setViewport,
+    onViewportChange,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

package/dist/index.cjs

@@ -821,10 +821,21 @@ function createChart(element, options = {}) {
   let xSpan = 60;
   let followLatest = true;
   let followingLatestChangeHandler = null;
+  let viewportChangeHandler = null;
+  let viewportEmitScheduled = false;
+  const emitViewportChange = () => {
+    if (!viewportChangeHandler || viewportEmitScheduled) return;
+    viewportEmitScheduled = true;
+    queueMicrotask(() => {
+      viewportEmitScheduled = false;
+      viewportChangeHandler?.(getViewport());
+    });
+  };
   const updateFollowLatest = (next) => {
     if (followLatest === next) return;
     followLatest = next;
     followingLatestChangeHandler?.(next);
+    emitViewportChange();
   };
   let yMinOverride = null;
   let yMaxOverride = null;
@@ -841,6 +852,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) {
@@ -1801,28 +1847,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"
@@ -1956,10 +2011,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";
@@ -2158,6 +2213,7 @@ function createChart(element, options = {}) {
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const zoomXToLatest = (factor) => {
@@ -2172,6 +2228,7 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
+    emitViewportChange();
     draw();
   };
   const zoomY = (factor, anchorY) => {
@@ -2192,6 +2249,7 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(nextMin, nextMax);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const pan = (deltaX, deltaY, allowX, allowY) => {
@@ -2215,6 +2273,9 @@ function createChart(element, options = {}) {
       yMinOverride = clamped.min;
       yMaxOverride = clamped.max;
     }
+    if (allowX || allowY) {
+      emitViewportChange();
+    }
     draw();
   };
   const resetYViewport = () => {
@@ -2254,6 +2315,7 @@ function createChart(element, options = {}) {
     xCenter += bars;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const panY = (priceDelta) => {
@@ -2265,17 +2327,20 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const fitContent = () => {
     fitXViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const resetViewport = () => {
     fitXViewport();
     resetYViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const isFollowingLatest = () => followLatest;
@@ -2292,6 +2357,64 @@ function createChart(element, options = {}) {
   const onFollowingLatestChange = (handler) => {
     followingLatestChangeHandler = handler;
   };
+  const getViewport = () => {
+    let centerTimeMs = null;
+    if (data.length > 0) {
+      const centerRounded = Math.round(xCenter);
+      if (centerRounded >= 0 && centerRounded < data.length) {
+        centerTimeMs = data[centerRounded]?.time.getTime() ?? null;
+      }
+    }
+    return {
+      xSpan,
+      followingLatest: followLatest,
+      centerTimeMs,
+      yMin: yMinOverride,
+      yMax: yMaxOverride
+    };
+  };
+  const setViewport = (viewport) => {
+    let changed = false;
+    if (typeof viewport.xSpan === "number" && Number.isFinite(viewport.xSpan)) {
+      const minSpan = minVisibleBars;
+      const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+      const nextSpan = clamp(viewport.xSpan, minSpan, maxSpan);
+      if (nextSpan !== xSpan) {
+        xSpan = nextSpan;
+        changed = true;
+      }
+    }
+    if (typeof viewport.centerTimeMs === "number" && data.length > 0) {
+      const nextCenter = findNearestIndexForTimeMs(viewport.centerTimeMs);
+      if (nextCenter !== null) {
+        xCenter = nextCenter;
+        changed = true;
+      }
+    }
+    if (viewport.yMin !== void 0) {
+      yMinOverride = viewport.yMin;
+      changed = true;
+    }
+    if (viewport.yMax !== void 0) {
+      yMaxOverride = viewport.yMax;
+      changed = true;
+    }
+    if (typeof viewport.followingLatest === "boolean") {
+      if (followLatest !== viewport.followingLatest) {
+        followLatest = viewport.followingLatest;
+        followingLatestChangeHandler?.(followLatest);
+        changed = true;
+      }
+    }
+    if (changed) {
+      clampXViewport();
+      draw();
+      emitViewportChange();
+    }
+  };
+  const onViewportChange = (handler) => {
+    viewportChangeHandler = handler;
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -2723,6 +2846,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) => {
@@ -2873,6 +3000,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);
@@ -2907,6 +3038,9 @@ function createChart(element, options = {}) {
     isFollowingLatest,
     setFollowingLatest,
     onFollowingLatestChange,
+    getViewport,
+    setViewport,
+    onViewportChange,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

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;
@@ -284,6 +286,9 @@ interface ChartInstance {
     isFollowingLatest: () => boolean;
     setFollowingLatest: (follow: boolean) => void;
     onFollowingLatestChange: (handler: ((following: boolean) => void) | null) => void;
+    getViewport: () => ViewportState;
+    setViewport: (viewport: Partial<ViewportState>) => void;
+    onViewportChange: (handler: ((viewport: ViewportState) => void) | null) => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     registerIndicator: (plugin: IndicatorPlugin<any>) => void;
@@ -305,6 +310,18 @@ interface OhlcDataPoint {
     c: number;
     v?: number;
 }
+interface ViewportState {
+    /** Number of bars visible horizontally. */
+    xSpan: number;
+    /** Whether the chart is auto-following the latest candle. */
+    followingLatest: boolean;
+    /** Timestamp (ms) at the horizontal center of the viewport. null when data is empty. */
+    centerTimeMs: number | null;
+    /** Manual Y-axis min override (null = auto-scale). */
+    yMin: number | null;
+    /** Manual Y-axis max override (null = auto-scale). */
+    yMax: number | null;
+}
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

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;
@@ -284,6 +286,9 @@ interface ChartInstance {
     isFollowingLatest: () => boolean;
     setFollowingLatest: (follow: boolean) => void;
     onFollowingLatestChange: (handler: ((following: boolean) => void) | null) => void;
+    getViewport: () => ViewportState;
+    setViewport: (viewport: Partial<ViewportState>) => void;
+    onViewportChange: (handler: ((viewport: ViewportState) => void) | null) => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     registerIndicator: (plugin: IndicatorPlugin<any>) => void;
@@ -305,6 +310,18 @@ interface OhlcDataPoint {
     c: number;
     v?: number;
 }
+interface ViewportState {
+    /** Number of bars visible horizontally. */
+    xSpan: number;
+    /** Whether the chart is auto-following the latest candle. */
+    followingLatest: boolean;
+    /** Timestamp (ms) at the horizontal center of the viewport. null when data is empty. */
+    centerTimeMs: number | null;
+    /** Manual Y-axis min override (null = auto-scale). */
+    yMin: number | null;
+    /** Manual Y-axis max override (null = auto-scale). */
+    yMax: number | null;
+}
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/index.js

@@ -797,10 +797,21 @@ function createChart(element, options = {}) {
   let xSpan = 60;
   let followLatest = true;
   let followingLatestChangeHandler = null;
+  let viewportChangeHandler = null;
+  let viewportEmitScheduled = false;
+  const emitViewportChange = () => {
+    if (!viewportChangeHandler || viewportEmitScheduled) return;
+    viewportEmitScheduled = true;
+    queueMicrotask(() => {
+      viewportEmitScheduled = false;
+      viewportChangeHandler?.(getViewport());
+    });
+  };
   const updateFollowLatest = (next) => {
     if (followLatest === next) return;
     followLatest = next;
     followingLatestChangeHandler?.(next);
+    emitViewportChange();
   };
   let yMinOverride = null;
   let yMaxOverride = null;
@@ -817,6 +828,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) {
@@ -1777,28 +1823,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"
@@ -1932,10 +1987,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";
@@ -2134,6 +2189,7 @@ function createChart(element, options = {}) {
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const zoomXToLatest = (factor) => {
@@ -2148,6 +2204,7 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
+    emitViewportChange();
     draw();
   };
   const zoomY = (factor, anchorY) => {
@@ -2168,6 +2225,7 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(nextMin, nextMax);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const pan = (deltaX, deltaY, allowX, allowY) => {
@@ -2191,6 +2249,9 @@ function createChart(element, options = {}) {
       yMinOverride = clamped.min;
       yMaxOverride = clamped.max;
     }
+    if (allowX || allowY) {
+      emitViewportChange();
+    }
     draw();
   };
   const resetYViewport = () => {
@@ -2230,6 +2291,7 @@ function createChart(element, options = {}) {
     xCenter += bars;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const panY = (priceDelta) => {
@@ -2241,17 +2303,20 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const fitContent = () => {
     fitXViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const resetViewport = () => {
     fitXViewport();
     resetYViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const isFollowingLatest = () => followLatest;
@@ -2268,6 +2333,64 @@ function createChart(element, options = {}) {
   const onFollowingLatestChange = (handler) => {
     followingLatestChangeHandler = handler;
   };
+  const getViewport = () => {
+    let centerTimeMs = null;
+    if (data.length > 0) {
+      const centerRounded = Math.round(xCenter);
+      if (centerRounded >= 0 && centerRounded < data.length) {
+        centerTimeMs = data[centerRounded]?.time.getTime() ?? null;
+      }
+    }
+    return {
+      xSpan,
+      followingLatest: followLatest,
+      centerTimeMs,
+      yMin: yMinOverride,
+      yMax: yMaxOverride
+    };
+  };
+  const setViewport = (viewport) => {
+    let changed = false;
+    if (typeof viewport.xSpan === "number" && Number.isFinite(viewport.xSpan)) {
+      const minSpan = minVisibleBars;
+      const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+      const nextSpan = clamp(viewport.xSpan, minSpan, maxSpan);
+      if (nextSpan !== xSpan) {
+        xSpan = nextSpan;
+        changed = true;
+      }
+    }
+    if (typeof viewport.centerTimeMs === "number" && data.length > 0) {
+      const nextCenter = findNearestIndexForTimeMs(viewport.centerTimeMs);
+      if (nextCenter !== null) {
+        xCenter = nextCenter;
+        changed = true;
+      }
+    }
+    if (viewport.yMin !== void 0) {
+      yMinOverride = viewport.yMin;
+      changed = true;
+    }
+    if (viewport.yMax !== void 0) {
+      yMaxOverride = viewport.yMax;
+      changed = true;
+    }
+    if (typeof viewport.followingLatest === "boolean") {
+      if (followLatest !== viewport.followingLatest) {
+        followLatest = viewport.followingLatest;
+        followingLatestChangeHandler?.(followLatest);
+        changed = true;
+      }
+    }
+    if (changed) {
+      clampXViewport();
+      draw();
+      emitViewportChange();
+    }
+  };
+  const onViewportChange = (handler) => {
+    viewportChangeHandler = handler;
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -2699,6 +2822,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) => {
@@ -2849,6 +2976,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);
@@ -2883,6 +3014,9 @@ function createChart(element, options = {}) {
     isFollowingLatest,
     setFollowingLatest,
     onFollowingLatestChange,
+    getViewport,
+    setViewport,
+    onViewportChange,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

package/package.json

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