hyperprop-charting-library 0.1.123 → 0.1.125

package/dist/hyperprop-charting-library.cjs

@@ -303,6 +303,16 @@ var getIndicatorSourceValue = (point, source) => {
 var clampIndicatorLength = (value, fallback) => {
   return Math.max(1, Math.round(Number(value) || fallback));
 };
+var isFullyWhiteColor = (value) => {
+  if (!value) return false;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "white" || normalized === "#fff" || normalized === "#ffffff") return true;
+  const rgb = /^rgba?\(\s*255\s*,\s*255\s*,\s*255\s*(?:,\s*[\d.]+\s*)?\)$/.exec(normalized);
+  return rgb !== null;
+};
+var labelTextColorOn = (background, textColor) => {
+  return isFullyWhiteColor(background) ? "#000000" : textColor;
+};
 var computeSmaSeries = (data, length, source) => {
   const result = new Array(data.length).fill(null);
   let sum = 0;
@@ -1364,7 +1374,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -1801,6 +1811,56 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const indexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    const firstMs = data[0].time.getTime();
+    const lastMs = data[data.length - 1].time.getTime();
+    if (timeMs < firstMs) {
+      const stepMs = getTimeStepMs();
+      return stepMs > 0 ? (timeMs - firstMs) / stepMs : 0;
+    }
+    if (timeMs > lastMs) {
+      const stepMs = getTimeStepMs();
+      return data.length - 1 + (stepMs > 0 ? (timeMs - lastMs) / stepMs : 0);
+    }
+    return findNearestIndexForTimeMs(timeMs);
+  };
+  const reanchorDrawingPoint = (point) => {
+    if (!point.time) {
+      return point;
+    }
+    const timeMs = Date.parse(point.time);
+    if (!Number.isFinite(timeMs)) {
+      return point;
+    }
+    const rounded = Math.round(point.index);
+    if (data[rounded]?.time.getTime() === timeMs) {
+      return point;
+    }
+    const mapped = indexForTimeMs(timeMs);
+    if (mapped === null) {
+      return point;
+    }
+    const fraction = point.index - rounded;
+    return { ...point, index: mapped + fraction };
+  };
+  const reanchorDrawingsToData = () => {
+    if (data.length === 0) {
+      return;
+    }
+    drawings = drawings.map((drawing) => ({
+      ...drawing,
+      points: drawing.points.map((point) => reanchorDrawingPoint(point))
+    }));
+    if (draftDrawing) {
+      draftDrawing = {
+        ...draftDrawing,
+        points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
+      };
+    }
+  };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
     if (!point) {
@@ -1933,7 +1993,7 @@ function createChart(element, options = {}) {
       labelY + labelHeight / 2,
       "left",
       "middle",
-      mergedLine.labelTextColor
+      labelTextColorOn(mergedLine.labelBackgroundColor, mergedLine.labelTextColor)
     );
   };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
@@ -2073,7 +2133,10 @@ function createChart(element, options = {}) {
     const borderRadius = Math.max(0, mergedLine.labelBorderRadius);
     const widgetBackground = mergedOptions.backgroundColor;
     const widgetBorder = color;
-    const textColor = line.labelTextColor ?? (mergedLine.type === "takeProfit" ? "#5eead4" : mergedLine.type === "stop" ? "#fbbf24" : mergedLine.labelTextColor);
+    const textColor = labelTextColorOn(
+      widgetBackground,
+      line.labelTextColor ?? (mergedLine.type === "takeProfit" ? "#5eead4" : mergedLine.type === "stop" ? "#fbbf24" : mergedLine.labelTextColor)
+    );
     const mainWidgetX = leftWidgetX + actionButtonsTotalWidth + actionButtonsGap;
     ctx.fillStyle = widgetBackground;
     fillRoundedRect(Math.round(mainWidgetX), Math.round(widgetY), mainWidgetWidth, labelHeight, borderRadius);
@@ -3825,7 +3888,8 @@ function createChart(element, options = {}) {
         fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, label.height, labelRadius);
         const hasSubtexts = label.subtexts.length > 0;
         const primaryY = hasSubtexts ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
-        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        const effectiveTextColor = labelTextColorOn(label.backgroundColor, label.textColor);
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", effectiveTextColor);
         if (hasSubtexts) {
           const baseFont = ctx.font;
           ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
@@ -3836,7 +3900,7 @@ function createChart(element, options = {}) {
               label.y + baseLabelHeight + index * (label.subtextFontSize + 5) + label.subtextFontSize / 2,
               "left",
               "middle",
-              label.subtextColor ?? label.textColor
+              labelTextColorOn(label.backgroundColor, label.subtextColor ?? label.textColor)
             );
           });
           ctx.font = baseFont;
