hyperprop-charting-library 0.1.156 → 0.1.157

package/dist/hyperprop-charting-library.cjs

@@ -8480,30 +8480,42 @@ function createChart(element, options = {}) {
           ctx.fill();
           cursorX += dotRadius * 2 + 6;
         }
-        const headline = [dataLine.symbol, dataLine.interval, dataLine.exchange].filter((part) => part && part.length > 0).join(" \xB7 ");
+        const headline = [
+          dataLine.symbol,
+          dataLine.description,
+          dataLine.interval,
+          dataLine.exchange,
+          dataLine.chartTypeLabel
+        ].filter((part) => part && part.length > 0).join(" \xB7 ");
         if (headline) {
           ctx.fillStyle = symbolColor;
           ctx.fillText(headline, cursorX, rowY);
-          cursorX += measureTextWidth(headline) + 10;
+          cursorX += measureTextWidth(headline) + 12;
         }
         if (dataLine.showOhlc !== false) {
-          const ohlc = `O${formatPrice(bar.o)} H${formatPrice(bar.h)} L${formatPrice(bar.l)} C${formatPrice(bar.c)}`;
-          ctx.fillStyle = changeColor;
-          ctx.fillText(ohlc, cursorX, rowY);
-          cursorX += measureTextWidth(ohlc) + 8;
+          const ohlcLabelColor = dataLine.ohlcLabelColor || textColor;
+          const pairs = [
+            ["O", formatPrice(bar.o)],
+            ["H", formatPrice(bar.h)],
+            ["L", formatPrice(bar.l)],
+            ["C", formatPrice(bar.c)]
+          ];
+          for (const [label, value] of pairs) {
+            ctx.fillStyle = ohlcLabelColor;
+            ctx.fillText(label, cursorX, rowY);
+            cursorX += measureTextWidth(label) + 2;
+            ctx.fillStyle = changeColor;
+            ctx.fillText(value, cursorX, rowY);
+            cursorX += measureTextWidth(value) + 9;
+          }
+          cursorX += 3;
         }
         if (dataLine.showChange !== false) {
           const pct = bar.o !== 0 ? changeAbs / bar.o * 100 : 0;
           const changeText = `${changeAbs >= 0 ? "+" : ""}${formatPrice(changeAbs)} (${changeAbs >= 0 ? "+" : ""}${pct.toFixed(2)}%)`;
           ctx.fillStyle = changeColor;
           ctx.fillText(changeText, cursorX, rowY);
-          cursorX += measureTextWidth(changeText) + 10;
-        }
-        if (dataLine.showVolume && bar.v !== void 0) {
-          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
-          ctx.fillStyle = textColor;
-          ctx.fillText(volumeText, cursorX, rowY);
-          cursorX += measureTextWidth(volumeText) + 10;
+          cursorX += measureTextWidth(changeText) + 12;
         }
         for (const detail of dataLine.details ?? []) {
           const text = detail.label ? `${detail.label} ${detail.value}` : detail.value;
@@ -8517,7 +8529,14 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 6;
+        let lastRowY = rowY;
+        if (dataLine.showVolume && bar.v !== void 0) {
+          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
+          lastRowY = rowY + fontSize + 4;
+          ctx.fillStyle = textColor;
+          ctx.fillText(volumeText, chartLeft + legendInsetX, lastRowY);
+        }
+        dataLineBottom = lastRowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }

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

