hyperprop-charting-library 0.1.44 → 0.1.45

package/README.md

@@ -94,6 +94,28 @@ const chart = createChart(root, {
 });
 ```
 
+## TradingView-Style Labels
+
+```ts
+const chart = createChart(root, {
+  labels: {
+    symbolName: "ESH6",
+    showSymbolName: true,
+    showLastPrice: true,
+    showPreviousClose: true,
+    previousClosePrice: 5231.25,
+    showHighLow: true,
+    showBidAsk: true,
+    bidPrice: 5234.75,
+    askPrice: 5235.0,
+    showIndicatorNames: true,
+    showIndicatorValues: true,
+    showCountdownToBarClose: true,
+    noOverlapping: true
+  }
+});
+```
+
 ## Axis Label Density
 
 ```ts

package/dist/hyperprop-charting-library.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",
@@ -174,6 +203,7 @@ var DEFAULT_OPTIONS = {
     labelTextColor: "#0b1220",
     labelBorderRadius: 3
   },
+  labels: DEFAULT_LABELS_OPTIONS,
   dashPatterns: DEFAULT_DASH_PATTERNS,
   indicators: []
 };
@@ -213,6 +243,10 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
     ...baseOptions.tickerLine,
     ...options.tickerLine ?? {}
   },
+  labels: {
+    ...baseOptions.labels,
+    ...options.labels ?? {}
+  },
   dashPatterns: {
     ...baseOptions.dashPatterns,
     ...options.dashPatterns ?? {}
@@ -1279,6 +1313,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 +2080,39 @@ 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 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 +2125,122 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.setLineDash([]);
       ctx.restore();
-      const tickerLabel = formatPrice(tickerPrice);
+    }
+    if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      addPriceAxisLabel({
+        text: formatPrice(tickerPrice),
+        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 labelHeight = Math.max(14, labels.labelHeight);
+      const labelRadius = Math.max(0, labels.borderRadius);
       ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
-      const labelPaddingX = 8;
-      const labelHeight = 20;
-      const labelWidth = getPriceLabelWidth(tickerLabel, labelPaddingX);
+      const positionedLabels = priceAxisLabels.map((label) => {
+        const labelTextWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        return {
+          ...label,
+          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;
+      const maxY = chartBottom - labelHeight;
+      let cursorY = minY;
+      for (const label of positionedLabels) {
+        label.y = labels.noOverlapping ? Math.max(clamp(label.targetY, minY, maxY), cursorY) : clamp(label.targetY, minY, maxY);
+        cursorY = label.y + labelHeight + 2;
+      }
+      if (labels.noOverlapping && positionedLabels.length > 0) {
+        const lastLabel = positionedLabels[positionedLabels.length - 1];
+        const overflow = lastLabel ? lastLabel.y + labelHeight - maxY : 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, labelHeight, labelRadius);
+        drawText(label.text, labelX + labelPaddingX, label.y + labelHeight / 2, "left", "middle", label.textColor);
+      }
     }
     for (const priceLine of priceLines) {
       drawPriceLine(priceLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
@@ -2083,6 +2248,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 +2282,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/hyperprop-charting-library.d.ts

@@ -37,6 +37,7 @@ interface ChartOptions {
     priceLines?: PriceLineOptions[];
     orderLines?: OrderLineOptions[];
     tickerLine?: TickerLineOptions;
+    labels?: LabelsOptions;
     dashPatterns?: Partial<DashPatternOptions>;
     indicators?: IndicatorInstanceOptions[];
 }
@@ -263,6 +264,35 @@ interface TickerLineOptions {
     smoothing?: boolean;
     smoothingSpeed?: number;
 }
+interface LabelsOptions {
+    visible?: boolean;
+    symbolName?: string;
+    showSymbolName?: boolean;
+    showLastPrice?: boolean;
+    showPreviousClose?: boolean;
+    previousClosePrice?: number;
+    showHighLow?: boolean;
+    showBidAsk?: boolean;
+    bidPrice?: number;
+    askPrice?: number;
+    showIndicatorNames?: boolean;
+    showIndicatorValues?: boolean;
+    showCountdownToBarClose?: boolean;
+    noOverlapping?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedTextColor?: string;
+    symbolNameBackgroundColor?: string;
+    symbolNameTextColor?: string;
+    previousCloseColor?: string;
+    highLowColor?: string;
+    bidColor?: string;
+    askColor?: string;
+    indicatorTextColor?: string;
+    borderRadius?: number;
+    labelHeight?: number;
+    labelPaddingX?: number;
+}
 interface ChartInstance {
     updateOptions: (options: ChartOptions) => void;
     setData: (data: OhlcDataPoint[]) => void;
@@ -326,4 +356,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

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",
@@ -150,6 +179,7 @@ var DEFAULT_OPTIONS = {
     labelTextColor: "#0b1220",
     labelBorderRadius: 3
   },
+  labels: DEFAULT_LABELS_OPTIONS,
   dashPatterns: DEFAULT_DASH_PATTERNS,
   indicators: []
 };
@@ -189,6 +219,10 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
     ...baseOptions.tickerLine,
     ...options.tickerLine ?? {}
   },
+  labels: {
+    ...baseOptions.labels,
+    ...options.labels ?? {}
+  },
   dashPatterns: {
     ...baseOptions.dashPatterns,
     ...options.dashPatterns ?? {}
@@ -1255,6 +1289,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 +2056,39 @@ 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 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 +2101,122 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.setLineDash([]);
       ctx.restore();
-      const tickerLabel = formatPrice(tickerPrice);
+    }
+    if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      addPriceAxisLabel({
+        text: formatPrice(tickerPrice),
+        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 labelHeight = Math.max(14, labels.labelHeight);
+      const labelRadius = Math.max(0, labels.borderRadius);
       ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
-      const labelPaddingX = 8;
-      const labelHeight = 20;
-      const labelWidth = getPriceLabelWidth(tickerLabel, labelPaddingX);
+      const positionedLabels = priceAxisLabels.map((label) => {
+        const labelTextWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        return {
+          ...label,
+          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;
+      const maxY = chartBottom - labelHeight;
+      let cursorY = minY;
+      for (const label of positionedLabels) {
+        label.y = labels.noOverlapping ? Math.max(clamp(label.targetY, minY, maxY), cursorY) : clamp(label.targetY, minY, maxY);
+        cursorY = label.y + labelHeight + 2;
+      }
+      if (labels.noOverlapping && positionedLabels.length > 0) {
+        const lastLabel = positionedLabels[positionedLabels.length - 1];
+        const overflow = lastLabel ? lastLabel.y + labelHeight - maxY : 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, labelHeight, labelRadius);
+        drawText(label.text, labelX + labelPaddingX, label.y + labelHeight / 2, "left", "middle", label.textColor);
+      }
     }
     for (const priceLine of priceLines) {
       drawPriceLine(priceLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
@@ -2059,6 +2224,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 +2258,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);