@@ -3993,7 +4057,7 @@ function createChart(element, options = {}) {
     const labelHeight = 20;
     const labelRadius = Math.max(0, crosshair.labelBorderRadius);
     const labelBackground = crosshair.labelBackgroundColor;
-    const labelTextColor = crosshair.labelTextColor;
+    const labelTextColor = labelTextColorOn(labelBackground, crosshair.labelTextColor);
     const labelBorderColor = crosshair.labelBorderColor;
     const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
     const labelBorderStyle = crosshair.labelBorderStyle;
@@ -5785,6 +5849,7 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    reanchorDrawingsToData();
     const lastPoint = data[data.length - 1];
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
@@ -5831,6 +5896,7 @@ function createChart(element, options = {}) {
       }
       merged.set(timeMs, parsed);
       data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+      reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
     scheduleDraw();
@@ -6013,11 +6079,13 @@ function createChart(element, options = {}) {
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
+    reanchorDrawingsToData();
     emitDrawingsChange();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
+    next.points = next.points.map((point) => reanchorDrawingPoint(point));
     drawings.push(next);
     emitDrawingsChange();
     scheduleDraw();
@@ -6029,7 +6097,7 @@ function createChart(element, options = {}) {
         ...serializeDrawing(drawing),
         ...patch,
         id,
-        points: patch.points ?? drawing.points
+        points: (patch.points ?? drawing.points).map((point) => reanchorDrawingPoint(point))
       }) : drawing
     );
     emitDrawingsChange();

package/dist/hyperprop-charting-library.js

@@ -277,6 +277,16 @@ var getIndicatorSourceValue = (point, source) => {
 var clampIndicatorLength = (value, fallback) => {
   return Math.max(1, Math.round(Number(value) || fallback));
 };
+var isFullyWhiteColor = (value) => {
+  if (!value) return false;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "white" || normalized === "#fff" || normalized === "#ffffff") return true;
+  const rgb = /^rgba?\(\s*255\s*,\s*255\s*,\s*255\s*(?:,\s*[\d.]+\s*)?\)$/.exec(normalized);
+  return rgb !== null;
+};
+var labelTextColorOn = (background, textColor) => {
+  return isFullyWhiteColor(background) ? "#000000" : textColor;
+};
 var computeSmaSeries = (data, length, source) => {
   const result = new Array(data.length).fill(null);
   let sum = 0;
@@ -1338,7 +1348,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -1775,6 +1785,56 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const indexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    const firstMs = data[0].time.getTime();
+    const lastMs = data[data.length - 1].time.getTime();
+    if (timeMs < firstMs) {
+      const stepMs = getTimeStepMs();
+      return stepMs > 0 ? (timeMs - firstMs) / stepMs : 0;
+    }
+    if (timeMs > lastMs) {
+      const stepMs = getTimeStepMs();
+      return data.length - 1 + (stepMs > 0 ? (timeMs - lastMs) / stepMs : 0);
+    }
+    return findNearestIndexForTimeMs(timeMs);
+  };
+  const reanchorDrawingPoint = (point) => {
+    if (!point.time) {
+      return point;
+    }
+    const timeMs = Date.parse(point.time);
+    if (!Number.isFinite(timeMs)) {
+      return point;
+    }
+    const rounded = Math.round(point.index);
+    if (data[rounded]?.time.getTime() === timeMs) {
+      return point;
+    }
+    const mapped = indexForTimeMs(timeMs);
+    if (mapped === null) {
+      return point;
+    }
+    const fraction = point.index - rounded;
+    return { ...point, index: mapped + fraction };
+  };
+  const reanchorDrawingsToData = () => {
+    if (data.length === 0) {
+      return;
+    }
+    drawings = drawings.map((drawing) => ({
+      ...drawing,
+      points: drawing.points.map((point) => reanchorDrawingPoint(point))
+    }));
+    if (draftDrawing) {
+      draftDrawing = {
+        ...draftDrawing,
+        points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
+      };
+    }
+  };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
     if (!point) {
@@ -1907,7 +1967,7 @@ function createChart(element, options = {}) {
       labelY + labelHeight / 2,
       "left",
       "middle",
-      mergedLine.labelTextColor
+      labelTextColorOn(mergedLine.labelBackgroundColor, mergedLine.labelTextColor)
     );
   };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
