hyperprop-charting-library 0.1.44 → 0.1.46

package/dist/hyperprop-charting-library.js

@@ -61,6 +61,35 @@ var DEFAULT_DASH_PATTERNS = {
   borderDotted: [2, 2],
   borderDashed: [6, 4]
 };
+var DEFAULT_LABELS_OPTIONS = {
+  visible: true,
+  symbolName: "",
+  showSymbolName: false,
+  showLastPrice: true,
+  showPreviousClose: false,
+  previousClosePrice: Number.NaN,
+  showHighLow: false,
+  showBidAsk: false,
+  bidPrice: Number.NaN,
+  askPrice: Number.NaN,
+  showIndicatorNames: false,
+  showIndicatorValues: false,
+  showCountdownToBarClose: false,
+  noOverlapping: true,
+  backgroundColor: "#0b1220",
+  textColor: "#cbd5e1",
+  mutedTextColor: "#94a3b8",
+  symbolNameBackgroundColor: "#1f2937",
+  symbolNameTextColor: "#e5e7eb",
+  previousCloseColor: "#94a3b8",
+  highLowColor: "#a78bfa",
+  bidColor: "#ef4444",
+  askColor: "#22c55e",
+  indicatorTextColor: "#cbd5e1",
+  borderRadius: 3,
+  labelHeight: 20,
+  labelPaddingX: 8
+};
 var DEFAULT_PRICE_LINE_OPTIONS = {
   visible: true,
   style: "solid",
@@ -148,8 +177,13 @@ var DEFAULT_OPTIONS = {
     style: "dotted",
     thickness: 1,
     labelTextColor: "#0b1220",
+    labelSubtext: "",
+    labelSubtextColor: "#0b1220",
+    labelSubtextFontSize: 0,
+    showCountdownInLabel: false,
     labelBorderRadius: 3
   },
+  labels: DEFAULT_LABELS_OPTIONS,
   dashPatterns: DEFAULT_DASH_PATTERNS,
   indicators: []
 };
@@ -189,6 +223,10 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
     ...baseOptions.tickerLine,
     ...options.tickerLine ?? {}
   },
