hyperprop-charting-library 0.1.44 → 0.1.46

package/dist/index.d.cts

@@ -37,6 +37,7 @@ interface ChartOptions {
     priceLines?: PriceLineOptions[];
     orderLines?: OrderLineOptions[];
     tickerLine?: TickerLineOptions;
+    labels?: LabelsOptions;
     dashPatterns?: Partial<DashPatternOptions>;
     indicators?: IndicatorInstanceOptions[];
 }
@@ -259,10 +260,43 @@ interface TickerLineOptions {
     color?: string;
     labelBackgroundColor?: string;
     labelTextColor?: string;
+    labelSubtext?: string;
+    labelSubtextColor?: string;
+    labelSubtextFontSize?: number;
+    showCountdownInLabel?: boolean;
     labelBorderRadius?: number;
     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 +360,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/index.d.ts

@@ -37,6 +37,7 @@ interface ChartOptions {
     priceLines?: PriceLineOptions[];
     orderLines?: OrderLineOptions[];
     tickerLine?: TickerLineOptions;
+    labels?: LabelsOptions;
     dashPatterns?: Partial<DashPatternOptions>;
     indicators?: IndicatorInstanceOptions[];
 }
@@ -259,10 +260,43 @@ interface TickerLineOptions {
     color?: string;
     labelBackgroundColor?: string;
     labelTextColor?: string;
+    labelSubtext?: string;
+    labelSubtextColor?: string;
+    labelSubtextFontSize?: number;
+    showCountdownInLabel?: boolean;
     labelBorderRadius?: number;
     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 +360,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/index.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/docs/API.md

@@ -65,6 +65,7 @@ Top-level options:
 - `priceLines?: PriceLineOptions[]`
 - `orderLines?: OrderLineOptions[]`
 - `tickerLine?: TickerLineOptions`
+- `labels?: LabelsOptions` (TradingView-style price-scale/indicator label controls)
 - `dashPatterns?: Partial<DashPatternOptions>` (controls dotted/dashed spacing)
 - `indicators?: IndicatorInstanceOptions[]` (initial indicator instances, built-in includes `"volume"`)
 
@@ -148,8 +149,52 @@ watermark: {
 - `color` (default `#38bdf8`)
 - `labelBackgroundColor` (default `#38bdf8`)
 - `labelTextColor` (default `#0b1220`)
+- `labelSubtext` (optional second line inside the current-price label, for example `"MNQ"`)
+- `labelSubtextColor` (defaults to the label text color)
+- `labelSubtextFontSize` (default `0`, meaning use the same font size as the price)
+- `showCountdownInLabel` (default `false`; renders bar-close countdown as the second line)
 - `labelBorderRadius` (default `3`)
 
+### `LabelsOptions`
+
+TradingView-style labels can be controlled from a single top-level object:
+
+- `visible` (default `true`, master switch for this label layer)
+- `symbolName` (text for the symbol-name label)
+- `showSymbolName` (default `false`)
+- `showLastPrice` (default `true`; controls the ticker price tag, while `tickerLine.visible` still controls the line)
+- `showPreviousClose` (default `false`)
+- `previousClosePrice` (optional; falls back to the prior candle close)
+- `showHighLow` (default `false`; labels visible-range high/low)
+- `showBidAsk` (default `false`)
+- `bidPrice`, `askPrice` (optional market data values for bid/ask labels)
+- `showIndicatorNames` (default `false`; draws active indicator names in the chart)
+- `showIndicatorValues` (default `false`; appends simple indicator input values)
+- `showCountdownToBarClose` (default `false`; draws a bottom-axis countdown based on candle time spacing)
+- `noOverlapping` (default `true`; stacks price-scale labels so they do not cover each other)
+- Style fields: `backgroundColor`, `textColor`, `mutedTextColor`, `symbolNameBackgroundColor`, `symbolNameTextColor`, `previousCloseColor`, `highLowColor`, `bidColor`, `askColor`, `indicatorTextColor`, `borderRadius`, `labelHeight`, `labelPaddingX`
+
+Example:
+
+```ts
+createChart(root, {
+  labels: {
+    symbolName: "ESH6",
+    showSymbolName: true,
+    showPreviousClose: true,
+    previousClosePrice: 5231.25,
+    showHighLow: true,
+    showBidAsk: true,
+    bidPrice: 5234.75,
+    askPrice: 5235.0,
+    showIndicatorNames: true,
+    showIndicatorValues: true,
+    showCountdownToBarClose: true,
+    noOverlapping: true
+  }
+});
+```
+
 ### `DashPatternOptions`
 
 - `dotted` (default `[2, 2]`)

package/package.json

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