@@ -2047,7 +2107,10 @@ function createChart(element, options = {}) {
     const borderRadius = Math.max(0, mergedLine.labelBorderRadius);
     const widgetBackground = mergedOptions.backgroundColor;
     const widgetBorder = color;
-    const textColor = line.labelTextColor ?? (mergedLine.type === "takeProfit" ? "#5eead4" : mergedLine.type === "stop" ? "#fbbf24" : mergedLine.labelTextColor);
+    const textColor = labelTextColorOn(
+      widgetBackground,
+      line.labelTextColor ?? (mergedLine.type === "takeProfit" ? "#5eead4" : mergedLine.type === "stop" ? "#fbbf24" : mergedLine.labelTextColor)
+    );
     const mainWidgetX = leftWidgetX + actionButtonsTotalWidth + actionButtonsGap;
     ctx.fillStyle = widgetBackground;
     fillRoundedRect(Math.round(mainWidgetX), Math.round(widgetY), mainWidgetWidth, labelHeight, borderRadius);
@@ -3799,7 +3862,8 @@ function createChart(element, options = {}) {
         fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, label.height, labelRadius);
         const hasSubtexts = label.subtexts.length > 0;
         const primaryY = hasSubtexts ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
-        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        const effectiveTextColor = labelTextColorOn(label.backgroundColor, label.textColor);
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", effectiveTextColor);
         if (hasSubtexts) {
           const baseFont = ctx.font;
           ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
@@ -3810,7 +3874,7 @@ function createChart(element, options = {}) {
               label.y + baseLabelHeight + index * (label.subtextFontSize + 5) + label.subtextFontSize / 2,
               "left",
               "middle",
-              label.subtextColor ?? label.textColor
+              labelTextColorOn(label.backgroundColor, label.subtextColor ?? label.textColor)
             );
           });
           ctx.font = baseFont;
@@ -3967,7 +4031,7 @@ function createChart(element, options = {}) {
     const labelHeight = 20;
     const labelRadius = Math.max(0, crosshair.labelBorderRadius);
     const labelBackground = crosshair.labelBackgroundColor;
-    const labelTextColor = crosshair.labelTextColor;
+    const labelTextColor = labelTextColorOn(labelBackground, crosshair.labelTextColor);
     const labelBorderColor = crosshair.labelBorderColor;
     const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
     const labelBorderStyle = crosshair.labelBorderStyle;
@@ -5759,6 +5823,7 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    reanchorDrawingsToData();
     const lastPoint = data[data.length - 1];
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
@@ -5805,6 +5870,7 @@ function createChart(element, options = {}) {
       }
       merged.set(timeMs, parsed);
       data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+      reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
     scheduleDraw();
@@ -5987,11 +6053,13 @@ function createChart(element, options = {}) {
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
+    reanchorDrawingsToData();
     emitDrawingsChange();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
+    next.points = next.points.map((point) => reanchorDrawingPoint(point));
     drawings.push(next);
     emitDrawingsChange();
     scheduleDraw();
@@ -6003,7 +6071,7 @@ function createChart(element, options = {}) {
         ...serializeDrawing(drawing),
         ...patch,
         id,
-        points: patch.points ?? drawing.points
+        points: (patch.points ?? drawing.points).map((point) => reanchorDrawingPoint(point))
       }) : drawing
     );
     emitDrawingsChange();