+  labels: {
+    ...baseOptions.labels,
+    ...options.labels ?? {}
+  },
   dashPatterns: {
     ...baseOptions.dashPatterns,
     ...options.dashPatterns ?? {}
@@ -1255,6 +1293,14 @@ function createChart(element, options = {}) {
     ctx.textBaseline = baseline;
     ctx.fillText(text, x, y);
   };
+  const formatDuration = (ms) => {
+    const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor(totalSeconds % 3600 / 60);
+    const seconds = totalSeconds % 60;
+    const pad = (value) => String(value).padStart(2, "0");
+    return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
+  };
   const drawPriceLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
     if (!mergedLine.visible || !Number.isFinite(mergedLine.price)) {
@@ -2014,14 +2060,49 @@ function createChart(element, options = {}) {
       drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
       ctx.font = prevFont;
     }
+    const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
+    const priceAxisLabels = [];
+    const addPriceAxisLabel = (label) => {
+      if (!labels.visible || !Number.isFinite(label.price) || label.text.length === 0) {
+        return;
+      }
+      priceAxisLabels.push(label);
+    };
+    const drawReferenceLine = (price, color, style = "dotted") => {
+      if (!Number.isFinite(price)) {
+        return;
+      }
+      const y = clamp(yFromPrice(price), chartTop + 1, chartBottom - 1);
+      ctx.save();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
+      applyDashPattern(style, dashPatterns.dotted, dashPatterns.dashed);
+      ctx.beginPath();
+      ctx.moveTo(crisp(chartLeft), crisp(y));
+      ctx.lineTo(crisp(chartRight), crisp(y));
+      ctx.stroke();
+      ctx.restore();
+    };
+    const getCountdownText = () => {
+      const last = data[data.length - 1];
+      if (!last) {
+        return null;
+      }
+      const stepMs = getTimeStepMs();
+      const rawRemainingMs = last.time.getTime() + stepMs - Date.now();
+      const countdownMs = rawRemainingMs >= 0 && rawRemainingMs <= stepMs * 2 ? rawRemainingMs : stepMs - Date.now() % stepMs;
+      return formatDuration(countdownMs);
+    };
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
+    let tickerPrice = null;
+    let tickerColor = null;
     if ((ticker.visible ?? true) && lastPoint) {
-      const tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
+      tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
       const tickerY = yFromPrice(tickerPrice);
       const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
       const lastDirection = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice >= lastPoint.o ? "up" : "down" : getCandleDirectionByIndex(data.length - 1);
-      const tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
+      tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
       const tickerThickness = Math.max(1, ticker.thickness ?? 1);
       const tickerStyle = ticker.style ?? "solid";
       ctx.save();
@@ -2034,24 +2115,155 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.setLineDash([]);
       ctx.restore();
-      const tickerLabel = formatPrice(tickerPrice);
-      ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
-      const labelPaddingX = 8;
-      const labelHeight = 20;
-      const labelWidth = getPriceLabelWidth(tickerLabel, labelPaddingX);
+    }
+    if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      const tickerSubtext = ticker.showCountdownInLabel ? getCountdownText() : ticker.labelSubtext?.trim();
+      addPriceAxisLabel({
+        text: formatPrice(tickerPrice),
+        ...tickerSubtext ? { subtext: tickerSubtext } : {},
+        subtextColor: ticker.labelSubtextColor ?? ticker.labelTextColor ?? "#0b1220",
+        ...ticker.labelSubtextFontSize === void 0 ? {} : { subtextFontSize: ticker.labelSubtextFontSize },
+        price: tickerPrice,
+        backgroundColor: ticker.labelBackgroundColor ?? tickerColor,
+        textColor: ticker.labelTextColor ?? "#0b1220",
+        color: tickerColor,
+        priority: 100
+      });
+    }
+    if (labels.showSymbolName && labels.symbolName.trim().length > 0 && tickerPrice !== null) {
+      addPriceAxisLabel({
+        text: labels.symbolName.trim(),
+        price: tickerPrice,
+        backgroundColor: labels.symbolNameBackgroundColor,
+        textColor: labels.symbolNameTextColor,
+        color: labels.symbolNameBackgroundColor,
+        priority: 95
+      });
+    }
+    if (labels.showPreviousClose) {
+      const previousCloseCandidate = Number.isFinite(labels.previousClosePrice) ? labels.previousClosePrice : data.length > 1 ? data[data.length - 2]?.c : Number.NaN;
+      if (previousCloseCandidate !== void 0 && Number.isFinite(previousCloseCandidate)) {
+        const previousClose = previousCloseCandidate;
+        drawReferenceLine(previousClose, labels.previousCloseColor, "dashed");
+        addPriceAxisLabel({
+          text: `PDC ${formatPrice(previousClose)}`,
+          price: previousClose,
+          backgroundColor: labels.backgroundColor,
+          textColor: labels.mutedTextColor,
+          color: labels.previousCloseColor,
+          priority: 50
+        });
+      }
+    }
+    if (labels.showHighLow && visibleData.length > 0) {
+      const visibleHigh = Math.max(...visibleData.map((point) => point.h));
+      const visibleLow = Math.min(...visibleData.map((point) => point.l));
+      addPriceAxisLabel({
+        text: `H ${formatPrice(visibleHigh)}`,
+        price: visibleHigh,
+        backgroundColor: labels.backgroundColor,
+        textColor: labels.textColor,
+        color: labels.highLowColor,
+        priority: 40
+      });
+      addPriceAxisLabel({
+        text: `L ${formatPrice(visibleLow)}`,
+        price: visibleLow,
+        backgroundColor: labels.backgroundColor,
+        textColor: labels.textColor,
+        color: labels.highLowColor,
+        priority: 40
+      });
+    }
+    if (labels.showBidAsk) {
+      if (Number.isFinite(labels.bidPrice)) {
+        drawReferenceLine(labels.bidPrice, labels.bidColor, "dotted");
+        addPriceAxisLabel({
+          text: `B ${formatPrice(labels.bidPrice)}`,
+          price: labels.bidPrice,
+          backgroundColor: labels.bidColor,
+          textColor: "#0b1220",
+          color: labels.bidColor,
+          priority: 80
+        });
+      }
+      if (Number.isFinite(labels.askPrice)) {
+        drawReferenceLine(labels.askPrice, labels.askColor, "dotted");
+        addPriceAxisLabel({
+          text: `A ${formatPrice(labels.askPrice)}`,
+          price: labels.askPrice,
+          backgroundColor: labels.askColor,
+          textColor: "#0b1220",
+          color: labels.askColor,
+          priority: 80
+        });
+      }
+    }
+    if (priceAxisLabels.length > 0) {
+      const labelPaddingX = Math.max(4, labels.labelPaddingX);
+      const baseLabelHeight = Math.max(14, labels.labelHeight);
+      const labelRadius = Math.max(0, labels.borderRadius);
+      const priceLabelFontSize = Math.max(8, axis.fontSize);
+      ctx.font = `${priceLabelFontSize}px ${mergedOptions.fontFamily}`;
+      const positionedLabels = priceAxisLabels.map((label) => {
+        const subtext = label.subtext?.trim();
+        const subtextFontSize = label.subtextFontSize !== void 0 && label.subtextFontSize > 0 ? Math.max(8, Math.round(label.subtextFontSize)) : priceLabelFontSize;
+        const labelHeight = baseLabelHeight + (subtext ? subtextFontSize + 5 : 0);
+        const primaryWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        let subtextWidth = 0;
+        if (subtext) {
+          const baseFont = ctx.font;
+          ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
+          subtextWidth = Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2;
+          ctx.font = baseFont;
+        }
+        const labelTextWidth = Math.max(primaryWidth, subtextWidth);
+        return {
+          ...label,
+          subtext,
+          subtextFontSize,
+          height: labelHeight,
+          width: labelTextWidth,
+          targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
+          y: 0
+        };
+      }).sort((a, b) => a.targetY - b.targetY || b.priority - a.priority);
+      const minY = chartTop;
+      let cursorY = minY;
+      for (const label of positionedLabels) {
+        const maxY = chartBottom - label.height;
+        label.y = labels.noOverlapping ? Math.max(clamp(label.targetY, minY, maxY), cursorY) : clamp(label.targetY, minY, maxY);
+        cursorY = label.y + label.height + 2;
+      }
+      if (labels.noOverlapping && positionedLabels.length > 0) {
+        const lastLabel = positionedLabels[positionedLabels.length - 1];
+        const overflow = lastLabel ? lastLabel.y + lastLabel.height - chartBottom : 0;
+        if (overflow > 0) {
+          for (const label of positionedLabels) {
+            label.y = Math.max(minY, label.y - overflow);
+          }
+        }
+      }
       const labelX = chartRight + 4;
-      const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
-      const labelRadius = Math.max(0, ticker.labelBorderRadius ?? 0);
-      ctx.fillStyle = ticker.labelBackgroundColor ?? tickerColor;
-      fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, labelRadius);
-      drawText(
-        tickerLabel,
-        labelX + labelPaddingX,
-        labelY + labelHeight / 2,
-        "left",
-        "middle",
-        ticker.labelTextColor ?? "#0b1220"
-      );
+      for (const label of positionedLabels) {
+        ctx.fillStyle = label.backgroundColor;
+        fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, label.height, labelRadius);
+        const primaryY = label.subtext ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        if (label.subtext) {
+          const baseFont = ctx.font;
+          ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
+          drawText(
+            label.subtext,
+            labelX + labelPaddingX,
+            label.y + baseLabelHeight + label.subtextFontSize / 2,
+            "left",
+            "middle",
+            label.subtextColor ?? label.textColor
+          );
+          ctx.font = baseFont;
+        }
+      }
     }
     for (const priceLine of priceLines) {
       drawPriceLine(priceLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
@@ -2059,6 +2271,25 @@ function createChart(element, options = {}) {
     for (const orderLine of orderLines) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    if (labels.visible && (labels.showIndicatorNames || labels.showIndicatorValues)) {
+      const labelEntries = [...activeOverlayIndicators, ...activeSeparateIndicators].map(({ indicator, plugin }) => {
+        const inputValues = Object.entries(indicator.inputs).filter(([, value]) => typeof value === "number" || typeof value === "string" || typeof value === "boolean").slice(0, 2).map(([, value]) => String(value));
+        if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
+          return `${plugin.name} ${inputValues.join(" ")}`;
+        }
+        if (labels.showIndicatorNames) {
+          return plugin.name;
+        }
+        return inputValues.join(" ");
+      }).filter((entry) => entry.length > 0);
+      if (labelEntries.length > 0) {
+        const prevFont = ctx.font;
+        ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+        const legendText = labelEntries.join("   ");
+        drawText(legendText, chartLeft + 10, chartTop + 10, "left", "top", labels.indicatorTextColor);
+        ctx.font = prevFont;
+      }
+    }
     for (let index = tickStartIndex; index <= visibleTickEnd; index += xStep) {
       const tickTime = getTimeForIndex(index);
       if (!tickTime) {
@@ -2074,6 +2305,16 @@ function createChart(element, options = {}) {
       drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);
       ctx.font = prevFont;
     }
+    if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
+      const stepMs = getTimeStepMs();
+      const rawRemainingMs = lastPoint.time.getTime() + stepMs - Date.now();
+      const countdownMs = rawRemainingMs >= 0 && rawRemainingMs <= stepMs * 2 ? rawRemainingMs : stepMs - Date.now() % stepMs;
+      const countdownText = formatDuration(countdownMs);
+      const prevFont = ctx.font;
+      ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
+      drawText(countdownText, chartRight + 6, fullChartBottom + 8, "left", "top", xAxis.textColor);
+      ctx.font = prevFont;
+    }
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);

package/dist/index.cjs

@@ -85,6 +85,35 @@ var DEFAULT_DASH_PATTERNS = {
   borderDotted: [2, 2],
   borderDashed: [6, 4]
 };
+var DEFAULT_LABELS_OPTIONS = {
+  visible: true,
+  symbolName: "",
+  showSymbolName: false,
+  showLastPrice: true,
+  showPreviousClose: false,
+  previousClosePrice: Number.NaN,
+  showHighLow: false,
+  showBidAsk: false,
+  bidPrice: Number.NaN,
+  askPrice: Number.NaN,
+  showIndicatorNames: false,
+  showIndicatorValues: false,
+  showCountdownToBarClose: false,
+  noOverlapping: true,
+  backgroundColor: "#0b1220",
+  textColor: "#cbd5e1",
+  mutedTextColor: "#94a3b8",
+  symbolNameBackgroundColor: "#1f2937",
+  symbolNameTextColor: "#e5e7eb",
+  previousCloseColor: "#94a3b8",
+  highLowColor: "#a78bfa",
+  bidColor: "#ef4444",
+  askColor: "#22c55e",
+  indicatorTextColor: "#cbd5e1",
+  borderRadius: 3,
+  labelHeight: 20,
+  labelPaddingX: 8
+};
 var DEFAULT_PRICE_LINE_OPTIONS = {
   visible: true,
   style: "solid",
@@ -172,8 +201,13 @@ var DEFAULT_OPTIONS = {
     style: "dotted",
     thickness: 1,
     labelTextColor: "#0b1220",
+    labelSubtext: "",
+    labelSubtextColor: "#0b1220",
+    labelSubtextFontSize: 0,
+    showCountdownInLabel: false,
     labelBorderRadius: 3
   },
+  labels: DEFAULT_LABELS_OPTIONS,
   dashPatterns: DEFAULT_DASH_PATTERNS,
   indicators: []
 };
@@ -213,6 +247,10 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
     ...baseOptions.tickerLine,
     ...options.tickerLine ?? {}
   },