@@ -697,15 +697,26 @@ interface DataLineOptions {
     visible?: boolean;
     /** e.g. "NQU6" — drawn first, in the emphasis color. */
     symbol?: string;
+    /**
+     * Long instrument name, e.g. "NASDAQ 100 E-mini Futures". Drawn after the
+     * symbol in the emphasis color, the way other charting platforms label a
+     * pane. Omit to keep the headline to the code alone.
+     */
+    description?: string;
     /** e.g. "1h". */
     interval?: string;
     /** e.g. "CME". */
     exchange?: string;
+    /**
+     * Chart style, e.g. "Candles" or "Renko [ATR(14), 1000]" — the last part of
+     * the headline, so a non-default style is never a surprise.
+     */
+    chartTypeLabel?: string;
     /** O/H/L/C values for the hovered (or latest) bar. Default true. */
     showOhlc?: boolean;
     /** Absolute and percent change of that bar, colored by direction. Default true. */
     showChange?: boolean;
-    /** Bar volume. Default false. */
+    /** Bar volume. Drawn on its own row beneath the values. Default false. */
     showVolume?: boolean;
     /**
      * Extra chips after the values — session, currency, a "Closed" badge. Each
@@ -724,6 +735,12 @@ interface DataLineOptions {
     symbolColor?: string;
     /** Everything after the symbol. Defaults to the indicator legend color. */
     textColor?: string;
+    /**
+     * Color of the O/H/L/C letters. Values stay colored by direction, so dimming
+     * the letters is what makes the numbers readable at a glance rather than one
+     * run of same-colored text. Defaults to `textColor`.
+     */
+    ohlcLabelColor?: string;
 }
 interface IndicatorUpdateOptions {
     /**

package/dist/hyperprop-charting-library.js

@@ -8441,30 +8441,42 @@ function createChart(element, options = {}) {
           ctx.fill();
           cursorX += dotRadius * 2 + 6;
         }
-        const headline = [dataLine.symbol, dataLine.interval, dataLine.exchange].filter((part) => part && part.length > 0).join(" \xB7 ");
+        const headline = [
+          dataLine.symbol,
+          dataLine.description,
+          dataLine.interval,
+          dataLine.exchange,
+          dataLine.chartTypeLabel
+        ].filter((part) => part && part.length > 0).join(" \xB7 ");
         if (headline) {
           ctx.fillStyle = symbolColor;
           ctx.fillText(headline, cursorX, rowY);
-          cursorX += measureTextWidth(headline) + 10;
+          cursorX += measureTextWidth(headline) + 12;
         }
         if (dataLine.showOhlc !== false) {
-          const ohlc = `O${formatPrice(bar.o)} H${formatPrice(bar.h)} L${formatPrice(bar.l)} C${formatPrice(bar.c)}`;
-          ctx.fillStyle = changeColor;
-          ctx.fillText(ohlc, cursorX, rowY);
-          cursorX += measureTextWidth(ohlc) + 8;
+          const ohlcLabelColor = dataLine.ohlcLabelColor || textColor;
+          const pairs = [
+            ["O", formatPrice(bar.o)],
+            ["H", formatPrice(bar.h)],
+            ["L", formatPrice(bar.l)],
+            ["C", formatPrice(bar.c)]
+          ];
+          for (const [label, value] of pairs) {
+            ctx.fillStyle = ohlcLabelColor;
+            ctx.fillText(label, cursorX, rowY);
+            cursorX += measureTextWidth(label) + 2;
+            ctx.fillStyle = changeColor;
+            ctx.fillText(value, cursorX, rowY);
+            cursorX += measureTextWidth(value) + 9;
+          }
+          cursorX += 3;
         }
         if (dataLine.showChange !== false) {
           const pct = bar.o !== 0 ? changeAbs / bar.o * 100 : 0;
           const changeText = `${changeAbs >= 0 ? "+" : ""}${formatPrice(changeAbs)} (${changeAbs >= 0 ? "+" : ""}${pct.toFixed(2)}%)`;
           ctx.fillStyle = changeColor;
           ctx.fillText(changeText, cursorX, rowY);
-          cursorX += measureTextWidth(changeText) + 10;
-        }
-        if (dataLine.showVolume && bar.v !== void 0) {
-          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
-          ctx.fillStyle = textColor;
-          ctx.fillText(volumeText, cursorX, rowY);
-          cursorX += measureTextWidth(volumeText) + 10;
+          cursorX += measureTextWidth(changeText) + 12;
         }
         for (const detail of dataLine.details ?? []) {
           const text = detail.label ? `${detail.label} ${detail.value}` : detail.value;
@@ -8478,7 +8490,14 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 6;
+        let lastRowY = rowY;
+        if (dataLine.showVolume && bar.v !== void 0) {
+          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
+          lastRowY = rowY + fontSize + 4;
+          ctx.fillStyle = textColor;
+          ctx.fillText(volumeText, chartLeft + legendInsetX, lastRowY);
+        }
+        dataLineBottom = lastRowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }

package/dist/index.cjs

@@ -8480,30 +8480,42 @@ function createChart(element, options = {}) {
           ctx.fill();
           cursorX += dotRadius * 2 + 6;
         }
-        const headline = [dataLine.symbol, dataLine.interval, dataLine.exchange].filter((part) => part && part.length > 0).join(" \xB7 ");
+        const headline = [
+          dataLine.symbol,
+          dataLine.description,
+          dataLine.interval,
+          dataLine.exchange,
+          dataLine.chartTypeLabel
+        ].filter((part) => part && part.length > 0).join(" \xB7 ");
         if (headline) {
           ctx.fillStyle = symbolColor;
           ctx.fillText(headline, cursorX, rowY);
-          cursorX += measureTextWidth(headline) + 10;
+          cursorX += measureTextWidth(headline) + 12;
         }
         if (dataLine.showOhlc !== false) {
-          const ohlc = `O${formatPrice(bar.o)} H${formatPrice(bar.h)} L${formatPrice(bar.l)} C${formatPrice(bar.c)}`;
-          ctx.fillStyle = changeColor;
-          ctx.fillText(ohlc, cursorX, rowY);
-          cursorX += measureTextWidth(ohlc) + 8;
+          const ohlcLabelColor = dataLine.ohlcLabelColor || textColor;
+          const pairs = [
+            ["O", formatPrice(bar.o)],
+            ["H", formatPrice(bar.h)],
+            ["L", formatPrice(bar.l)],
+            ["C", formatPrice(bar.c)]
+          ];
+          for (const [label, value] of pairs) {
+            ctx.fillStyle = ohlcLabelColor;
+            ctx.fillText(label, cursorX, rowY);
+            cursorX += measureTextWidth(label) + 2;
+            ctx.fillStyle = changeColor;
+            ctx.fillText(value, cursorX, rowY);
+            cursorX += measureTextWidth(value) + 9;
+          }
+          cursorX += 3;
         }
         if (dataLine.showChange !== false) {
           const pct = bar.o !== 0 ? changeAbs / bar.o * 100 : 0;
           const changeText = `${changeAbs >= 0 ? "+" : ""}${formatPrice(changeAbs)} (${changeAbs >= 0 ? "+" : ""}${pct.toFixed(2)}%)`;
           ctx.fillStyle = changeColor;
           ctx.fillText(changeText, cursorX, rowY);
-          cursorX += measureTextWidth(changeText) + 10;
-        }
-        if (dataLine.showVolume && bar.v !== void 0) {
-          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
-          ctx.fillStyle = textColor;
-          ctx.fillText(volumeText, cursorX, rowY);
-          cursorX += measureTextWidth(volumeText) + 10;
+          cursorX += measureTextWidth(changeText) + 12;
         }
         for (const detail of dataLine.details ?? []) {
           const text = detail.label ? `${detail.label} ${detail.value}` : detail.value;
@@ -8517,7 +8529,14 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 6;
+        let lastRowY = rowY;
+        if (dataLine.showVolume && bar.v !== void 0) {
+          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
+          lastRowY = rowY + fontSize + 4;
+          ctx.fillStyle = textColor;
+          ctx.fillText(volumeText, chartLeft + legendInsetX, lastRowY);
+        }
+        dataLineBottom = lastRowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }

package/dist/index.d.cts

@@ -697,15 +697,26 @@ interface DataLineOptions {
     visible?: boolean;
     /** e.g. "NQU6" — drawn first, in the emphasis color. */
     symbol?: string;
+    /**
+     * Long instrument name, e.g. "NASDAQ 100 E-mini Futures". Drawn after the
+     * symbol in the emphasis color, the way other charting platforms label a
+     * pane. Omit to keep the headline to the code alone.
+     */
+    description?: string;
     /** e.g. "1h". */
     interval?: string;
     /** e.g. "CME". */
     exchange?: string;
+    /**
+     * Chart style, e.g. "Candles" or "Renko [ATR(14), 1000]" — the last part of
+     * the headline, so a non-default style is never a surprise.
+     */
+    chartTypeLabel?: string;
     /** O/H/L/C values for the hovered (or latest) bar. Default true. */
     showOhlc?: boolean;
     /** Absolute and percent change of that bar, colored by direction. Default true. */
     showChange?: boolean;
-    /** Bar volume. Default false. */
+    /** Bar volume. Drawn on its own row beneath the values. Default false. */
     showVolume?: boolean;
     /**
      * Extra chips after the values — session, currency, a "Closed" badge. Each
@@ -724,6 +735,12 @@ interface DataLineOptions {
     symbolColor?: string;
     /** Everything after the symbol. Defaults to the indicator legend color. */
     textColor?: string;
+    /**
+     * Color of the O/H/L/C letters. Values stay colored by direction, so dimming
+     * the letters is what makes the numbers readable at a glance rather than one
+     * run of same-colored text. Defaults to `textColor`.
+     */
+    ohlcLabelColor?: string;
 }
 interface IndicatorUpdateOptions {
     /**

package/dist/index.d.ts

@@ -697,15 +697,26 @@ interface DataLineOptions {
     visible?: boolean;
     /** e.g. "NQU6" — drawn first, in the emphasis color. */
     symbol?: string;
+    /**
+     * Long instrument name, e.g. "NASDAQ 100 E-mini Futures". Drawn after the
+     * symbol in the emphasis color, the way other charting platforms label a
+     * pane. Omit to keep the headline to the code alone.
+     */
+    description?: string;
     /** e.g. "1h". */
     interval?: string;
     /** e.g. "CME". */
     exchange?: string;
+    /**
+     * Chart style, e.g. "Candles" or "Renko [ATR(14), 1000]" — the last part of
+     * the headline, so a non-default style is never a surprise.
+     */
+    chartTypeLabel?: string;
     /** O/H/L/C values for the hovered (or latest) bar. Default true. */
     showOhlc?: boolean;
     /** Absolute and percent change of that bar, colored by direction. Default true. */
     showChange?: boolean;
-    /** Bar volume. Default false. */
+    /** Bar volume. Drawn on its own row beneath the values. Default false. */
     showVolume?: boolean;
     /**
      * Extra chips after the values — session, currency, a "Closed" badge. Each
@@ -724,6 +735,12 @@ interface DataLineOptions {
     symbolColor?: string;
     /** Everything after the symbol. Defaults to the indicator legend color. */
     textColor?: string;
+    /**
+     * Color of the O/H/L/C letters. Values stay colored by direction, so dimming
+     * the letters is what makes the numbers readable at a glance rather than one
+     * run of same-colored text. Defaults to `textColor`.
+     */
+    ohlcLabelColor?: string;
 }
 interface IndicatorUpdateOptions {
     /**

package/dist/index.js

@@ -8441,30 +8441,42 @@ function createChart(element, options = {}) {
           ctx.fill();
           cursorX += dotRadius * 2 + 6;
         }
-        const headline = [dataLine.symbol, dataLine.interval, dataLine.exchange].filter((part) => part && part.length > 0).join(" \xB7 ");
+        const headline = [
+          dataLine.symbol,
+          dataLine.description,
+          dataLine.interval,
+          dataLine.exchange,
+          dataLine.chartTypeLabel
+        ].filter((part) => part && part.length > 0).join(" \xB7 ");
         if (headline) {
           ctx.fillStyle = symbolColor;
           ctx.fillText(headline, cursorX, rowY);
-          cursorX += measureTextWidth(headline) + 10;
+          cursorX += measureTextWidth(headline) + 12;
         }
         if (dataLine.showOhlc !== false) {
-          const ohlc = `O${formatPrice(bar.o)} H${formatPrice(bar.h)} L${formatPrice(bar.l)} C${formatPrice(bar.c)}`;
-          ctx.fillStyle = changeColor;
-          ctx.fillText(ohlc, cursorX, rowY);
-          cursorX += measureTextWidth(ohlc) + 8;
+          const ohlcLabelColor = dataLine.ohlcLabelColor || textColor;
+          const pairs = [
+            ["O", formatPrice(bar.o)],
+            ["H", formatPrice(bar.h)],
+            ["L", formatPrice(bar.l)],
+            ["C", formatPrice(bar.c)]
+          ];
+          for (const [label, value] of pairs) {
+            ctx.fillStyle = ohlcLabelColor;
+            ctx.fillText(label, cursorX, rowY);
+            cursorX += measureTextWidth(label) + 2;
+            ctx.fillStyle = changeColor;
+            ctx.fillText(value, cursorX, rowY);
+            cursorX += measureTextWidth(value) + 9;
+          }
+          cursorX += 3;
         }
         if (dataLine.showChange !== false) {
           const pct = bar.o !== 0 ? changeAbs / bar.o * 100 : 0;
           const changeText = `${changeAbs >= 0 ? "+" : ""}${formatPrice(changeAbs)} (${changeAbs >= 0 ? "+" : ""}${pct.toFixed(2)}%)`;
           ctx.fillStyle = changeColor;
           ctx.fillText(changeText, cursorX, rowY);
-          cursorX += measureTextWidth(changeText) + 10;
-        }
-        if (dataLine.showVolume && bar.v !== void 0) {
-          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
-          ctx.fillStyle = textColor;
-          ctx.fillText(volumeText, cursorX, rowY);
-          cursorX += measureTextWidth(volumeText) + 10;
+          cursorX += measureTextWidth(changeText) + 12;
         }
         for (const detail of dataLine.details ?? []) {
           const text = detail.label ? `${detail.label} ${detail.value}` : detail.value;
@@ -8478,7 +8490,14 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 6;
+        let lastRowY = rowY;
+        if (dataLine.showVolume && bar.v !== void 0) {
+          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
+          lastRowY = rowY + fontSize + 4;
+          ctx.fillStyle = textColor;
+          ctx.fillText(volumeText, chartLeft + legendInsetX, lastRowY);
+        }
+        dataLineBottom = lastRowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }

package/package.json

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