package/dist/index.cjs

@@ -303,6 +303,16 @@ var getIndicatorSourceValue = (point, source) => {
 var clampIndicatorLength = (value, fallback) => {
   return Math.max(1, Math.round(Number(value) || fallback));
 };
+var isFullyWhiteColor = (value) => {
+  if (!value) return false;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "white" || normalized === "#fff" || normalized === "#ffffff") return true;
+  const rgb = /^rgba?\(\s*255\s*,\s*255\s*,\s*255\s*(?:,\s*[\d.]+\s*)?\)$/.exec(normalized);
+  return rgb !== null;
+};
+var labelTextColorOn = (background, textColor) => {
+  return isFullyWhiteColor(background) ? "#000000" : textColor;
+};
 var computeSmaSeries = (data, length, source) => {
   const result = new Array(data.length).fill(null);
   let sum = 0;
@@ -1364,7 +1374,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -1801,6 +1811,56 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const indexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    const firstMs = data[0].time.getTime();
+    const lastMs = data[data.length - 1].time.getTime();
+    if (timeMs < firstMs) {
+      const stepMs = getTimeStepMs();
+      return stepMs > 0 ? (timeMs - firstMs) / stepMs : 0;
+    }
+    if (timeMs > lastMs) {
+      const stepMs = getTimeStepMs();
+      return data.length - 1 + (stepMs > 0 ? (timeMs - lastMs) / stepMs : 0);
+    }
+    return findNearestIndexForTimeMs(timeMs);
+  };
+  const reanchorDrawingPoint = (point) => {
+    if (!point.time) {
+      return point;
+    }
+    const timeMs = Date.parse(point.time);
+    if (!Number.isFinite(timeMs)) {
+      return point;
+    }
+    const rounded = Math.round(point.index);
+    if (data[rounded]?.time.getTime() === timeMs) {
+      return point;
+    }
+    const mapped = indexForTimeMs(timeMs);
+    if (mapped === null) {
+      return point;
+    }
+    const fraction = point.index - rounded;
+    return { ...point, index: mapped + fraction };
+  };
+  const reanchorDrawingsToData = () => {
+    if (data.length === 0) {
+      return;
+    }
+    drawings = drawings.map((drawing) => ({
+      ...drawing,
+      points: drawing.points.map((point) => reanchorDrawingPoint(point))
+    }));
+    if (draftDrawing) {
+      draftDrawing = {
+        ...draftDrawing,
+        points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
+      };
+    }
+  };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
     if (!point) {
@@ -1933,7 +1993,7 @@ function createChart(element, options = {}) {
       labelY + labelHeight / 2,
       "left",
       "middle",
-      mergedLine.labelTextColor
+      labelTextColorOn(mergedLine.labelBackgroundColor, mergedLine.labelTextColor)
     );
   };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
@@ -2073,7 +2133,10 @@ function createChart(element, options = {}) {
     const borderRadius = Math.max(0, mergedLine.labelBorderRadius);
     const widgetBackground = mergedOptions.backgroundColor;
     const widgetBorder = color;
-    const textColor = line.labelTextColor ?? (mergedLine.type === "takeProfit" ? "#5eead4" : mergedLine.type === "stop" ? "#fbbf24" : mergedLine.labelTextColor);
+    const textColor = labelTextColorOn(
+      widgetBackground,
+      line.labelTextColor ?? (mergedLine.type === "takeProfit" ? "#5eead4" : mergedLine.type === "stop" ? "#fbbf24" : mergedLine.labelTextColor)
+    );
     const mainWidgetX = leftWidgetX + actionButtonsTotalWidth + actionButtonsGap;
     ctx.fillStyle = widgetBackground;
     fillRoundedRect(Math.round(mainWidgetX), Math.round(widgetY), mainWidgetWidth, labelHeight, borderRadius);
@@ -3825,7 +3888,8 @@ function createChart(element, options = {}) {
         fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, label.height, labelRadius);
         const hasSubtexts = label.subtexts.length > 0;
         const primaryY = hasSubtexts ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
-        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        const effectiveTextColor = labelTextColorOn(label.backgroundColor, label.textColor);
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", effectiveTextColor);
         if (hasSubtexts) {
           const baseFont = ctx.font;
           ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
@@ -3836,7 +3900,7 @@ function createChart(element, options = {}) {
               label.y + baseLabelHeight + index * (label.subtextFontSize + 5) + label.subtextFontSize / 2,
               "left",
               "middle",
-              label.subtextColor ?? label.textColor
+              labelTextColorOn(label.backgroundColor, label.subtextColor ?? label.textColor)
             );
           });
           ctx.font = baseFont;
