hyperprop-charting-library 0.1.155 → 0.1.157

package/dist/hyperprop-charting-library.cjs

@@ -3339,7 +3339,17 @@ var DRAWING_TOOL_ICONS = {
     path("M9.5 11.5h9"),
     path("M5 14.5a9 9 0 0 0 18 0")
   ],
-  indicators: [path("M4 19.5l5.5-6.5 4.5 4.5 9.5-11")]
+  indicators: [path("M4 19.5l5.5-6.5 4.5 4.5 9.5-11")],
+  camera: [
+    path("M10 8.5 11.6 6h4.8L18 8.5"),
+    { kind: "rect", x: 4, y: 8.5, width: 20, height: 13.5 },
+    { kind: "circle", cx: 14, cy: 15, r: 4.2 }
+  ],
+  undo: [path("M6.5 10.5H16a6 6 0 0 1 0 12h-4"), path("M10.5 6.5 6.5 10.5l4 4")],
+  redo: [path("M21.5 10.5H12a6 6 0 0 0 0 12h4"), path("M17.5 6.5l4 4-4 4")],
+  maximize: [path("M4.5 10V4.5H10M18 4.5h5.5V10M23.5 18v5.5H18M10 23.5H4.5V18")],
+  minimize: [path("M10 4.5V10H4.5M18 4.5V10h5.5M23.5 18H18v5.5M4.5 18H10v5.5")],
+  compare: [path("M4 20l5-5.5 4 3.5 6.5-7.5"), path("M21 4.5v6M18 7.5h6")]
 };
 
 // src/themes.ts
