hyperprop-charting-library 0.1.23 → 0.1.24

package/README.md

@@ -60,6 +60,19 @@ const chart = createChart(root, {
 });
 ```
 
+## Candle Color Behavior
+
+You can control how up/down candle color is decided:
+
+```ts
+const chart = createChart(root, {
+  // "openClose" (default) or "prevClose"
+  candleColorMode: "prevClose",
+  // -1 = auto epsilon from priceDecimals, 0 = strict compare
+  candleColorEpsilon: -1
+});
+```
+
 ## Crosshair "+" Button
 
 ```ts

package/dist/hyperprop-charting-library.cjs

@@ -151,6 +151,8 @@ var DEFAULT_OPTIONS = {
   candleBodyWidthRatio: 0.7,
   candleMinWidth: 0.5,
   candleWickWidth: 1,
+  candleColorMode: "openClose",
+  candleColorEpsilon: -1,
   autoScaleSmoothing: 0.16,
   autoScaleIgnoreLatestCandle: true,
   doubleClickEnabled: true,
@@ -511,11 +513,11 @@ var BUILTIN_VOLUME_INDICATOR = {
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
       const barY = Math.round(paneBottom - volumeHeight);
-      const isUp = point.c >= point.o;
-      const opacity = isUp ? upOpacity : downOpacity;
+      const direction = renderContext.getCandleDirectionByIndex(index);
+      const opacity = direction === "up" ? upOpacity : downOpacity;
       ctx.save();
       ctx.globalAlpha = opacity;
-      ctx.fillStyle = isUp ? upColor : downColor;
+      ctx.fillStyle = direction === "up" ? upColor : downColor;
       ctx.fillRect(barX, barY, Math.max(1, Math.round(barWidth)), volumeHeight);
       ctx.restore();
     }
@@ -867,6 +869,24 @@ function createChart(element, options = {}) {
     const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
     return price.toFixed(decimals);
   };
+  const roundToPricePrecision = (price) => {
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    return Number(price.toFixed(decimals));
+  };
+  const getResolvedCandleColorEpsilon = () => {
+    const configured = mergedOptions.candleColorEpsilon;
+    if (configured >= 0) {
+      return configured;
+    }
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    return decimals > 0 ? 0.5 / 10 ** decimals : 0;
+  };
+  const getDirectionFromDelta = (delta) => {
+    const epsilon = Math.max(0, getResolvedCandleColorEpsilon());
+    if (delta > epsilon) return 1;
+    if (delta < -epsilon) return -1;
+    return 0;
+  };
   const getStabilizedPriceTemplate = () => {
     const explicitTemplate = mergedOptions.priceLabelWidthTemplate.trim();
     if (explicitTemplate.length > 0) {
@@ -893,14 +913,33 @@ function createChart(element, options = {}) {
     return Math.max(measured, templateWidth);
   };
   const parseData = (nextData) => {
-    return nextData.map((point) => ({
-      time: new Date(point.t),
-      o: point.o,
-      h: point.h,
-      l: point.l,
-      c: point.c,
-      ...point.v === void 0 ? {} : { v: point.v }
-    })).filter((point) => Number.isFinite(point.time.getTime())).sort((a, b) => a.time.getTime() - b.time.getTime());
+    const dedupedByTime = /* @__PURE__ */ new Map();
+    for (const point of nextData) {
+      const time = new Date(point.t);
+      const timeMs = time.getTime();
+      if (!Number.isFinite(timeMs)) {
+        continue;
+      }
+      const open = Number(point.o);
+      const close = Number(point.c);
+      const highInput = Number(point.h);
+      const lowInput = Number(point.l);
+      if (!Number.isFinite(open) || !Number.isFinite(close) || !Number.isFinite(highInput) || !Number.isFinite(lowInput)) {
+        continue;
+      }
+      const normalizedHigh = Math.max(highInput, open, close);
+      const normalizedLow = Math.min(lowInput, open, close);
+      const volumeValue = point.v === void 0 ? void 0 : Number(point.v);
+      dedupedByTime.set(timeMs, {
+        time,
+        o: open,
+        h: normalizedHigh,
+        l: normalizedLow,
+        c: close,
+        ...volumeValue === void 0 || !Number.isFinite(volumeValue) ? {} : { v: volumeValue }
+      });
+    }
+    return Array.from(dedupedByTime.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
   };
   const getTimeStepMs = () => {
     if (data.length < 2) {
@@ -977,6 +1016,26 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const getCandleDirectionByIndex = (index) => {
+    const point = data[index];
+    if (!point) {
+      return "up";
+    }
+    const prevPoint = index > 0 ? data[index - 1] : void 0;
+    const mode = mergedOptions.candleColorMode;
+    const baseForMode = mode === "prevClose" && prevPoint ? prevPoint.c : point.o;
+    let direction = getDirectionFromDelta(point.c - baseForMode);
+    if (direction === 0 && mode === "prevClose") {
+      direction = getDirectionFromDelta(point.c - point.o);
+    }
+    if (direction === 0 && prevPoint) {
+      direction = getDirectionFromDelta(point.c - prevPoint.c);
+    }
+    if (direction === 0) {
+      return point.c >= point.o ? "up" : "down";
+    }
+    return direction > 0 ? "up" : "down";
+  };
   const formatHoverTimeLabel = (time, mode) => {
     if (mode === "time") {
       return time.toLocaleTimeString(void 0, {
@@ -1562,8 +1621,8 @@ function createChart(element, options = {}) {
       const closeY = yFromPrice(point.c);
       const highY = yFromPrice(point.h);
       const lowY = yFromPrice(point.l);
-      const isUp = point.c >= point.o;
-      const candleColor = isUp ? mergedOptions.upColor : mergedOptions.downColor;
+      const direction = getCandleDirectionByIndex(index);
+      const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
       ctx.strokeStyle = candleColor;
       ctx.lineWidth = candleWickWidth;
       ctx.beginPath();
@@ -1597,6 +1656,7 @@ function createChart(element, options = {}) {
             chartHeight,
             xFromIndex,
             yFromPrice,
+            getCandleDirectionByIndex,
             candleSpacing,
             upColor: mergedOptions.upColor,
             downColor: mergedOptions.downColor
@@ -1656,6 +1716,7 @@ function createChart(element, options = {}) {
             chartHeight: paneHeight,
             xFromIndex,
             yFromPrice: null,
+            getCandleDirectionByIndex,
             candleSpacing,
             upColor: mergedOptions.upColor,
             downColor: mergedOptions.downColor
@@ -1693,7 +1754,8 @@ function createChart(element, options = {}) {
       const tickerPrice = lastPoint.c;
       const tickerY = yFromPrice(tickerPrice);
       const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
-      const tickerColor = ticker.color ?? (lastPoint.c >= lastPoint.o ? mergedOptions.upColor : mergedOptions.downColor);
+      const lastDirection = 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";
       ctx.save();
@@ -2061,7 +2123,7 @@ function createChart(element, options = {}) {
       x,
       y,
       region,
-      ...region === "plot" ? { price: Number(priceFromCanvasY(y).toFixed(mergedOptions.priceDecimals)) } : {},
+      ...region === "plot" ? { price: roundToPricePrecision(priceFromCanvasY(y)) } : {},
       ...index === null ? {} : { index },
       ...hoverTime ? { time: hoverTime.toISOString() } : {},
       ...point ? { point } : {}
@@ -2107,7 +2169,7 @@ function createChart(element, options = {}) {
     if (orderRegion) {
       if (orderRegion.draggable) {
         activePointerId = event.pointerId;
-        const startPrice = Number(orderRegion.line.price.toFixed(2));
+        const startPrice = roundToPricePrecision(orderRegion.line.price);
         actionDragState = {
           orderId: orderRegion.orderId,
           action: orderRegion.action,
@@ -2166,7 +2228,7 @@ function createChart(element, options = {}) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
       }
-      const nextPrice = Number(priceFromCanvasY(point.y).toFixed(2));
+      const nextPrice = roundToPricePrecision(priceFromCanvasY(point.y));
       if (nextPrice !== orderDragState.lastPrice) {
         orderDragState.lastPrice = nextPrice;
         orderLines = orderLines.map((line) => {
@@ -2196,7 +2258,7 @@ function createChart(element, options = {}) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
       }
-      const nextPrice = Number(priceFromCanvasY(point.y).toFixed(2));
+      const nextPrice = roundToPricePrecision(priceFromCanvasY(point.y));
       if (nextPrice !== actionDragState.lastPrice) {
         actionDragState.lastPrice = nextPrice;
         actionDragState.moved = true;
@@ -2313,7 +2375,7 @@ function createChart(element, options = {}) {
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
       if (!pointerDownInfo.moved) {
-        const clickPrice = pointerDownInfo.region === "plot" ? Number(priceFromCanvasY(pointerDownInfo.y).toFixed(2)) : void 0;
+        const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
           y: pointerDownInfo.y,
@@ -2373,7 +2435,7 @@ function createChart(element, options = {}) {
       }
       orderActionHandler?.({
         action: "createLimit",
-        price: Number(priceFromCanvasY(point.y).toFixed(2))
+        price: roundToPricePrecision(priceFromCanvasY(point.y))
       });
       return;
     }

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

@@ -22,6 +22,8 @@ interface ChartOptions {
     candleBodyWidthRatio?: number;
     candleMinWidth?: number;
     candleWickWidth?: number;
+    candleColorMode?: "openClose" | "prevClose";
+    candleColorEpsilon?: number;
     autoScaleSmoothing?: number;
     autoScaleIgnoreLatestCandle?: boolean;
     doubleClickEnabled?: boolean;
@@ -65,6 +67,7 @@ interface IndicatorRenderContext {
     chartHeight: number;
     xFromIndex: (index: number) => number;
     yFromPrice: ((price: number) => number) | null;
+    getCandleDirectionByIndex: (index: number) => "up" | "down";
     candleSpacing: number;
     upColor: string;
     downColor: string;

package/dist/hyperprop-charting-library.js

@@ -127,6 +127,8 @@ var DEFAULT_OPTIONS = {
   candleBodyWidthRatio: 0.7,
   candleMinWidth: 0.5,
   candleWickWidth: 1,
+  candleColorMode: "openClose",
+  candleColorEpsilon: -1,
   autoScaleSmoothing: 0.16,
   autoScaleIgnoreLatestCandle: true,
   doubleClickEnabled: true,
@@ -487,11 +489,11 @@ var BUILTIN_VOLUME_INDICATOR = {
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
       const barY = Math.round(paneBottom - volumeHeight);
-      const isUp = point.c >= point.o;
-      const opacity = isUp ? upOpacity : downOpacity;
+      const direction = renderContext.getCandleDirectionByIndex(index);
+      const opacity = direction === "up" ? upOpacity : downOpacity;
       ctx.save();
       ctx.globalAlpha = opacity;
-      ctx.fillStyle = isUp ? upColor : downColor;
+      ctx.fillStyle = direction === "up" ? upColor : downColor;
       ctx.fillRect(barX, barY, Math.max(1, Math.round(barWidth)), volumeHeight);
       ctx.restore();
     }
@@ -843,6 +845,24 @@ function createChart(element, options = {}) {
     const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
     return price.toFixed(decimals);
   };
+  const roundToPricePrecision = (price) => {
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    return Number(price.toFixed(decimals));
+  };
+  const getResolvedCandleColorEpsilon = () => {
+    const configured = mergedOptions.candleColorEpsilon;
+    if (configured >= 0) {
+      return configured;
+    }
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    return decimals > 0 ? 0.5 / 10 ** decimals : 0;
+  };
+  const getDirectionFromDelta = (delta) => {
+    const epsilon = Math.max(0, getResolvedCandleColorEpsilon());
+    if (delta > epsilon) return 1;
+    if (delta < -epsilon) return -1;
+    return 0;
+  };
   const getStabilizedPriceTemplate = () => {
     const explicitTemplate = mergedOptions.priceLabelWidthTemplate.trim();
     if (explicitTemplate.length > 0) {
@@ -869,14 +889,33 @@ function createChart(element, options = {}) {
     return Math.max(measured, templateWidth);
   };
   const parseData = (nextData) => {
-    return nextData.map((point) => ({
-      time: new Date(point.t),
-      o: point.o,
-      h: point.h,
-      l: point.l,
-      c: point.c,
-      ...point.v === void 0 ? {} : { v: point.v }
-    })).filter((point) => Number.isFinite(point.time.getTime())).sort((a, b) => a.time.getTime() - b.time.getTime());
+    const dedupedByTime = /* @__PURE__ */ new Map();
+    for (const point of nextData) {
+      const time = new Date(point.t);
+      const timeMs = time.getTime();
+      if (!Number.isFinite(timeMs)) {
+        continue;
+      }
+      const open = Number(point.o);
+      const close = Number(point.c);
+      const highInput = Number(point.h);
+      const lowInput = Number(point.l);
+      if (!Number.isFinite(open) || !Number.isFinite(close) || !Number.isFinite(highInput) || !Number.isFinite(lowInput)) {
+        continue;
+      }
+      const normalizedHigh = Math.max(highInput, open, close);
+      const normalizedLow = Math.min(lowInput, open, close);
+      const volumeValue = point.v === void 0 ? void 0 : Number(point.v);
+      dedupedByTime.set(timeMs, {
+        time,
+        o: open,
+        h: normalizedHigh,
+        l: normalizedLow,
+        c: close,
+        ...volumeValue === void 0 || !Number.isFinite(volumeValue) ? {} : { v: volumeValue }
+      });
+    }
+    return Array.from(dedupedByTime.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
   };
   const getTimeStepMs = () => {
     if (data.length < 2) {
@@ -953,6 +992,26 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const getCandleDirectionByIndex = (index) => {
+    const point = data[index];
+    if (!point) {
+      return "up";
+    }
+    const prevPoint = index > 0 ? data[index - 1] : void 0;
+    const mode = mergedOptions.candleColorMode;
+    const baseForMode = mode === "prevClose" && prevPoint ? prevPoint.c : point.o;
+    let direction = getDirectionFromDelta(point.c - baseForMode);
+    if (direction === 0 && mode === "prevClose") {
+      direction = getDirectionFromDelta(point.c - point.o);
+    }
+    if (direction === 0 && prevPoint) {
+      direction = getDirectionFromDelta(point.c - prevPoint.c);
+    }
+    if (direction === 0) {
+      return point.c >= point.o ? "up" : "down";
+    }
+    return direction > 0 ? "up" : "down";
+  };
   const formatHoverTimeLabel = (time, mode) => {
     if (mode === "time") {
       return time.toLocaleTimeString(void 0, {
@@ -1538,8 +1597,8 @@ function createChart(element, options = {}) {
       const closeY = yFromPrice(point.c);
       const highY = yFromPrice(point.h);
       const lowY = yFromPrice(point.l);
-      const isUp = point.c >= point.o;
-      const candleColor = isUp ? mergedOptions.upColor : mergedOptions.downColor;
+      const direction = getCandleDirectionByIndex(index);
+      const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
       ctx.strokeStyle = candleColor;
       ctx.lineWidth = candleWickWidth;
       ctx.beginPath();
@@ -1573,6 +1632,7 @@ function createChart(element, options = {}) {
             chartHeight,
             xFromIndex,
             yFromPrice,
+            getCandleDirectionByIndex,
             candleSpacing,
             upColor: mergedOptions.upColor,
             downColor: mergedOptions.downColor
@@ -1632,6 +1692,7 @@ function createChart(element, options = {}) {
             chartHeight: paneHeight,
             xFromIndex,
             yFromPrice: null,
+            getCandleDirectionByIndex,
             candleSpacing,
             upColor: mergedOptions.upColor,
             downColor: mergedOptions.downColor
@@ -1669,7 +1730,8 @@ function createChart(element, options = {}) {
       const tickerPrice = lastPoint.c;
       const tickerY = yFromPrice(tickerPrice);
       const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
-      const tickerColor = ticker.color ?? (lastPoint.c >= lastPoint.o ? mergedOptions.upColor : mergedOptions.downColor);
+      const lastDirection = 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";
       ctx.save();
@@ -2037,7 +2099,7 @@ function createChart(element, options = {}) {
       x,
       y,
       region,
-      ...region === "plot" ? { price: Number(priceFromCanvasY(y).toFixed(mergedOptions.priceDecimals)) } : {},
+      ...region === "plot" ? { price: roundToPricePrecision(priceFromCanvasY(y)) } : {},
       ...index === null ? {} : { index },
       ...hoverTime ? { time: hoverTime.toISOString() } : {},
       ...point ? { point } : {}
@@ -2083,7 +2145,7 @@ function createChart(element, options = {}) {
     if (orderRegion) {
       if (orderRegion.draggable) {
         activePointerId = event.pointerId;
-        const startPrice = Number(orderRegion.line.price.toFixed(2));
+        const startPrice = roundToPricePrecision(orderRegion.line.price);
         actionDragState = {
           orderId: orderRegion.orderId,
           action: orderRegion.action,
@@ -2142,7 +2204,7 @@ function createChart(element, options = {}) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
       }
-      const nextPrice = Number(priceFromCanvasY(point.y).toFixed(2));
+      const nextPrice = roundToPricePrecision(priceFromCanvasY(point.y));
       if (nextPrice !== orderDragState.lastPrice) {
         orderDragState.lastPrice = nextPrice;
         orderLines = orderLines.map((line) => {
@@ -2172,7 +2234,7 @@ function createChart(element, options = {}) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
       }
-      const nextPrice = Number(priceFromCanvasY(point.y).toFixed(2));
+      const nextPrice = roundToPricePrecision(priceFromCanvasY(point.y));
       if (nextPrice !== actionDragState.lastPrice) {
         actionDragState.lastPrice = nextPrice;
         actionDragState.moved = true;
@@ -2289,7 +2351,7 @@ function createChart(element, options = {}) {
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
       if (!pointerDownInfo.moved) {
-        const clickPrice = pointerDownInfo.region === "plot" ? Number(priceFromCanvasY(pointerDownInfo.y).toFixed(2)) : void 0;
+        const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
           y: pointerDownInfo.y,
@@ -2349,7 +2411,7 @@ function createChart(element, options = {}) {
       }
       orderActionHandler?.({
         action: "createLimit",
-        price: Number(priceFromCanvasY(point.y).toFixed(2))
+        price: roundToPricePrecision(priceFromCanvasY(point.y))
       });
       return;
     }

package/dist/index.cjs

@@ -151,6 +151,8 @@ var DEFAULT_OPTIONS = {
   candleBodyWidthRatio: 0.7,
   candleMinWidth: 0.5,
   candleWickWidth: 1,
+  candleColorMode: "openClose",
+  candleColorEpsilon: -1,
   autoScaleSmoothing: 0.16,
   autoScaleIgnoreLatestCandle: true,
   doubleClickEnabled: true,
@@ -511,11 +513,11 @@ var BUILTIN_VOLUME_INDICATOR = {
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
       const barY = Math.round(paneBottom - volumeHeight);
-      const isUp = point.c >= point.o;
-      const opacity = isUp ? upOpacity : downOpacity;
+      const direction = renderContext.getCandleDirectionByIndex(index);
+      const opacity = direction === "up" ? upOpacity : downOpacity;
       ctx.save();
       ctx.globalAlpha = opacity;
-      ctx.fillStyle = isUp ? upColor : downColor;
+      ctx.fillStyle = direction === "up" ? upColor : downColor;
       ctx.fillRect(barX, barY, Math.max(1, Math.round(barWidth)), volumeHeight);
       ctx.restore();
     }
@@ -867,6 +869,24 @@ function createChart(element, options = {}) {
     const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
     return price.toFixed(decimals);
   };
+  const roundToPricePrecision = (price) => {
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    return Number(price.toFixed(decimals));
+  };
+  const getResolvedCandleColorEpsilon = () => {
+    const configured = mergedOptions.candleColorEpsilon;
+    if (configured >= 0) {
+      return configured;
+    }
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    return decimals > 0 ? 0.5 / 10 ** decimals : 0;
+  };
+  const getDirectionFromDelta = (delta) => {
+    const epsilon = Math.max(0, getResolvedCandleColorEpsilon());
+    if (delta > epsilon) return 1;
+    if (delta < -epsilon) return -1;
+    return 0;
+  };
   const getStabilizedPriceTemplate = () => {
     const explicitTemplate = mergedOptions.priceLabelWidthTemplate.trim();
     if (explicitTemplate.length > 0) {
@@ -893,14 +913,33 @@ function createChart(element, options = {}) {
     return Math.max(measured, templateWidth);
   };
   const parseData = (nextData) => {
-    return nextData.map((point) => ({
-      time: new Date(point.t),
-      o: point.o,
-      h: point.h,
-      l: point.l,
-      c: point.c,
-      ...point.v === void 0 ? {} : { v: point.v }
-    })).filter((point) => Number.isFinite(point.time.getTime())).sort((a, b) => a.time.getTime() - b.time.getTime());
+    const dedupedByTime = /* @__PURE__ */ new Map();
+    for (const point of nextData) {
+      const time = new Date(point.t);
+      const timeMs = time.getTime();
+      if (!Number.isFinite(timeMs)) {
+        continue;
+      }
+      const open = Number(point.o);
+      const close = Number(point.c);
+      const highInput = Number(point.h);
+      const lowInput = Number(point.l);
+      if (!Number.isFinite(open) || !Number.isFinite(close) || !Number.isFinite(highInput) || !Number.isFinite(lowInput)) {
+        continue;
+      }
+      const normalizedHigh = Math.max(highInput, open, close);
+      const normalizedLow = Math.min(lowInput, open, close);
+      const volumeValue = point.v === void 0 ? void 0 : Number(point.v);
+      dedupedByTime.set(timeMs, {
+        time,
+        o: open,
+        h: normalizedHigh,
+        l: normalizedLow,
+        c: close,
+        ...volumeValue === void 0 || !Number.isFinite(volumeValue) ? {} : { v: volumeValue }
+      });
+    }
+    return Array.from(dedupedByTime.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
   };
   const getTimeStepMs = () => {
     if (data.length < 2) {
@@ -977,6 +1016,26 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const getCandleDirectionByIndex = (index) => {
+    const point = data[index];
+    if (!point) {
+      return "up";
+    }
+    const prevPoint = index > 0 ? data[index - 1] : void 0;
+    const mode = mergedOptions.candleColorMode;
+    const baseForMode = mode === "prevClose" && prevPoint ? prevPoint.c : point.o;
+    let direction = getDirectionFromDelta(point.c - baseForMode);
+    if (direction === 0 && mode === "prevClose") {
+      direction = getDirectionFromDelta(point.c - point.o);
+    }
+    if (direction === 0 && prevPoint) {
+      direction = getDirectionFromDelta(point.c - prevPoint.c);
+    }
+    if (direction === 0) {
+      return point.c >= point.o ? "up" : "down";
+    }
+    return direction > 0 ? "up" : "down";
+  };
   const formatHoverTimeLabel = (time, mode) => {
     if (mode === "time") {
       return time.toLocaleTimeString(void 0, {
@@ -1562,8 +1621,8 @@ function createChart(element, options = {}) {
       const closeY = yFromPrice(point.c);
       const highY = yFromPrice(point.h);
       const lowY = yFromPrice(point.l);
-      const isUp = point.c >= point.o;
-      const candleColor = isUp ? mergedOptions.upColor : mergedOptions.downColor;
+      const direction = getCandleDirectionByIndex(index);
+      const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
       ctx.strokeStyle = candleColor;
       ctx.lineWidth = candleWickWidth;
       ctx.beginPath();
@@ -1597,6 +1656,7 @@ function createChart(element, options = {}) {
             chartHeight,
             xFromIndex,
             yFromPrice,
+            getCandleDirectionByIndex,
             candleSpacing,
             upColor: mergedOptions.upColor,
             downColor: mergedOptions.downColor
@@ -1656,6 +1716,7 @@ function createChart(element, options = {}) {
             chartHeight: paneHeight,
             xFromIndex,
             yFromPrice: null,
+            getCandleDirectionByIndex,
             candleSpacing,
             upColor: mergedOptions.upColor,
             downColor: mergedOptions.downColor
@@ -1693,7 +1754,8 @@ function createChart(element, options = {}) {
       const tickerPrice = lastPoint.c;
       const tickerY = yFromPrice(tickerPrice);
       const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
-      const tickerColor = ticker.color ?? (lastPoint.c >= lastPoint.o ? mergedOptions.upColor : mergedOptions.downColor);
+      const lastDirection = 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";
       ctx.save();
@@ -2061,7 +2123,7 @@ function createChart(element, options = {}) {
       x,
       y,
       region,
-      ...region === "plot" ? { price: Number(priceFromCanvasY(y).toFixed(mergedOptions.priceDecimals)) } : {},
+      ...region === "plot" ? { price: roundToPricePrecision(priceFromCanvasY(y)) } : {},
       ...index === null ? {} : { index },
       ...hoverTime ? { time: hoverTime.toISOString() } : {},
       ...point ? { point } : {}
@@ -2107,7 +2169,7 @@ function createChart(element, options = {}) {
     if (orderRegion) {
       if (orderRegion.draggable) {
         activePointerId = event.pointerId;
-        const startPrice = Number(orderRegion.line.price.toFixed(2));
+        const startPrice = roundToPricePrecision(orderRegion.line.price);
         actionDragState = {
           orderId: orderRegion.orderId,
           action: orderRegion.action,
@@ -2166,7 +2228,7 @@ function createChart(element, options = {}) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
       }
-      const nextPrice = Number(priceFromCanvasY(point.y).toFixed(2));
+      const nextPrice = roundToPricePrecision(priceFromCanvasY(point.y));
       if (nextPrice !== orderDragState.lastPrice) {
         orderDragState.lastPrice = nextPrice;
         orderLines = orderLines.map((line) => {
@@ -2196,7 +2258,7 @@ function createChart(element, options = {}) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
       }
-      const nextPrice = Number(priceFromCanvasY(point.y).toFixed(2));
+      const nextPrice = roundToPricePrecision(priceFromCanvasY(point.y));
       if (nextPrice !== actionDragState.lastPrice) {
         actionDragState.lastPrice = nextPrice;
         actionDragState.moved = true;
@@ -2313,7 +2375,7 @@ function createChart(element, options = {}) {
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
       if (!pointerDownInfo.moved) {
-        const clickPrice = pointerDownInfo.region === "plot" ? Number(priceFromCanvasY(pointerDownInfo.y).toFixed(2)) : void 0;
+        const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
           y: pointerDownInfo.y,
@@ -2373,7 +2435,7 @@ function createChart(element, options = {}) {
       }
       orderActionHandler?.({
         action: "createLimit",
-        price: Number(priceFromCanvasY(point.y).toFixed(2))
+        price: roundToPricePrecision(priceFromCanvasY(point.y))
       });
       return;
     }

package/dist/index.d.cts

@@ -22,6 +22,8 @@ interface ChartOptions {
     candleBodyWidthRatio?: number;
     candleMinWidth?: number;
     candleWickWidth?: number;
+    candleColorMode?: "openClose" | "prevClose";
+    candleColorEpsilon?: number;
     autoScaleSmoothing?: number;
     autoScaleIgnoreLatestCandle?: boolean;
     doubleClickEnabled?: boolean;
@@ -65,6 +67,7 @@ interface IndicatorRenderContext {
     chartHeight: number;
     xFromIndex: (index: number) => number;
     yFromPrice: ((price: number) => number) | null;
+    getCandleDirectionByIndex: (index: number) => "up" | "down";
     candleSpacing: number;
     upColor: string;
     downColor: string;

package/dist/index.d.ts

@@ -22,6 +22,8 @@ interface ChartOptions {
     candleBodyWidthRatio?: number;
     candleMinWidth?: number;
     candleWickWidth?: number;
+    candleColorMode?: "openClose" | "prevClose";
+    candleColorEpsilon?: number;
     autoScaleSmoothing?: number;
     autoScaleIgnoreLatestCandle?: boolean;
     doubleClickEnabled?: boolean;
@@ -65,6 +67,7 @@ interface IndicatorRenderContext {
     chartHeight: number;
     xFromIndex: (index: number) => number;
     yFromPrice: ((price: number) => number) | null;
+    getCandleDirectionByIndex: (index: number) => "up" | "down";
     candleSpacing: number;
     upColor: string;
     downColor: string;

package/dist/index.js

@@ -127,6 +127,8 @@ var DEFAULT_OPTIONS = {
   candleBodyWidthRatio: 0.7,
   candleMinWidth: 0.5,
   candleWickWidth: 1,
+  candleColorMode: "openClose",
+  candleColorEpsilon: -1,
   autoScaleSmoothing: 0.16,
   autoScaleIgnoreLatestCandle: true,
   doubleClickEnabled: true,
@@ -487,11 +489,11 @@ var BUILTIN_VOLUME_INDICATOR = {
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
       const barY = Math.round(paneBottom - volumeHeight);
-      const isUp = point.c >= point.o;
-      const opacity = isUp ? upOpacity : downOpacity;
+      const direction = renderContext.getCandleDirectionByIndex(index);
+      const opacity = direction === "up" ? upOpacity : downOpacity;
       ctx.save();
       ctx.globalAlpha = opacity;
-      ctx.fillStyle = isUp ? upColor : downColor;
+      ctx.fillStyle = direction === "up" ? upColor : downColor;
       ctx.fillRect(barX, barY, Math.max(1, Math.round(barWidth)), volumeHeight);
       ctx.restore();
     }
@@ -843,6 +845,24 @@ function createChart(element, options = {}) {
     const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
     return price.toFixed(decimals);
   };
+  const roundToPricePrecision = (price) => {
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    return Number(price.toFixed(decimals));
+  };
+  const getResolvedCandleColorEpsilon = () => {
+    const configured = mergedOptions.candleColorEpsilon;
+    if (configured >= 0) {
+      return configured;
+    }
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    return decimals > 0 ? 0.5 / 10 ** decimals : 0;
+  };
+  const getDirectionFromDelta = (delta) => {
+    const epsilon = Math.max(0, getResolvedCandleColorEpsilon());
+    if (delta > epsilon) return 1;
+    if (delta < -epsilon) return -1;
+    return 0;
+  };
   const getStabilizedPriceTemplate = () => {
     const explicitTemplate = mergedOptions.priceLabelWidthTemplate.trim();
     if (explicitTemplate.length > 0) {
@@ -869,14 +889,33 @@ function createChart(element, options = {}) {
     return Math.max(measured, templateWidth);
   };
   const parseData = (nextData) => {
-    return nextData.map((point) => ({
-      time: new Date(point.t),
-      o: point.o,
-      h: point.h,
-      l: point.l,
-      c: point.c,
-      ...point.v === void 0 ? {} : { v: point.v }
-    })).filter((point) => Number.isFinite(point.time.getTime())).sort((a, b) => a.time.getTime() - b.time.getTime());
+    const dedupedByTime = /* @__PURE__ */ new Map();
+    for (const point of nextData) {
+      const time = new Date(point.t);
+      const timeMs = time.getTime();
+      if (!Number.isFinite(timeMs)) {
+        continue;
+      }
+      const open = Number(point.o);
+      const close = Number(point.c);
+      const highInput = Number(point.h);
+      const lowInput = Number(point.l);
+      if (!Number.isFinite(open) || !Number.isFinite(close) || !Number.isFinite(highInput) || !Number.isFinite(lowInput)) {
+        continue;
+      }
+      const normalizedHigh = Math.max(highInput, open, close);
+      const normalizedLow = Math.min(lowInput, open, close);
+      const volumeValue = point.v === void 0 ? void 0 : Number(point.v);
+      dedupedByTime.set(timeMs, {
+        time,
+        o: open,
+        h: normalizedHigh,
+        l: normalizedLow,
+        c: close,
+        ...volumeValue === void 0 || !Number.isFinite(volumeValue) ? {} : { v: volumeValue }
+      });
+    }
+    return Array.from(dedupedByTime.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
   };
   const getTimeStepMs = () => {
     if (data.length < 2) {
@@ -953,6 +992,26 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const getCandleDirectionByIndex = (index) => {
+    const point = data[index];
+    if (!point) {
+      return "up";
+    }
+    const prevPoint = index > 0 ? data[index - 1] : void 0;
+    const mode = mergedOptions.candleColorMode;
+    const baseForMode = mode === "prevClose" && prevPoint ? prevPoint.c : point.o;
+    let direction = getDirectionFromDelta(point.c - baseForMode);
+    if (direction === 0 && mode === "prevClose") {
+      direction = getDirectionFromDelta(point.c - point.o);
+    }
+    if (direction === 0 && prevPoint) {
+      direction = getDirectionFromDelta(point.c - prevPoint.c);
+    }
+    if (direction === 0) {
+      return point.c >= point.o ? "up" : "down";
+    }
+    return direction > 0 ? "up" : "down";
+  };
   const formatHoverTimeLabel = (time, mode) => {
     if (mode === "time") {
       return time.toLocaleTimeString(void 0, {
@@ -1538,8 +1597,8 @@ function createChart(element, options = {}) {
       const closeY = yFromPrice(point.c);
       const highY = yFromPrice(point.h);
       const lowY = yFromPrice(point.l);
-      const isUp = point.c >= point.o;
-      const candleColor = isUp ? mergedOptions.upColor : mergedOptions.downColor;
+      const direction = getCandleDirectionByIndex(index);
+      const candleColor = direction === "up" ? mergedOptions.upColor : mergedOptions.downColor;
       ctx.strokeStyle = candleColor;
       ctx.lineWidth = candleWickWidth;
       ctx.beginPath();
@@ -1573,6 +1632,7 @@ function createChart(element, options = {}) {
             chartHeight,
             xFromIndex,
             yFromPrice,
+            getCandleDirectionByIndex,
             candleSpacing,
             upColor: mergedOptions.upColor,
             downColor: mergedOptions.downColor
@@ -1632,6 +1692,7 @@ function createChart(element, options = {}) {
             chartHeight: paneHeight,
             xFromIndex,
             yFromPrice: null,
+            getCandleDirectionByIndex,
             candleSpacing,
             upColor: mergedOptions.upColor,
             downColor: mergedOptions.downColor
@@ -1669,7 +1730,8 @@ function createChart(element, options = {}) {
       const tickerPrice = lastPoint.c;
       const tickerY = yFromPrice(tickerPrice);
       const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
-      const tickerColor = ticker.color ?? (lastPoint.c >= lastPoint.o ? mergedOptions.upColor : mergedOptions.downColor);
+      const lastDirection = 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";
       ctx.save();
@@ -2037,7 +2099,7 @@ function createChart(element, options = {}) {
       x,
       y,
       region,
-      ...region === "plot" ? { price: Number(priceFromCanvasY(y).toFixed(mergedOptions.priceDecimals)) } : {},
+      ...region === "plot" ? { price: roundToPricePrecision(priceFromCanvasY(y)) } : {},
       ...index === null ? {} : { index },
       ...hoverTime ? { time: hoverTime.toISOString() } : {},
       ...point ? { point } : {}
@@ -2083,7 +2145,7 @@ function createChart(element, options = {}) {
     if (orderRegion) {
       if (orderRegion.draggable) {
         activePointerId = event.pointerId;
-        const startPrice = Number(orderRegion.line.price.toFixed(2));
+        const startPrice = roundToPricePrecision(orderRegion.line.price);
         actionDragState = {
           orderId: orderRegion.orderId,
           action: orderRegion.action,
@@ -2142,7 +2204,7 @@ function createChart(element, options = {}) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
       }
-      const nextPrice = Number(priceFromCanvasY(point.y).toFixed(2));
+      const nextPrice = roundToPricePrecision(priceFromCanvasY(point.y));
       if (nextPrice !== orderDragState.lastPrice) {
         orderDragState.lastPrice = nextPrice;
         orderLines = orderLines.map((line) => {
@@ -2172,7 +2234,7 @@ function createChart(element, options = {}) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
       }
-      const nextPrice = Number(priceFromCanvasY(point.y).toFixed(2));
+      const nextPrice = roundToPricePrecision(priceFromCanvasY(point.y));
       if (nextPrice !== actionDragState.lastPrice) {
         actionDragState.lastPrice = nextPrice;
         actionDragState.moved = true;
@@ -2289,7 +2351,7 @@ function createChart(element, options = {}) {
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
       if (!pointerDownInfo.moved) {
-        const clickPrice = pointerDownInfo.region === "plot" ? Number(priceFromCanvasY(pointerDownInfo.y).toFixed(2)) : void 0;
+        const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
           y: pointerDownInfo.y,
@@ -2349,7 +2411,7 @@ function createChart(element, options = {}) {
       }
       orderActionHandler?.({
         action: "createLimit",
-        price: Number(priceFromCanvasY(point.y).toFixed(2))
+        price: roundToPricePrecision(priceFromCanvasY(point.y))
       });
       return;
     }

package/docs/API.md

@@ -50,6 +50,8 @@ Top-level options:
 - `candleBodyWidthRatio` (default `0.7`)
 - `candleMinWidth` (default `0.5`)
 - `candleWickWidth` (default `1`)
+- `candleColorMode` (`"openClose" | "prevClose"`, default `"openClose"`)
+- `candleColorEpsilon` (default `-1` = auto from `priceDecimals`; set `0` to disable tolerance)
 - `autoScaleSmoothing` (default `0.16`)
 - `autoScaleIgnoreLatestCandle` (default `true`)
 - `doubleClickEnabled` (default `true`)

package/docs/RECIPES.md

@@ -26,6 +26,26 @@ Use:
 - `autoScaleSmoothing` for smoother scale transitions
 - `autoScaleIgnoreLatestCandle` to reduce live-candle jitter
 
+## Stabilize candle up/down coloring on tiny deltas
+
+```ts
+const chart = createChart(rootEl, {
+  // default behavior
+  candleColorMode: "openClose",
+  // auto epsilon from priceDecimals (recommended)
+  candleColorEpsilon: -1
+});
+```
+
+Use previous-close mode if your UX expects green/red by last-close change:
+
+```ts
+const chart = createChart(rootEl, {
+  candleColorMode: "prevClose",
+  candleColorEpsilon: -1
+});
+```
+
 ## Add a static alert/level line
 
 ```ts

package/package.json

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