@@ -3993,7 +4057,7 @@ function createChart(element, options = {}) {
     const labelHeight = 20;
     const labelRadius = Math.max(0, crosshair.labelBorderRadius);
     const labelBackground = crosshair.labelBackgroundColor;
-    const labelTextColor = crosshair.labelTextColor;
+    const labelTextColor = labelTextColorOn(labelBackground, crosshair.labelTextColor);
     const labelBorderColor = crosshair.labelBorderColor;
     const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
     const labelBorderStyle = crosshair.labelBorderStyle;
@@ -5785,6 +5849,7 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    reanchorDrawingsToData();
     const lastPoint = data[data.length - 1];
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
@@ -5831,6 +5896,7 @@ function createChart(element, options = {}) {
       }
       merged.set(timeMs, parsed);
       data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+      reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
     scheduleDraw();
@@ -6013,11 +6079,13 @@ function createChart(element, options = {}) {
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
+    reanchorDrawingsToData();
     emitDrawingsChange();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
+    next.points = next.points.map((point) => reanchorDrawingPoint(point));
     drawings.push(next);
     emitDrawingsChange();
     scheduleDraw();
@@ -6029,7 +6097,7 @@ function createChart(element, options = {}) {
         ...serializeDrawing(drawing),
         ...patch,
         id,
-        points: patch.points ?? drawing.points
+        points: (patch.points ?? drawing.points).map((point) => reanchorDrawingPoint(point))
       }) : drawing
     );
     emitDrawingsChange();

package/dist/index.js

@@ -277,6 +277,16 @@ var getIndicatorSourceValue = (point, source) => {
 var clampIndicatorLength = (value, fallback) => {
   return Math.max(1, Math.round(Number(value) || fallback));
 };
+var isFullyWhiteColor = (value) => {
+  if (!value) return false;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "white" || normalized === "#fff" || normalized === "#ffffff") return true;
+  const rgb = /^rgba?\(\s*255\s*,\s*255\s*,\s*255\s*(?:,\s*[\d.]+\s*)?\)$/.exec(normalized);
+  return rgb !== null;
+};
+var labelTextColorOn = (background, textColor) => {
+  return isFullyWhiteColor(background) ? "#000000" : textColor;
+};
 var computeSmaSeries = (data, length, source) => {
   const result = new Array(data.length).fill(null);
   let sum = 0;
@@ -1338,7 +1348,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -1775,6 +1785,56 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const indexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    const firstMs = data[0].time.getTime();
+    const lastMs = data[data.length - 1].time.getTime();
+    if (timeMs < firstMs) {
+      const stepMs = getTimeStepMs();
+      return stepMs > 0 ? (timeMs - firstMs) / stepMs : 0;
+    }
+    if (timeMs > lastMs) {
+      const stepMs = getTimeStepMs();
+      return data.length - 1 + (stepMs > 0 ? (timeMs - lastMs) / stepMs : 0);
+    }
+    return findNearestIndexForTimeMs(timeMs);
+  };
+  const reanchorDrawingPoint = (point) => {
+    if (!point.time) {
+      return point;
+    }
+    const timeMs = Date.parse(point.time);
+    if (!Number.isFinite(timeMs)) {
+      return point;
+    }
+    const rounded = Math.round(point.index);
+    if (data[rounded]?.time.getTime() === timeMs) {
+      return point;
+    }
+    const mapped = indexForTimeMs(timeMs);
+    if (mapped === null) {
+      return point;
+    }
+    const fraction = point.index - rounded;
+    return { ...point, index: mapped + fraction };
+  };
+  const reanchorDrawingsToData = () => {
+    if (data.length === 0) {
+      return;
+    }
+    drawings = drawings.map((drawing) => ({
+      ...drawing,
+      points: drawing.points.map((point) => reanchorDrawingPoint(point))
+    }));
+    if (draftDrawing) {
+      draftDrawing = {
+        ...draftDrawing,
+        points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
+      };
+    }
+  };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
     if (!point) {
@@ -1907,7 +1967,7 @@ function createChart(element, options = {}) {
       labelY + labelHeight / 2,
       "left",
       "middle",
-      mergedLine.labelTextColor
+      labelTextColorOn(mergedLine.labelBackgroundColor, mergedLine.labelTextColor)
     );
   };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