+  labels: {
+    ...baseOptions.labels,
+    ...options.labels ?? {}
+  },
   dashPatterns: {
     ...baseOptions.dashPatterns,
     ...options.dashPatterns ?? {}
@@ -1279,6 +1317,14 @@ function createChart(element, options = {}) {
     ctx.textBaseline = baseline;
     ctx.fillText(text, x, y);
   };
+  const formatDuration = (ms) => {
+    const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor(totalSeconds % 3600 / 60);
+    const seconds = totalSeconds % 60;
+    const pad = (value) => String(value).padStart(2, "0");
+    return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
+  };
   const drawPriceLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
     if (!mergedLine.visible || !Number.isFinite(mergedLine.price)) {
@@ -2038,14 +2084,49 @@ function createChart(element, options = {}) {
       drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
       ctx.font = prevFont;
     }
+    const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
+    const priceAxisLabels = [];
+    const addPriceAxisLabel = (label) => {
+      if (!labels.visible || !Number.isFinite(label.price) || label.text.length === 0) {
+        return;
+      }
+      priceAxisLabels.push(label);
+    };
+    const drawReferenceLine = (price, color, style = "dotted") => {
+      if (!Number.isFinite(price)) {
+        return;
+      }
+      const y = clamp(yFromPrice(price), chartTop + 1, chartBottom - 1);
+      ctx.save();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
+      applyDashPattern(style, dashPatterns.dotted, dashPatterns.dashed);
+      ctx.beginPath();
+      ctx.moveTo(crisp(chartLeft), crisp(y));
+      ctx.lineTo(crisp(chartRight), crisp(y));
+      ctx.stroke();
+      ctx.restore();
+    };
+    const getCountdownText = () => {
+      const last = data[data.length - 1];
+      if (!last) {
+        return null;
+      }
+      const stepMs = getTimeStepMs();
+      const rawRemainingMs = last.time.getTime() + stepMs - Date.now();
+      const countdownMs = rawRemainingMs >= 0 && rawRemainingMs <= stepMs * 2 ? rawRemainingMs : stepMs - Date.now() % stepMs;
+      return formatDuration(countdownMs);
+    };
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
+    let tickerPrice = null;
+    let tickerColor = null;
     if ((ticker.visible ?? true) && lastPoint) {
-      const tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
+      tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
       const tickerY = yFromPrice(tickerPrice);
       const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
       const lastDirection = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice >= lastPoint.o ? "up" : "down" : getCandleDirectionByIndex(data.length - 1);
-      const tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
+      tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
       const tickerThickness = Math.max(1, ticker.thickness ?? 1);
       const tickerStyle = ticker.style ?? "solid";
       ctx.save();
@@ -2058,24 +2139,155 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.setLineDash([]);
       ctx.restore();
-      const tickerLabel = formatPrice(tickerPrice);
-      ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
-      const labelPaddingX = 8;
-      const labelHeight = 20;
-      const labelWidth = getPriceLabelWidth(tickerLabel, labelPaddingX);
+    }
+    if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      const tickerSubtext = ticker.showCountdownInLabel ? getCountdownText() : ticker.labelSubtext?.trim();
+      addPriceAxisLabel({
+        text: formatPrice(tickerPrice),
+        ...tickerSubtext ? { subtext: tickerSubtext } : {},
+        subtextColor: ticker.labelSubtextColor ?? ticker.labelTextColor ?? "#0b1220",
+        ...ticker.labelSubtextFontSize === void 0 ? {} : { subtextFontSize: ticker.labelSubtextFontSize },
+        price: tickerPrice,
+        backgroundColor: ticker.labelBackgroundColor ?? tickerColor,
+        textColor: ticker.labelTextColor ?? "#0b1220",
+        color: tickerColor,
+        priority: 100
+      });
+    }
+    if (labels.showSymbolName && labels.symbolName.trim().length > 0 && tickerPrice !== null) {
+      addPriceAxisLabel({
+        text: labels.symbolName.trim(),
+        price: tickerPrice,
+        backgroundColor: labels.symbolNameBackgroundColor,
+        textColor: labels.symbolNameTextColor,
+        color: labels.symbolNameBackgroundColor,
+        priority: 95
+      });
+    }
+    if (labels.showPreviousClose) {
+      const previousCloseCandidate = Number.isFinite(labels.previousClosePrice) ? labels.previousClosePrice : data.length > 1 ? data[data.length - 2]?.c : Number.NaN;
+      if (previousCloseCandidate !== void 0 && Number.isFinite(previousCloseCandidate)) {
+        const previousClose = previousCloseCandidate;
+        drawReferenceLine(previousClose, labels.previousCloseColor, "dashed");
+        addPriceAxisLabel({
+          text: `PDC ${formatPrice(previousClose)}`,
+          price: previousClose,
+          backgroundColor: labels.backgroundColor,
+          textColor: labels.mutedTextColor,
+          color: labels.previousCloseColor,
+          priority: 50
+        });
+      }
+    }
+    if (labels.showHighLow && visibleData.length > 0) {
+      const visibleHigh = Math.max(...visibleData.map((point) => point.h));
+      const visibleLow = Math.min(...visibleData.map((point) => point.l));
+      addPriceAxisLabel({
+        text: `H ${formatPrice(visibleHigh)}`,
+        price: visibleHigh,
+        backgroundColor: labels.backgroundColor,
+        textColor: labels.textColor,
+        color: labels.highLowColor,
+        priority: 40
+      });
+      addPriceAxisLabel({
+        text: `L ${formatPrice(visibleLow)}`,
+        price: visibleLow,
+        backgroundColor: labels.backgroundColor,
+        textColor: labels.textColor,
+        color: labels.highLowColor,
+        priority: 40
+      });
+    }
+    if (labels.showBidAsk) {
+      if (Number.isFinite(labels.bidPrice)) {
+        drawReferenceLine(labels.bidPrice, labels.bidColor, "dotted");
+        addPriceAxisLabel({
+          text: `B ${formatPrice(labels.bidPrice)}`,
+          price: labels.bidPrice,
+          backgroundColor: labels.bidColor,
+          textColor: "#0b1220",
+          color: labels.bidColor,
+          priority: 80
+        });
+      }
+      if (Number.isFinite(labels.askPrice)) {
+        drawReferenceLine(labels.askPrice, labels.askColor, "dotted");
+        addPriceAxisLabel({
+          text: `A ${formatPrice(labels.askPrice)}`,
+          price: labels.askPrice,
+          backgroundColor: labels.askColor,
+          textColor: "#0b1220",
+          color: labels.askColor,
+          priority: 80
+        });
+      }
+    }
+    if (priceAxisLabels.length > 0) {
+      const labelPaddingX = Math.max(4, labels.labelPaddingX);
+      const baseLabelHeight = Math.max(14, labels.labelHeight);
+      const labelRadius = Math.max(0, labels.borderRadius);
+      const priceLabelFontSize = Math.max(8, axis.fontSize);
+      ctx.font = `${priceLabelFontSize}px ${mergedOptions.fontFamily}`;
+      const positionedLabels = priceAxisLabels.map((label) => {
+        const subtext = label.subtext?.trim();
+        const subtextFontSize = label.subtextFontSize !== void 0 && label.subtextFontSize > 0 ? Math.max(8, Math.round(label.subtextFontSize)) : priceLabelFontSize;
+        const labelHeight = baseLabelHeight + (subtext ? subtextFontSize + 5 : 0);
+        const primaryWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        let subtextWidth = 0;
+        if (subtext) {
+          const baseFont = ctx.font;
+          ctx.font = `${subtextFontSize}px ${mergedOptions.fontFamily}`;
+          subtextWidth = Math.ceil(ctx.measureText(subtext).width) + labelPaddingX * 2;
+          ctx.font = baseFont;
+        }
+        const labelTextWidth = Math.max(primaryWidth, subtextWidth);
+        return {
+          ...label,
+          subtext,
+          subtextFontSize,
+          height: labelHeight,
+          width: labelTextWidth,
+          targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
+          y: 0
+        };
+      }).sort((a, b) => a.targetY - b.targetY || b.priority - a.priority);
+      const minY = chartTop;
+      let cursorY = minY;
+      for (const label of positionedLabels) {
+        const maxY = chartBottom - label.height;
+        label.y = labels.noOverlapping ? Math.max(clamp(label.targetY, minY, maxY), cursorY) : clamp(label.targetY, minY, maxY);
+        cursorY = label.y + label.height + 2;
+      }
+      if (labels.noOverlapping && positionedLabels.length > 0) {
+        const lastLabel = positionedLabels[positionedLabels.length - 1];
+        const overflow = lastLabel ? lastLabel.y + lastLabel.height - chartBottom : 0;
+        if (overflow > 0) {
+          for (const label of positionedLabels) {
+            label.y = Math.max(minY, label.y - overflow);
+          }
+        }
+      }
       const labelX = chartRight + 4;
-      const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
-      const labelRadius = Math.max(0, ticker.labelBorderRadius ?? 0);
-      ctx.fillStyle = ticker.labelBackgroundColor ?? tickerColor;
-      fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, labelRadius);
-      drawText(
-        tickerLabel,
-        labelX + labelPaddingX,
-        labelY + labelHeight / 2,
-        "left",
-        "middle",
-        ticker.labelTextColor ?? "#0b1220"
-      );
+      for (const label of positionedLabels) {
+        ctx.fillStyle = label.backgroundColor;
+        fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, label.height, labelRadius);
+        const primaryY = label.subtext ? label.y + baseLabelHeight / 2 - 1 : label.y + label.height / 2;
+        drawText(label.text, labelX + labelPaddingX, primaryY, "left", "middle", label.textColor);
+        if (label.subtext) {
+          const baseFont = ctx.font;
+          ctx.font = `${label.subtextFontSize}px ${mergedOptions.fontFamily}`;
+          drawText(
+            label.subtext,
+            labelX + labelPaddingX,
+            label.y + baseLabelHeight + label.subtextFontSize / 2,
+            "left",
+            "middle",
+            label.subtextColor ?? label.textColor
+          );
+          ctx.font = baseFont;
+        }
+      }
     }
     for (const priceLine of priceLines) {
       drawPriceLine(priceLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
@@ -2083,6 +2295,25 @@ function createChart(element, options = {}) {
     for (const orderLine of orderLines) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    if (labels.visible && (labels.showIndicatorNames || labels.showIndicatorValues)) {
+      const labelEntries = [...activeOverlayIndicators, ...activeSeparateIndicators].map(({ indicator, plugin }) => {
+        const inputValues = Object.entries(indicator.inputs).filter(([, value]) => typeof value === "number" || typeof value === "string" || typeof value === "boolean").slice(0, 2).map(([, value]) => String(value));
+        if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
+          return `${plugin.name} ${inputValues.join(" ")}`;
+        }
+        if (labels.showIndicatorNames) {
+          return plugin.name;
+        }
+        return inputValues.join(" ");
+      }).filter((entry) => entry.length > 0);
+      if (labelEntries.length > 0) {
+        const prevFont = ctx.font;
+        ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+        const legendText = labelEntries.join("   ");
+        drawText(legendText, chartLeft + 10, chartTop + 10, "left", "top", labels.indicatorTextColor);
+        ctx.font = prevFont;
+      }
+    }
     for (let index = tickStartIndex; index <= visibleTickEnd; index += xStep) {
       const tickTime = getTimeForIndex(index);
       if (!tickTime) {
@@ -2098,6 +2329,16 @@ function createChart(element, options = {}) {
       drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);
       ctx.font = prevFont;
     }
+    if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
+      const stepMs = getTimeStepMs();
+      const rawRemainingMs = lastPoint.time.getTime() + stepMs - Date.now();
+      const countdownMs = rawRemainingMs >= 0 && rawRemainingMs <= stepMs * 2 ? rawRemainingMs : stepMs - Date.now() % stepMs;
+      const countdownText = formatDuration(countdownMs);
+      const prevFont = ctx.font;
+      ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
+      drawText(countdownText, chartRight + 6, fullChartBottom + 8, "left", "top", xAxis.textColor);
+      ctx.font = prevFont;
+    }
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);