@@ -8470,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;
@@ -8507,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 {
     /**
@@ -1475,7 +1492,7 @@ type DrawingIconShape = {
     width: number;
     height: number;
 };
-type DrawingIconName = "cursor-cross" | "cursor-dot" | "cursor-arrow" | "trendline" | "horizontal-line" | "vertical-line" | "ray" | "arrow" | "parallel-channel" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "fixed-range-volume-profile" | "measure" | "rectangle" | "ellipse" | "brush" | "text" | "note" | "callout" | "magnet" | "trash" | "pencil" | "eye-off" | "lock" | "unlock" | "clone" | "settings" | "source-code" | "go-to-realtime" | "fit-bars" | "reset" | "log-scale" | "percent-scale" | "invert-scale" | "arrow-up" | "arrow-down" | "replay" | "play" | "pause" | "skip-back" | "skip-forward" | "alert" | "anchor" | "indicators";
+type DrawingIconName = "cursor-cross" | "cursor-dot" | "cursor-arrow" | "trendline" | "horizontal-line" | "vertical-line" | "ray" | "arrow" | "parallel-channel" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "fixed-range-volume-profile" | "measure" | "rectangle" | "ellipse" | "brush" | "text" | "note" | "callout" | "magnet" | "trash" | "pencil" | "eye-off" | "lock" | "unlock" | "clone" | "settings" | "source-code" | "go-to-realtime" | "fit-bars" | "reset" | "log-scale" | "percent-scale" | "invert-scale" | "arrow-up" | "arrow-down" | "replay" | "play" | "pause" | "skip-back" | "skip-forward" | "alert" | "anchor" | "indicators" | "camera" | "undo" | "redo" | "maximize" | "minimize" | "compare";
 declare const DRAWING_ICON_VIEWBOX = 28;
 declare const DRAWING_ICON_STROKE_WIDTH = 1.6;
 declare const DRAWING_TOOL_ICONS: Record<DrawingIconName, DrawingIconShape[]>;

package/dist/hyperprop-charting-library.js

@@ -3300,7 +3300,17 @@ var DRAWING_TOOL_ICONS = {
     path("M9.5 11.5h9"),
     path("M5 14.5a9 9 0 0 0 18 0")
   ],
-  indicators: [path("M4 19.5l5.5-6.5 4.5 4.5 9.5-11")]
+  indicators: [path("M4 19.5l5.5-6.5 4.5 4.5 9.5-11")],
+  camera: [
+    path("M10 8.5 11.6 6h4.8L18 8.5"),
+    { kind: "rect", x: 4, y: 8.5, width: 20, height: 13.5 },
+    { kind: "circle", cx: 14, cy: 15, r: 4.2 }
+  ],
+  undo: [path("M6.5 10.5H16a6 6 0 0 1 0 12h-4"), path("M10.5 6.5 6.5 10.5l4 4")],
+  redo: [path("M21.5 10.5H12a6 6 0 0 0 0 12h4"), path("M17.5 6.5l4 4-4 4")],
+  maximize: [path("M4.5 10V4.5H10M18 4.5h5.5V10M23.5 18v5.5H18M10 23.5H4.5V18")],
+  minimize: [path("M10 4.5V10H4.5M18 4.5V10h5.5M23.5 18H18v5.5M4.5 18H10v5.5")],
+  compare: [path("M4 20l5-5.5 4 3.5 6.5-7.5"), path("M21 4.5v6M18 7.5h6")]
 };
 
 // src/themes.ts
@@ -8431,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;
@@ -8468,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

@@ -3339,7 +3339,17 @@ var DRAWING_TOOL_ICONS = {
     path("M9.5 11.5h9"),
     path("M5 14.5a9 9 0 0 0 18 0")
   ],
-  indicators: [path("M4 19.5l5.5-6.5 4.5 4.5 9.5-11")]
+  indicators: [path("M4 19.5l5.5-6.5 4.5 4.5 9.5-11")],
+  camera: [
+    path("M10 8.5 11.6 6h4.8L18 8.5"),
+    { kind: "rect", x: 4, y: 8.5, width: 20, height: 13.5 },
+    { kind: "circle", cx: 14, cy: 15, r: 4.2 }
+  ],
+  undo: [path("M6.5 10.5H16a6 6 0 0 1 0 12h-4"), path("M10.5 6.5 6.5 10.5l4 4")],
+  redo: [path("M21.5 10.5H12a6 6 0 0 0 0 12h4"), path("M17.5 6.5l4 4-4 4")],
+  maximize: [path("M4.5 10V4.5H10M18 4.5h5.5V10M23.5 18v5.5H18M10 23.5H4.5V18")],
+  minimize: [path("M10 4.5V10H4.5M18 4.5V10h5.5M23.5 18H18v5.5M4.5 18H10v5.5")],
+  compare: [path("M4 20l5-5.5 4 3.5 6.5-7.5"), path("M21 4.5v6M18 7.5h6")]
 };
 
 // src/themes.ts
@@ -8470,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;
@@ -8507,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 {
     /**
@@ -1475,7 +1492,7 @@ type DrawingIconShape = {
     width: number;
     height: number;
 };
-type DrawingIconName = "cursor-cross" | "cursor-dot" | "cursor-arrow" | "trendline" | "horizontal-line" | "vertical-line" | "ray" | "arrow" | "parallel-channel" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "fixed-range-volume-profile" | "measure" | "rectangle" | "ellipse" | "brush" | "text" | "note" | "callout" | "magnet" | "trash" | "pencil" | "eye-off" | "lock" | "unlock" | "clone" | "settings" | "source-code" | "go-to-realtime" | "fit-bars" | "reset" | "log-scale" | "percent-scale" | "invert-scale" | "arrow-up" | "arrow-down" | "replay" | "play" | "pause" | "skip-back" | "skip-forward" | "alert" | "anchor" | "indicators";
+type DrawingIconName = "cursor-cross" | "cursor-dot" | "cursor-arrow" | "trendline" | "horizontal-line" | "vertical-line" | "ray" | "arrow" | "parallel-channel" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "fixed-range-volume-profile" | "measure" | "rectangle" | "ellipse" | "brush" | "text" | "note" | "callout" | "magnet" | "trash" | "pencil" | "eye-off" | "lock" | "unlock" | "clone" | "settings" | "source-code" | "go-to-realtime" | "fit-bars" | "reset" | "log-scale" | "percent-scale" | "invert-scale" | "arrow-up" | "arrow-down" | "replay" | "play" | "pause" | "skip-back" | "skip-forward" | "alert" | "anchor" | "indicators" | "camera" | "undo" | "redo" | "maximize" | "minimize" | "compare";
 declare const DRAWING_ICON_VIEWBOX = 28;
 declare const DRAWING_ICON_STROKE_WIDTH = 1.6;
 declare const DRAWING_TOOL_ICONS: Record<DrawingIconName, DrawingIconShape[]>;

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 {
     /**
@@ -1475,7 +1492,7 @@ type DrawingIconShape = {
     width: number;
     height: number;
 };
-type DrawingIconName = "cursor-cross" | "cursor-dot" | "cursor-arrow" | "trendline" | "horizontal-line" | "vertical-line" | "ray" | "arrow" | "parallel-channel" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "fixed-range-volume-profile" | "measure" | "rectangle" | "ellipse" | "brush" | "text" | "note" | "callout" | "magnet" | "trash" | "pencil" | "eye-off" | "lock" | "unlock" | "clone" | "settings" | "source-code" | "go-to-realtime" | "fit-bars" | "reset" | "log-scale" | "percent-scale" | "invert-scale" | "arrow-up" | "arrow-down" | "replay" | "play" | "pause" | "skip-back" | "skip-forward" | "alert" | "anchor" | "indicators";
+type DrawingIconName = "cursor-cross" | "cursor-dot" | "cursor-arrow" | "trendline" | "horizontal-line" | "vertical-line" | "ray" | "arrow" | "parallel-channel" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "fixed-range-volume-profile" | "measure" | "rectangle" | "ellipse" | "brush" | "text" | "note" | "callout" | "magnet" | "trash" | "pencil" | "eye-off" | "lock" | "unlock" | "clone" | "settings" | "source-code" | "go-to-realtime" | "fit-bars" | "reset" | "log-scale" | "percent-scale" | "invert-scale" | "arrow-up" | "arrow-down" | "replay" | "play" | "pause" | "skip-back" | "skip-forward" | "alert" | "anchor" | "indicators" | "camera" | "undo" | "redo" | "maximize" | "minimize" | "compare";
 declare const DRAWING_ICON_VIEWBOX = 28;
 declare const DRAWING_ICON_STROKE_WIDTH = 1.6;
 declare const DRAWING_TOOL_ICONS: Record<DrawingIconName, DrawingIconShape[]>;

package/dist/index.js

@@ -3300,7 +3300,17 @@ var DRAWING_TOOL_ICONS = {
     path("M9.5 11.5h9"),
     path("M5 14.5a9 9 0 0 0 18 0")
   ],
-  indicators: [path("M4 19.5l5.5-6.5 4.5 4.5 9.5-11")]
+  indicators: [path("M4 19.5l5.5-6.5 4.5 4.5 9.5-11")],
+  camera: [
+    path("M10 8.5 11.6 6h4.8L18 8.5"),
+    { kind: "rect", x: 4, y: 8.5, width: 20, height: 13.5 },
+    { kind: "circle", cx: 14, cy: 15, r: 4.2 }
+  ],
+  undo: [path("M6.5 10.5H16a6 6 0 0 1 0 12h-4"), path("M10.5 6.5 6.5 10.5l4 4")],
+  redo: [path("M21.5 10.5H12a6 6 0 0 0 0 12h4"), path("M17.5 6.5l4 4-4 4")],
+  maximize: [path("M4.5 10V4.5H10M18 4.5h5.5V10M23.5 18v5.5H18M10 23.5H4.5V18")],
+  minimize: [path("M10 4.5V10H4.5M18 4.5V10h5.5M23.5 18H18v5.5M4.5 18H10v5.5")],
+  compare: [path("M4 20l5-5.5 4 3.5 6.5-7.5"), path("M21 4.5v6M18 7.5h6")]
 };
 
 // src/themes.ts
@@ -8431,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;
@@ -8468,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.155",
+  "version": "0.1.157",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",