@@ -2047,7 +2107,10 @@ function createChart(element, options = {}) {
     const borderRadius = Math.max(0, mergedLine.labelBorderRadius);
     const widgetBackground = mergedOptions.backgroundColor;
     const widgetBorder = color;
-    const textColor = line.labelTextColor ?? (mergedLine.type === "takeProfit" ? "#5eead4" : mergedLine.type === "stop" ? "#fbbf24" : mergedLine.labelTextColor);
+    const textColor = labelTextColorOn(
+      widgetBackground,
+      line.labelTextColor ?? (mergedLine.type === "takeProfit" ? "#5eead4" : mergedLine.type === "stop" ? "#fbbf24" : mergedLine.labelTextColor)
+    );
     const mainWidgetX = leftWidgetX + actionButtonsTotalWidth + actionButtonsGap;
     ctx.fillStyle = widgetBackground;
     fillRoundedRect(Math.round(mainWidgetX), Math.round(widgetY), mainWidgetWidth, labelHeight, borderRadius);
@@ -3799,7 +3862,8 @@ function createChart(element, options = {}) {
         fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, label.height, labelRadius);
         const hasSubtexts = label.subtexts.length > 0;
         const primaryY = hasSubtexts ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
-        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        const effectiveTextColor = labelTextColorOn(label.backgroundColor, label.textColor);
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", effectiveTextColor);
         if (hasSubtexts) {
           const baseFont = ctx.font;
           ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
@@ -3810,7 +3874,7 @@ function createChart(element, options = {}) {
               label.y + baseLabelHeight + index * (label.subtextFontSize + 5) + label.subtextFontSize / 2,
               "left",
               "middle",
-              label.subtextColor ?? label.textColor
+              labelTextColorOn(label.backgroundColor, label.subtextColor ?? label.textColor)
             );
           });
           ctx.font = baseFont;
@@ -3967,7 +4031,7 @@ function createChart(element, options = {}) {
     const labelHeight = 20;
     const labelRadius = Math.max(0, crosshair.labelBorderRadius);
     const labelBackground = crosshair.labelBackgroundColor;
-    const labelTextColor = crosshair.labelTextColor;
+    const labelTextColor = labelTextColorOn(labelBackground, crosshair.labelTextColor);
     const labelBorderColor = crosshair.labelBorderColor;
     const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
     const labelBorderStyle = crosshair.labelBorderStyle;
@@ -5759,6 +5823,7 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    reanchorDrawingsToData();
     const lastPoint = data[data.length - 1];
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
@@ -5805,6 +5870,7 @@ function createChart(element, options = {}) {
       }
       merged.set(timeMs, parsed);
       data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+      reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
     scheduleDraw();
@@ -5987,11 +6053,13 @@ function createChart(element, options = {}) {
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
+    reanchorDrawingsToData();
     emitDrawingsChange();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
+    next.points = next.points.map((point) => reanchorDrawingPoint(point));
     drawings.push(next);
     emitDrawingsChange();
     scheduleDraw();
@@ -6003,7 +6071,7 @@ function createChart(element, options = {}) {
         ...serializeDrawing(drawing),
         ...patch,
         id,
-        points: patch.points ?? drawing.points
+        points: (patch.points ?? drawing.points).map((point) => reanchorDrawingPoint(point))
       }) : drawing
     );
     emitDrawingsChange();

package/package.json

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