hyperprop-charting-library 0.1.38 → 0.1.40

package/dist/hyperprop-charting-library.cjs

@@ -177,6 +177,47 @@ var DEFAULT_OPTIONS = {
   dashPatterns: DEFAULT_DASH_PATTERNS,
   indicators: []
 };
+var mergeChartOptions = (baseOptions, options = {}) => ({
+  ...baseOptions,
+  ...options,
+  axis: {
+    ...baseOptions.axis,
+    ...options.axis ?? {},
+    ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
+  },
+  xAxis: {
+    ...baseOptions.xAxis,
+    ...options.axis ?? {},
+    ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
+    ...options.xAxis ?? {}
+  },
+  yAxis: {
+    ...baseOptions.yAxis,
+    ...options.axis ?? {},
+    ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
+    ...options.yAxis ?? {}
+  },
+  crosshair: {
+    ...baseOptions.crosshair,
+    ...options.crosshair ?? {}
+  },
+  grid: {
+    ...baseOptions.grid,
+    ...options.grid ?? {}
+  },
+  watermark: {
+    ...baseOptions.watermark,
+    ...options.watermark ?? {}
+  },
+  tickerLine: {
+    ...baseOptions.tickerLine,
+    ...options.tickerLine ?? {}
+  },
+  dashPatterns: {
+    ...baseOptions.dashPatterns,
+    ...options.dashPatterns ?? {}
+  }
+});
 var getIndicatorSourceValue = (point, source) => {
   if (source === "open") return point.o;
   if (source === "high") return point.h;
@@ -728,47 +769,7 @@ var BUILTIN_INDICATORS = [
   BUILTIN_ATR_INDICATOR
 ];
 function createChart(element, options = {}) {
-  const mergedOptions = {
-    ...DEFAULT_OPTIONS,
-    ...options,
-    axis: {
-      ...DEFAULT_AXIS_OPTIONS,
-      ...options.axis ?? {},
-      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
-    },
-    xAxis: {
-      ...DEFAULT_AXIS_OPTIONS,
-      ...options.axis ?? {},
-      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
-      ...options.xAxis ?? {}
-    },
-    yAxis: {
-      ...DEFAULT_AXIS_OPTIONS,
-      ...options.axis ?? {},
-      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
-      ...options.yAxis ?? {}
-    },
-    crosshair: {
-      ...DEFAULT_CROSSHAIR_OPTIONS,
-      ...options.crosshair ?? {}
-    },
-    grid: {
-      ...DEFAULT_GRID_OPTIONS,
-      ...options.grid
-    },
-    watermark: {
-      ...DEFAULT_WATERMARK_OPTIONS,
-      ...options.watermark
-    },
-    tickerLine: {
-      ...DEFAULT_OPTIONS.tickerLine,
-      ...options.tickerLine
-    },
-    dashPatterns: {
-      ...DEFAULT_DASH_PATTERNS,
-      ...options.dashPatterns ?? {}
-    }
-  };
+  let mergedOptions = mergeChartOptions(DEFAULT_OPTIONS, options);
   let width = mergedOptions.width;
   let height = mergedOptions.height;
   let data = [];
@@ -859,7 +860,7 @@ function createChart(element, options = {}) {
     const diff = tickerPriceTarget - smoothedTickerPrice;
     if (Math.abs(diff) < 1e-9) {
       smoothedTickerPrice = tickerPriceTarget;
-      draw();
+      draw({ updateAutoScale: false });
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
@@ -867,7 +868,7 @@ function createChart(element, options = {}) {
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += diff * lerp;
-    draw();
+    draw({ updateAutoScale: false });
     smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
   };
   const pushSmoothedPrice = (target) => {
@@ -1584,7 +1585,8 @@ function createChart(element, options = {}) {
     crosshairPoint = point;
     draw();
   };
-  const draw = () => {
+  const draw = (options2 = {}) => {
+    const shouldUpdateAutoScale = options2.updateAutoScale ?? true;
     orderActionRegions = [];
     orderDragRegions = [];
     crosshairPriceActionRegion = null;
@@ -1690,6 +1692,9 @@ function createChart(element, options = {}) {
         }
         const visibleValues = [];
         for (let idx = startIndex; idx <= endIndex; idx += 1) {
+          if (mergedOptions.autoScaleIgnoreLatestCandle && data.length > 1 && idx === data.length - 1) {
+            continue;
+          }
           const value = series[idx];
           if (Number.isFinite(value ?? Number.NaN)) {
             visibleValues.push(value);
@@ -1712,7 +1717,7 @@ function createChart(element, options = {}) {
     const autoMin = minPrice - priceRange * 0.08;
     const autoMax = maxPrice + priceRange * 0.08;
     const smoothing = clamp(mergedOptions.autoScaleSmoothing, 0, 1);
-    if (yMinOverride === null || yMaxOverride === null) {
+    if ((yMinOverride === null || yMaxOverride === null) && (shouldUpdateAutoScale || autoYMin === null || autoYMax === null)) {
       if (autoYMin === null || autoYMax === null) {
         autoYMin = autoMin;
         autoYMax = autoMax;
@@ -1854,15 +1859,16 @@ function createChart(element, options = {}) {
         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 actualDirection = point.c >= point.o ? "up" : "down";
+      const displayClose = isLastCandle ? actualDirection === "up" ? Math.max(point.o, smoothedTickerPrice) : Math.min(point.o, smoothedTickerPrice) : point.c;
+      const displayHigh = isLastCandle ? actualDirection === "up" ? Math.max(point.h, displayClose) : point.h : point.h;
+      const displayLow = isLastCandle ? actualDirection === "up" ? point.l : Math.min(point.l, displayClose) : point.l;
       const centerX = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       const openY = yFromPrice(point.o);
       const closeY = yFromPrice(displayClose);
       const highY = yFromPrice(displayHigh);
       const lowY = yFromPrice(displayLow);
-      const direction = isLastCandle ? displayClose >= point.o ? "up" : "down" : getCandleDirectionByIndex(index);
+      const direction = isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
       const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
       const roundedCenterX = Math.round(centerX);
       ctx.strokeStyle = candleColor;
@@ -1872,10 +1878,13 @@ function createChart(element, options = {}) {
       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));
+      const openYPx = Math.round(openY);
+      const closeYPx = Math.round(closeY);
+      const bodyIsUp = displayClose >= point.o;
+      const bodyTop = bodyIsUp ? Math.min(closeYPx, openYPx - 1) : openYPx;
+      const bodyBottom = bodyIsUp ? openYPx : Math.max(closeYPx, openYPx + 1);
       ctx.fillStyle = candleColor;
-      ctx.fillRect(bodyLeft, Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
+      ctx.fillRect(bodyLeft, bodyTop, bodyWidth, bodyBottom - bodyTop);
     }
     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"
@@ -2803,6 +2812,29 @@ function createChart(element, options = {}) {
   canvas.addEventListener("pointerleave", endPointerDrag);
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
+  const updateOptions = (nextOptions) => {
+    const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
+    const previousWidth = width;
+    const previousHeight = height;
+    mergedOptions = mergeChartOptions(mergedOptions, nextOptions);
+    width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
+    height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
+    mergedOptions = { ...mergedOptions, width, height };
+    doubleClickEnabled = mergedOptions.doubleClickEnabled;
+    doubleClickAction = mergedOptions.doubleClickAction;
+    const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
+    if (!isTickerSmoothingEnabled) {
+      smoothedTickerPrice = null;
+      tickerPriceTarget = null;
+      if (smoothingRafId !== null) {
+        cancelAnimationFrame(smoothingRafId);
+        smoothingRafId = null;
+      }
+    } else if (!wasTickerSmoothingEnabled && data.length > 0) {
+      pushSmoothedPrice(data[data.length - 1].c);
+    }
+    draw();
+  };
   const resize = (nextWidth, nextHeight) => {
     if (nextWidth && nextWidth > 0) {
       width = nextWidth;
@@ -2810,6 +2842,7 @@ function createChart(element, options = {}) {
     if (nextHeight && nextHeight > 0) {
       height = nextHeight;
     }
+    mergedOptions = { ...mergedOptions, width, height };
     draw();
   };
   const setData = (nextData) => {
@@ -3013,6 +3046,7 @@ function createChart(element, options = {}) {
   };
   draw();
   return {
+    updateOptions,
     setData,
     setPriceLines,
     addPriceLine,

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

@@ -263,6 +263,7 @@ interface TickerLineOptions {
     smoothingSpeed?: number;
 }
 interface ChartInstance {
+    updateOptions: (options: ChartOptions) => void;
     setData: (data: OhlcDataPoint[]) => void;
     setPriceLines: (lines: PriceLineOptions[]) => void;
     addPriceLine: (line: PriceLineOptions) => string;

package/dist/hyperprop-charting-library.js

@@ -153,6 +153,47 @@ var DEFAULT_OPTIONS = {
   dashPatterns: DEFAULT_DASH_PATTERNS,
   indicators: []
 };
+var mergeChartOptions = (baseOptions, options = {}) => ({
+  ...baseOptions,
+  ...options,
+  axis: {
+    ...baseOptions.axis,
+    ...options.axis ?? {},
+    ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
+  },
+  xAxis: {
+    ...baseOptions.xAxis,
+    ...options.axis ?? {},
+    ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
+    ...options.xAxis ?? {}
+  },
+  yAxis: {
+    ...baseOptions.yAxis,
+    ...options.axis ?? {},
+    ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
+    ...options.yAxis ?? {}
+  },
+  crosshair: {
+    ...baseOptions.crosshair,
+    ...options.crosshair ?? {}
+  },
+  grid: {
+    ...baseOptions.grid,
+    ...options.grid ?? {}
+  },
+  watermark: {
+    ...baseOptions.watermark,
+    ...options.watermark ?? {}
+  },
+  tickerLine: {
+    ...baseOptions.tickerLine,
+    ...options.tickerLine ?? {}
+  },
+  dashPatterns: {
+    ...baseOptions.dashPatterns,
+    ...options.dashPatterns ?? {}
+  }
+});
 var getIndicatorSourceValue = (point, source) => {
   if (source === "open") return point.o;
   if (source === "high") return point.h;
@@ -704,47 +745,7 @@ var BUILTIN_INDICATORS = [
   BUILTIN_ATR_INDICATOR
 ];
 function createChart(element, options = {}) {
-  const mergedOptions = {
-    ...DEFAULT_OPTIONS,
-    ...options,
-    axis: {
-      ...DEFAULT_AXIS_OPTIONS,
-      ...options.axis ?? {},
-      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
-    },
-    xAxis: {
-      ...DEFAULT_AXIS_OPTIONS,
-      ...options.axis ?? {},
-      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
-      ...options.xAxis ?? {}
-    },
-    yAxis: {
-      ...DEFAULT_AXIS_OPTIONS,
-      ...options.axis ?? {},
-      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
-      ...options.yAxis ?? {}
-    },
-    crosshair: {
-      ...DEFAULT_CROSSHAIR_OPTIONS,
-      ...options.crosshair ?? {}
-    },
-    grid: {
-      ...DEFAULT_GRID_OPTIONS,
-      ...options.grid
-    },
-    watermark: {
-      ...DEFAULT_WATERMARK_OPTIONS,
-      ...options.watermark
-    },
-    tickerLine: {
-      ...DEFAULT_OPTIONS.tickerLine,
-      ...options.tickerLine
-    },
-    dashPatterns: {
-      ...DEFAULT_DASH_PATTERNS,
-      ...options.dashPatterns ?? {}
-    }
-  };
+  let mergedOptions = mergeChartOptions(DEFAULT_OPTIONS, options);
   let width = mergedOptions.width;
   let height = mergedOptions.height;
   let data = [];
@@ -835,7 +836,7 @@ function createChart(element, options = {}) {
     const diff = tickerPriceTarget - smoothedTickerPrice;
     if (Math.abs(diff) < 1e-9) {
       smoothedTickerPrice = tickerPriceTarget;
-      draw();
+      draw({ updateAutoScale: false });
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
@@ -843,7 +844,7 @@ function createChart(element, options = {}) {
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += diff * lerp;
-    draw();
+    draw({ updateAutoScale: false });
     smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
   };
   const pushSmoothedPrice = (target) => {
@@ -1560,7 +1561,8 @@ function createChart(element, options = {}) {
     crosshairPoint = point;
     draw();
   };
-  const draw = () => {
+  const draw = (options2 = {}) => {
+    const shouldUpdateAutoScale = options2.updateAutoScale ?? true;
     orderActionRegions = [];
     orderDragRegions = [];
     crosshairPriceActionRegion = null;
@@ -1666,6 +1668,9 @@ function createChart(element, options = {}) {
         }
         const visibleValues = [];
         for (let idx = startIndex; idx <= endIndex; idx += 1) {
+          if (mergedOptions.autoScaleIgnoreLatestCandle && data.length > 1 && idx === data.length - 1) {
+            continue;
+          }
           const value = series[idx];
           if (Number.isFinite(value ?? Number.NaN)) {
             visibleValues.push(value);
@@ -1688,7 +1693,7 @@ function createChart(element, options = {}) {
     const autoMin = minPrice - priceRange * 0.08;
     const autoMax = maxPrice + priceRange * 0.08;
     const smoothing = clamp(mergedOptions.autoScaleSmoothing, 0, 1);
-    if (yMinOverride === null || yMaxOverride === null) {
+    if ((yMinOverride === null || yMaxOverride === null) && (shouldUpdateAutoScale || autoYMin === null || autoYMax === null)) {
       if (autoYMin === null || autoYMax === null) {
         autoYMin = autoMin;
         autoYMax = autoMax;
@@ -1830,15 +1835,16 @@ function createChart(element, options = {}) {
         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 actualDirection = point.c >= point.o ? "up" : "down";
+      const displayClose = isLastCandle ? actualDirection === "up" ? Math.max(point.o, smoothedTickerPrice) : Math.min(point.o, smoothedTickerPrice) : point.c;
+      const displayHigh = isLastCandle ? actualDirection === "up" ? Math.max(point.h, displayClose) : point.h : point.h;
+      const displayLow = isLastCandle ? actualDirection === "up" ? point.l : Math.min(point.l, displayClose) : point.l;
       const centerX = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       const openY = yFromPrice(point.o);
       const closeY = yFromPrice(displayClose);
       const highY = yFromPrice(displayHigh);
       const lowY = yFromPrice(displayLow);
-      const direction = isLastCandle ? displayClose >= point.o ? "up" : "down" : getCandleDirectionByIndex(index);
+      const direction = isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
       const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
       const roundedCenterX = Math.round(centerX);
       ctx.strokeStyle = candleColor;
@@ -1848,10 +1854,13 @@ function createChart(element, options = {}) {
       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));
+      const openYPx = Math.round(openY);
+      const closeYPx = Math.round(closeY);
+      const bodyIsUp = displayClose >= point.o;
+      const bodyTop = bodyIsUp ? Math.min(closeYPx, openYPx - 1) : openYPx;
+      const bodyBottom = bodyIsUp ? openYPx : Math.max(closeYPx, openYPx + 1);
       ctx.fillStyle = candleColor;
-      ctx.fillRect(bodyLeft, Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
+      ctx.fillRect(bodyLeft, bodyTop, bodyWidth, bodyBottom - bodyTop);
     }
     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"
@@ -2779,6 +2788,29 @@ function createChart(element, options = {}) {
   canvas.addEventListener("pointerleave", endPointerDrag);
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
+  const updateOptions = (nextOptions) => {
+    const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
+    const previousWidth = width;
+    const previousHeight = height;
+    mergedOptions = mergeChartOptions(mergedOptions, nextOptions);
+    width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
+    height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
+    mergedOptions = { ...mergedOptions, width, height };
+    doubleClickEnabled = mergedOptions.doubleClickEnabled;
+    doubleClickAction = mergedOptions.doubleClickAction;
+    const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
+    if (!isTickerSmoothingEnabled) {
+      smoothedTickerPrice = null;
+      tickerPriceTarget = null;
+      if (smoothingRafId !== null) {
+        cancelAnimationFrame(smoothingRafId);
+        smoothingRafId = null;
+      }
+    } else if (!wasTickerSmoothingEnabled && data.length > 0) {
+      pushSmoothedPrice(data[data.length - 1].c);
+    }
+    draw();
+  };
   const resize = (nextWidth, nextHeight) => {
     if (nextWidth && nextWidth > 0) {
       width = nextWidth;
@@ -2786,6 +2818,7 @@ function createChart(element, options = {}) {
     if (nextHeight && nextHeight > 0) {
       height = nextHeight;
     }
+    mergedOptions = { ...mergedOptions, width, height };
     draw();
   };
   const setData = (nextData) => {
@@ -2989,6 +3022,7 @@ function createChart(element, options = {}) {
   };
   draw();
   return {
+    updateOptions,
     setData,
     setPriceLines,
     addPriceLine,

package/dist/index.cjs

@@ -177,6 +177,47 @@ var DEFAULT_OPTIONS = {
   dashPatterns: DEFAULT_DASH_PATTERNS,
   indicators: []
 };
+var mergeChartOptions = (baseOptions, options = {}) => ({
+  ...baseOptions,
+  ...options,
+  axis: {
+    ...baseOptions.axis,
+    ...options.axis ?? {},
+    ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
+  },
+  xAxis: {
+    ...baseOptions.xAxis,
+    ...options.axis ?? {},
+    ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
+    ...options.xAxis ?? {}
+  },
+  yAxis: {
+    ...baseOptions.yAxis,
+    ...options.axis ?? {},
+    ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
+    ...options.yAxis ?? {}
+  },
+  crosshair: {
+    ...baseOptions.crosshair,
+    ...options.crosshair ?? {}
+  },
+  grid: {
+    ...baseOptions.grid,
+    ...options.grid ?? {}
+  },
+  watermark: {
+    ...baseOptions.watermark,
+    ...options.watermark ?? {}
+  },
+  tickerLine: {
+    ...baseOptions.tickerLine,
+    ...options.tickerLine ?? {}
+  },
+  dashPatterns: {
+    ...baseOptions.dashPatterns,
+    ...options.dashPatterns ?? {}
+  }
+});
 var getIndicatorSourceValue = (point, source) => {
   if (source === "open") return point.o;
   if (source === "high") return point.h;
@@ -728,47 +769,7 @@ var BUILTIN_INDICATORS = [
   BUILTIN_ATR_INDICATOR
 ];
 function createChart(element, options = {}) {
-  const mergedOptions = {
-    ...DEFAULT_OPTIONS,
-    ...options,
-    axis: {
-      ...DEFAULT_AXIS_OPTIONS,
-      ...options.axis ?? {},
-      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
-    },
-    xAxis: {
-      ...DEFAULT_AXIS_OPTIONS,
-      ...options.axis ?? {},
-      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
-      ...options.xAxis ?? {}
-    },
-    yAxis: {
-      ...DEFAULT_AXIS_OPTIONS,
-      ...options.axis ?? {},
-      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
-      ...options.yAxis ?? {}
-    },
-    crosshair: {
-      ...DEFAULT_CROSSHAIR_OPTIONS,
-      ...options.crosshair ?? {}
-    },
-    grid: {
-      ...DEFAULT_GRID_OPTIONS,
-      ...options.grid
-    },
-    watermark: {
-      ...DEFAULT_WATERMARK_OPTIONS,
-      ...options.watermark
-    },
-    tickerLine: {
-      ...DEFAULT_OPTIONS.tickerLine,
-      ...options.tickerLine
-    },
-    dashPatterns: {
-      ...DEFAULT_DASH_PATTERNS,
-      ...options.dashPatterns ?? {}
-    }
-  };
+  let mergedOptions = mergeChartOptions(DEFAULT_OPTIONS, options);
   let width = mergedOptions.width;
   let height = mergedOptions.height;
   let data = [];
@@ -859,7 +860,7 @@ function createChart(element, options = {}) {
     const diff = tickerPriceTarget - smoothedTickerPrice;
     if (Math.abs(diff) < 1e-9) {
       smoothedTickerPrice = tickerPriceTarget;
-      draw();
+      draw({ updateAutoScale: false });
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
@@ -867,7 +868,7 @@ function createChart(element, options = {}) {
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += diff * lerp;
-    draw();
+    draw({ updateAutoScale: false });
     smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
   };
   const pushSmoothedPrice = (target) => {
@@ -1584,7 +1585,8 @@ function createChart(element, options = {}) {
     crosshairPoint = point;
     draw();
   };
-  const draw = () => {
+  const draw = (options2 = {}) => {
+    const shouldUpdateAutoScale = options2.updateAutoScale ?? true;
     orderActionRegions = [];
     orderDragRegions = [];
     crosshairPriceActionRegion = null;
@@ -1690,6 +1692,9 @@ function createChart(element, options = {}) {
         }
         const visibleValues = [];
         for (let idx = startIndex; idx <= endIndex; idx += 1) {
+          if (mergedOptions.autoScaleIgnoreLatestCandle && data.length > 1 && idx === data.length - 1) {
+            continue;
+          }
           const value = series[idx];
           if (Number.isFinite(value ?? Number.NaN)) {
             visibleValues.push(value);
@@ -1712,7 +1717,7 @@ function createChart(element, options = {}) {
     const autoMin = minPrice - priceRange * 0.08;
     const autoMax = maxPrice + priceRange * 0.08;
     const smoothing = clamp(mergedOptions.autoScaleSmoothing, 0, 1);
-    if (yMinOverride === null || yMaxOverride === null) {
+    if ((yMinOverride === null || yMaxOverride === null) && (shouldUpdateAutoScale || autoYMin === null || autoYMax === null)) {
       if (autoYMin === null || autoYMax === null) {
         autoYMin = autoMin;
         autoYMax = autoMax;
@@ -1854,15 +1859,16 @@ function createChart(element, options = {}) {
         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 actualDirection = point.c >= point.o ? "up" : "down";
+      const displayClose = isLastCandle ? actualDirection === "up" ? Math.max(point.o, smoothedTickerPrice) : Math.min(point.o, smoothedTickerPrice) : point.c;
+      const displayHigh = isLastCandle ? actualDirection === "up" ? Math.max(point.h, displayClose) : point.h : point.h;
+      const displayLow = isLastCandle ? actualDirection === "up" ? point.l : Math.min(point.l, displayClose) : point.l;
       const centerX = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       const openY = yFromPrice(point.o);
       const closeY = yFromPrice(displayClose);
       const highY = yFromPrice(displayHigh);
       const lowY = yFromPrice(displayLow);
-      const direction = isLastCandle ? displayClose >= point.o ? "up" : "down" : getCandleDirectionByIndex(index);
+      const direction = isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
       const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
       const roundedCenterX = Math.round(centerX);
       ctx.strokeStyle = candleColor;
@@ -1872,10 +1878,13 @@ function createChart(element, options = {}) {
       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));
+      const openYPx = Math.round(openY);
+      const closeYPx = Math.round(closeY);
+      const bodyIsUp = displayClose >= point.o;
+      const bodyTop = bodyIsUp ? Math.min(closeYPx, openYPx - 1) : openYPx;
+      const bodyBottom = bodyIsUp ? openYPx : Math.max(closeYPx, openYPx + 1);
       ctx.fillStyle = candleColor;
-      ctx.fillRect(bodyLeft, Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
+      ctx.fillRect(bodyLeft, bodyTop, bodyWidth, bodyBottom - bodyTop);
     }
     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"
@@ -2803,6 +2812,29 @@ function createChart(element, options = {}) {
   canvas.addEventListener("pointerleave", endPointerDrag);
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
+  const updateOptions = (nextOptions) => {
+    const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
+    const previousWidth = width;
+    const previousHeight = height;
+    mergedOptions = mergeChartOptions(mergedOptions, nextOptions);
+    width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
+    height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
+    mergedOptions = { ...mergedOptions, width, height };
+    doubleClickEnabled = mergedOptions.doubleClickEnabled;
+    doubleClickAction = mergedOptions.doubleClickAction;
+    const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
+    if (!isTickerSmoothingEnabled) {
+      smoothedTickerPrice = null;
+      tickerPriceTarget = null;
+      if (smoothingRafId !== null) {
+        cancelAnimationFrame(smoothingRafId);
+        smoothingRafId = null;
+      }
+    } else if (!wasTickerSmoothingEnabled && data.length > 0) {
+      pushSmoothedPrice(data[data.length - 1].c);
+    }
+    draw();
+  };
   const resize = (nextWidth, nextHeight) => {
     if (nextWidth && nextWidth > 0) {
       width = nextWidth;
@@ -2810,6 +2842,7 @@ function createChart(element, options = {}) {
     if (nextHeight && nextHeight > 0) {
       height = nextHeight;
     }
+    mergedOptions = { ...mergedOptions, width, height };
     draw();
   };
   const setData = (nextData) => {
@@ -3013,6 +3046,7 @@ function createChart(element, options = {}) {
   };
   draw();
   return {
+    updateOptions,
     setData,
     setPriceLines,
     addPriceLine,

package/dist/index.d.cts

@@ -263,6 +263,7 @@ interface TickerLineOptions {
     smoothingSpeed?: number;
 }
 interface ChartInstance {
+    updateOptions: (options: ChartOptions) => void;
     setData: (data: OhlcDataPoint[]) => void;
     setPriceLines: (lines: PriceLineOptions[]) => void;
     addPriceLine: (line: PriceLineOptions) => string;

package/dist/index.d.ts

@@ -263,6 +263,7 @@ interface TickerLineOptions {
     smoothingSpeed?: number;
 }
 interface ChartInstance {
+    updateOptions: (options: ChartOptions) => void;
     setData: (data: OhlcDataPoint[]) => void;
     setPriceLines: (lines: PriceLineOptions[]) => void;
     addPriceLine: (line: PriceLineOptions) => string;

package/dist/index.js

@@ -153,6 +153,47 @@ var DEFAULT_OPTIONS = {
   dashPatterns: DEFAULT_DASH_PATTERNS,
   indicators: []
 };
+var mergeChartOptions = (baseOptions, options = {}) => ({
+  ...baseOptions,
+  ...options,
+  axis: {
+    ...baseOptions.axis,
+    ...options.axis ?? {},
+    ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
+  },
+  xAxis: {
+    ...baseOptions.xAxis,
+    ...options.axis ?? {},
+    ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
+    ...options.xAxis ?? {}
+  },
+  yAxis: {
+    ...baseOptions.yAxis,
+    ...options.axis ?? {},
+    ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
+    ...options.yAxis ?? {}
+  },
+  crosshair: {
+    ...baseOptions.crosshair,
+    ...options.crosshair ?? {}
+  },
+  grid: {
+    ...baseOptions.grid,
+    ...options.grid ?? {}
+  },
+  watermark: {
+    ...baseOptions.watermark,
+    ...options.watermark ?? {}
+  },
+  tickerLine: {
+    ...baseOptions.tickerLine,
+    ...options.tickerLine ?? {}
+  },
+  dashPatterns: {
+    ...baseOptions.dashPatterns,
+    ...options.dashPatterns ?? {}
+  }
+});
 var getIndicatorSourceValue = (point, source) => {
   if (source === "open") return point.o;
   if (source === "high") return point.h;
@@ -704,47 +745,7 @@ var BUILTIN_INDICATORS = [
   BUILTIN_ATR_INDICATOR
 ];
 function createChart(element, options = {}) {
-  const mergedOptions = {
-    ...DEFAULT_OPTIONS,
-    ...options,
-    axis: {
-      ...DEFAULT_AXIS_OPTIONS,
-      ...options.axis ?? {},
-      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
-    },
-    xAxis: {
-      ...DEFAULT_AXIS_OPTIONS,
-      ...options.axis ?? {},
-      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
-      ...options.xAxis ?? {}
-    },
-    yAxis: {
-      ...DEFAULT_AXIS_OPTIONS,
-      ...options.axis ?? {},
-      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
-      ...options.yAxis ?? {}
-    },
-    crosshair: {
-      ...DEFAULT_CROSSHAIR_OPTIONS,
-      ...options.crosshair ?? {}
-    },
-    grid: {
-      ...DEFAULT_GRID_OPTIONS,
-      ...options.grid
-    },
-    watermark: {
-      ...DEFAULT_WATERMARK_OPTIONS,
-      ...options.watermark
-    },
-    tickerLine: {
-      ...DEFAULT_OPTIONS.tickerLine,
-      ...options.tickerLine
-    },
-    dashPatterns: {
-      ...DEFAULT_DASH_PATTERNS,
-      ...options.dashPatterns ?? {}
-    }
-  };
+  let mergedOptions = mergeChartOptions(DEFAULT_OPTIONS, options);
   let width = mergedOptions.width;
   let height = mergedOptions.height;
   let data = [];
@@ -835,7 +836,7 @@ function createChart(element, options = {}) {
     const diff = tickerPriceTarget - smoothedTickerPrice;
     if (Math.abs(diff) < 1e-9) {
       smoothedTickerPrice = tickerPriceTarget;
-      draw();
+      draw({ updateAutoScale: false });
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
@@ -843,7 +844,7 @@ function createChart(element, options = {}) {
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += diff * lerp;
-    draw();
+    draw({ updateAutoScale: false });
     smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
   };
   const pushSmoothedPrice = (target) => {
@@ -1560,7 +1561,8 @@ function createChart(element, options = {}) {
     crosshairPoint = point;
     draw();
   };
-  const draw = () => {
+  const draw = (options2 = {}) => {
+    const shouldUpdateAutoScale = options2.updateAutoScale ?? true;
     orderActionRegions = [];
     orderDragRegions = [];
     crosshairPriceActionRegion = null;
@@ -1666,6 +1668,9 @@ function createChart(element, options = {}) {
         }
         const visibleValues = [];
         for (let idx = startIndex; idx <= endIndex; idx += 1) {
+          if (mergedOptions.autoScaleIgnoreLatestCandle && data.length > 1 && idx === data.length - 1) {
+            continue;
+          }
           const value = series[idx];
           if (Number.isFinite(value ?? Number.NaN)) {
             visibleValues.push(value);
@@ -1688,7 +1693,7 @@ function createChart(element, options = {}) {
     const autoMin = minPrice - priceRange * 0.08;
     const autoMax = maxPrice + priceRange * 0.08;
     const smoothing = clamp(mergedOptions.autoScaleSmoothing, 0, 1);
-    if (yMinOverride === null || yMaxOverride === null) {
+    if ((yMinOverride === null || yMaxOverride === null) && (shouldUpdateAutoScale || autoYMin === null || autoYMax === null)) {
       if (autoYMin === null || autoYMax === null) {
         autoYMin = autoMin;
         autoYMax = autoMax;
@@ -1830,15 +1835,16 @@ function createChart(element, options = {}) {
         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 actualDirection = point.c >= point.o ? "up" : "down";
+      const displayClose = isLastCandle ? actualDirection === "up" ? Math.max(point.o, smoothedTickerPrice) : Math.min(point.o, smoothedTickerPrice) : point.c;
+      const displayHigh = isLastCandle ? actualDirection === "up" ? Math.max(point.h, displayClose) : point.h : point.h;
+      const displayLow = isLastCandle ? actualDirection === "up" ? point.l : Math.min(point.l, displayClose) : point.l;
       const centerX = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       const openY = yFromPrice(point.o);
       const closeY = yFromPrice(displayClose);
       const highY = yFromPrice(displayHigh);
       const lowY = yFromPrice(displayLow);
-      const direction = isLastCandle ? displayClose >= point.o ? "up" : "down" : getCandleDirectionByIndex(index);
+      const direction = isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
       const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
       const roundedCenterX = Math.round(centerX);
       ctx.strokeStyle = candleColor;
@@ -1848,10 +1854,13 @@ function createChart(element, options = {}) {
       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));
+      const openYPx = Math.round(openY);
+      const closeYPx = Math.round(closeY);
+      const bodyIsUp = displayClose >= point.o;
+      const bodyTop = bodyIsUp ? Math.min(closeYPx, openYPx - 1) : openYPx;
+      const bodyBottom = bodyIsUp ? openYPx : Math.max(closeYPx, openYPx + 1);
       ctx.fillStyle = candleColor;
-      ctx.fillRect(bodyLeft, Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
+      ctx.fillRect(bodyLeft, bodyTop, bodyWidth, bodyBottom - bodyTop);
     }
     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"
@@ -2779,6 +2788,29 @@ function createChart(element, options = {}) {
   canvas.addEventListener("pointerleave", endPointerDrag);
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
+  const updateOptions = (nextOptions) => {
+    const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
+    const previousWidth = width;
+    const previousHeight = height;
+    mergedOptions = mergeChartOptions(mergedOptions, nextOptions);
+    width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
+    height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
+    mergedOptions = { ...mergedOptions, width, height };
+    doubleClickEnabled = mergedOptions.doubleClickEnabled;
+    doubleClickAction = mergedOptions.doubleClickAction;
+    const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
+    if (!isTickerSmoothingEnabled) {
+      smoothedTickerPrice = null;
+      tickerPriceTarget = null;
+      if (smoothingRafId !== null) {
+        cancelAnimationFrame(smoothingRafId);
+        smoothingRafId = null;
+      }
+    } else if (!wasTickerSmoothingEnabled && data.length > 0) {
+      pushSmoothedPrice(data[data.length - 1].c);
+    }
+    draw();
+  };
   const resize = (nextWidth, nextHeight) => {
     if (nextWidth && nextWidth > 0) {
       width = nextWidth;
@@ -2786,6 +2818,7 @@ function createChart(element, options = {}) {
     if (nextHeight && nextHeight > 0) {
       height = nextHeight;
     }
+    mergedOptions = { ...mergedOptions, width, height };
     draw();
   };
   const setData = (nextData) => {
@@ -2989,6 +3022,7 @@ function createChart(element, options = {}) {
   };
   draw();
   return {
+    updateOptions,
     setData,
     setPriceLines,
     addPriceLine,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",
@@ -20,7 +20,7 @@
   ],
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --clean && cp \"./dist/index.js\" \"./dist/hyperprop-charting-library.js\" && cp \"./dist/index.cjs\" \"./dist/hyperprop-charting-library.cjs\" && cp \"./dist/index.d.ts\" \"./dist/hyperprop-charting-library.d.ts\"",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch --onSuccess \"cp ./dist/index.js ./dist/hyperprop-charting-library.js && cp ./dist/index.cjs ./dist/hyperprop-charting-library.cjs && cp ./dist/index.d.ts ./dist/hyperprop-charting-library.d.ts\"",
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "devDependencies": {