hyperprop-charting-library 0.1.146 → 0.1.147

package/dist/hyperprop-charting-library.cjs

@@ -2072,8 +2072,8 @@ var BUILTIN_DONCHIAN_INDICATOR = {
   }
 };
 var computeVolumeProfile = (data, fromIndex, toIndex, rowCount, valueAreaPercent) => {
-  const from = Math.max(0, fromIndex);
-  const to = Math.min(data.length - 1, toIndex);
+  const from = Math.max(0, Math.round(fromIndex));
+  const to = Math.min(data.length - 1, Math.round(toIndex));
   if (to < from) return null;
   let low = Number.POSITIVE_INFINITY;
   let high = Number.NEGATIVE_INFINITY;
@@ -3932,6 +3932,9 @@ function createChart(element, options = {}) {
       pointValue: Number(drawing.pointValue) || 1,
       qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
       fontSize: Math.max(6, Number(drawing.fontSize) || 14),
+      profileRows: Math.max(4, Math.min(200, Math.round(Number(drawing.profileRows)) || 24)),
+      profileValueAreaPercent: Math.max(10, Math.min(99, Number(drawing.profileValueAreaPercent) || 70)),
+      profileWidthRatio: Math.max(0.1, Math.min(1, Number(drawing.profileWidthRatio) || 0.5)),
       ...drawing.label === void 0 ? {} : { label: drawing.label }
     };
   };
@@ -3965,6 +3968,9 @@ function createChart(element, options = {}) {
     pointValue: drawing.pointValue,
     qtyPrecision: drawing.qtyPrecision,
     fontSize: drawing.fontSize,
+    profileRows: drawing.profileRows,
+    profileValueAreaPercent: drawing.profileValueAreaPercent,
+    profileWidthRatio: drawing.profileWidthRatio,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let tradeMarkers = [];
@@ -6671,6 +6677,81 @@ function createChart(element, options = {}) {
           handleAt(ax, ay, drawing.color);
           handleAt(bx, by, drawing.color);
         }
+      } else if (drawing.type === "fixed-range-volume-profile") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1 && data.length > 0) {
+          const fromIndex = Math.max(0, Math.round(Math.min(p0.index, p1.index)));
+          const toIndex = Math.min(data.length - 1, Math.round(Math.max(p0.index, p1.index)));
+          const leftX = xFromDrawingPoint(p0.index <= p1.index ? p0 : p1) - candleSpacing / 2;
+          const rightX = xFromDrawingPoint(p0.index <= p1.index ? p1 : p0) + candleSpacing / 2;
+          const rangeWidth = Math.max(1, rightX - leftX);
+          const rows = Math.max(4, Math.min(200, Math.round(drawing.profileRows) || 24));
+          const valueAreaPercent = Math.max(10, Math.min(99, Number(drawing.profileValueAreaPercent) || 70));
+          const profile = toIndex >= fromIndex ? computeVolumeProfile(data, fromIndex, toIndex, rows, valueAreaPercent) : null;
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.5 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.06);
+          ctx.fillRect(leftX, chartTop, rangeWidth, chartBottom - chartTop);
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+          ctx.lineWidth = 1;
+          ctx.setLineDash([4, 3]);
+          ctx.beginPath();
+          ctx.moveTo(crisp(leftX), chartTop);
+          ctx.lineTo(crisp(leftX), chartBottom);
+          ctx.moveTo(crisp(rightX), chartTop);
+          ctx.lineTo(crisp(rightX), chartBottom);
+          ctx.stroke();
+          ctx.setLineDash([]);
+          if (profile && profile.maxRowVolume > 0) {
+            const widthRatio = Math.max(0.1, Math.min(1, Number(drawing.profileWidthRatio) || 0.5));
+            const maxWidth = rangeWidth * widthRatio;
+            for (let row = 0; row < profile.rows.length; row += 1) {
+              const bucket = profile.rows[row];
+              if (bucket.total <= 0) continue;
+              const yTop = yFromPrice(bucket.high);
+              const yBottom = yFromPrice(bucket.low);
+              const top = Math.min(yTop, yBottom);
+              const height2 = Math.max(1, Math.abs(yBottom - yTop) - 1);
+              if (top > chartBottom || top + height2 < chartTop) continue;
+              const inValueArea = row >= profile.valueAreaFrom && row <= profile.valueAreaTo;
+              ctx.globalAlpha = (draft ? 0.5 : 1) * (inValueArea ? 0.5 : 0.2);
+              const rowWidth = bucket.total / profile.maxRowVolume * maxWidth;
+              const upWidth = rowWidth * (bucket.up / bucket.total);
+              ctx.fillStyle = mergedOptions.upColor;
+              ctx.fillRect(leftX, top, upWidth, height2);
+              ctx.fillStyle = mergedOptions.downColor;
+              ctx.fillRect(leftX + upWidth, top, rowWidth - upWidth, height2);
+            }
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            const poc = profile.rows[profile.pocIndex];
+            const drawProfileLevel = (price, color, label, dashed) => {
+              const y = yFromPrice(price);
+              if (y < chartTop || y > chartBottom) return;
+              ctx.strokeStyle = color;
+              ctx.lineWidth = 1;
+              ctx.setLineDash(dashed ? [4, 3] : []);
+              ctx.beginPath();
+              ctx.moveTo(leftX, crisp(y));
+              ctx.lineTo(leftX + maxWidth, crisp(y));
+              ctx.stroke();
+              ctx.setLineDash([]);
+              const prevFont = ctx.font;
+              ctx.font = `10px ${mergedOptions.fontFamily}`;
+              ctx.fillStyle = color;
+              ctx.textAlign = "left";
+              ctx.textBaseline = "bottom";
+              ctx.fillText(label, leftX + 3, y - 1);
+              ctx.font = prevFont;
+            };
+            drawProfileLevel(profile.rows[profile.valueAreaTo].high, "#7e8aa3", "VAH", true);
+            drawProfileLevel(profile.rows[profile.valueAreaFrom].low, "#7e8aa3", "VAL", true);
+            drawProfileLevel((poc.low + poc.high) / 2, "#f7a600", "POC", false);
+          }
+          ctx.restore();
+          handleAt(leftX, yFromPrice(p0.index <= p1.index ? p0.price : p1.price), drawing.color);
+          handleAt(rightX, yFromPrice(p0.index <= p1.index ? p1.price : p0.price), drawing.color);
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -9443,6 +9524,19 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, bx + blockW / 2, by + blockH / 2, ax, ay) <= 5 * hitTolerance) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "fixed-range-volume-profile") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 1 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1)) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -9894,6 +9988,33 @@ function createChart(element, options = {}) {
       scheduleDraw();
       return true;
     }
+    if (activeDrawingTool === "fixed-range-volume-profile") {
+      if (draftDrawing?.type === "fixed-range-volume-profile") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        scheduleDraw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fixed-range-volume-profile");
+      draftDrawing = normalizeDrawingState({
+        type: "fixed-range-volume-profile",
+        points: [point, point],
+        color: defaults.color ?? "#5b8def",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1,
+        ...defaults.profileRows === void 0 ? {} : { profileRows: defaults.profileRows },
+        ...defaults.profileValueAreaPercent === void 0 ? {} : { profileValueAreaPercent: defaults.profileValueAreaPercent },
+        ...defaults.profileWidthRatio === void 0 ? {} : { profileWidthRatio: defaults.profileWidthRatio }
+      });
+      scheduleDraw();
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;

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

@@ -120,6 +120,12 @@ type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray"
  | "brush"
 /** Text box with a connector line pointing at an anchored bar/price. */
  | "callout"
+/**
+ * Volume profile over a bar range picked by two clicks (TradingView's
+ * fixed-range volume profile). Only the two anchors' bar indexes matter —
+ * the price extent comes from the bars they enclose.
+ */
+ | "fixed-range-volume-profile"
 /**
  * TradingView-style ruler. Unlike every other tool it is transient: the
  * measurement overlay is never added to the drawings list (no
@@ -157,6 +163,12 @@ interface DrawingObjectOptions {
     pointValue?: number;
     qtyPrecision?: number;
     fontSize?: number;
+    /** Price buckets across the range. Default 24. */
+    profileRows?: number;
+    /** Share of volume enclosed by the value area. Default 70. */
+    profileValueAreaPercent?: number;
+    /** Profile width as a share of the selected range. Default 0.5. */
+    profileWidthRatio?: number;
 }
 /** Default colors for position tools: [profit, loss, label text]. */
 declare const POSITION_DEFAULT_COLORS: string[];
@@ -220,7 +232,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision" | "fontSize">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision" | "fontSize" | "profileRows" | "profileValueAreaPercent" | "profileWidthRatio">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;

package/dist/hyperprop-charting-library.js

@@ -2036,8 +2036,8 @@ var BUILTIN_DONCHIAN_INDICATOR = {
   }
 };
 var computeVolumeProfile = (data, fromIndex, toIndex, rowCount, valueAreaPercent) => {
-  const from = Math.max(0, fromIndex);
-  const to = Math.min(data.length - 1, toIndex);
+  const from = Math.max(0, Math.round(fromIndex));
+  const to = Math.min(data.length - 1, Math.round(toIndex));
   if (to < from) return null;
   let low = Number.POSITIVE_INFINITY;
   let high = Number.NEGATIVE_INFINITY;
@@ -3896,6 +3896,9 @@ function createChart(element, options = {}) {
       pointValue: Number(drawing.pointValue) || 1,
       qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
       fontSize: Math.max(6, Number(drawing.fontSize) || 14),
+      profileRows: Math.max(4, Math.min(200, Math.round(Number(drawing.profileRows)) || 24)),
+      profileValueAreaPercent: Math.max(10, Math.min(99, Number(drawing.profileValueAreaPercent) || 70)),
+      profileWidthRatio: Math.max(0.1, Math.min(1, Number(drawing.profileWidthRatio) || 0.5)),
       ...drawing.label === void 0 ? {} : { label: drawing.label }
     };
   };
@@ -3929,6 +3932,9 @@ function createChart(element, options = {}) {
     pointValue: drawing.pointValue,
     qtyPrecision: drawing.qtyPrecision,
     fontSize: drawing.fontSize,
+    profileRows: drawing.profileRows,
+    profileValueAreaPercent: drawing.profileValueAreaPercent,
+    profileWidthRatio: drawing.profileWidthRatio,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let tradeMarkers = [];
@@ -6635,6 +6641,81 @@ function createChart(element, options = {}) {
           handleAt(ax, ay, drawing.color);
           handleAt(bx, by, drawing.color);
         }
+      } else if (drawing.type === "fixed-range-volume-profile") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1 && data.length > 0) {
+          const fromIndex = Math.max(0, Math.round(Math.min(p0.index, p1.index)));
+          const toIndex = Math.min(data.length - 1, Math.round(Math.max(p0.index, p1.index)));
+          const leftX = xFromDrawingPoint(p0.index <= p1.index ? p0 : p1) - candleSpacing / 2;
+          const rightX = xFromDrawingPoint(p0.index <= p1.index ? p1 : p0) + candleSpacing / 2;
+          const rangeWidth = Math.max(1, rightX - leftX);
+          const rows = Math.max(4, Math.min(200, Math.round(drawing.profileRows) || 24));
+          const valueAreaPercent = Math.max(10, Math.min(99, Number(drawing.profileValueAreaPercent) || 70));
+          const profile = toIndex >= fromIndex ? computeVolumeProfile(data, fromIndex, toIndex, rows, valueAreaPercent) : null;
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.5 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.06);
+          ctx.fillRect(leftX, chartTop, rangeWidth, chartBottom - chartTop);
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+          ctx.lineWidth = 1;
+          ctx.setLineDash([4, 3]);
+          ctx.beginPath();
+          ctx.moveTo(crisp(leftX), chartTop);
+          ctx.lineTo(crisp(leftX), chartBottom);
+          ctx.moveTo(crisp(rightX), chartTop);
+          ctx.lineTo(crisp(rightX), chartBottom);
+          ctx.stroke();
+          ctx.setLineDash([]);
+          if (profile && profile.maxRowVolume > 0) {
+            const widthRatio = Math.max(0.1, Math.min(1, Number(drawing.profileWidthRatio) || 0.5));
+            const maxWidth = rangeWidth * widthRatio;
+            for (let row = 0; row < profile.rows.length; row += 1) {
+              const bucket = profile.rows[row];
+              if (bucket.total <= 0) continue;
+              const yTop = yFromPrice(bucket.high);
+              const yBottom = yFromPrice(bucket.low);
+              const top = Math.min(yTop, yBottom);
+              const height2 = Math.max(1, Math.abs(yBottom - yTop) - 1);
+              if (top > chartBottom || top + height2 < chartTop) continue;
+              const inValueArea = row >= profile.valueAreaFrom && row <= profile.valueAreaTo;
+              ctx.globalAlpha = (draft ? 0.5 : 1) * (inValueArea ? 0.5 : 0.2);
+              const rowWidth = bucket.total / profile.maxRowVolume * maxWidth;
+              const upWidth = rowWidth * (bucket.up / bucket.total);
+              ctx.fillStyle = mergedOptions.upColor;
+              ctx.fillRect(leftX, top, upWidth, height2);
+              ctx.fillStyle = mergedOptions.downColor;
+              ctx.fillRect(leftX + upWidth, top, rowWidth - upWidth, height2);
+            }
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            const poc = profile.rows[profile.pocIndex];
+            const drawProfileLevel = (price, color, label, dashed) => {
+              const y = yFromPrice(price);
+              if (y < chartTop || y > chartBottom) return;
+              ctx.strokeStyle = color;
+              ctx.lineWidth = 1;
+              ctx.setLineDash(dashed ? [4, 3] : []);
+              ctx.beginPath();
+              ctx.moveTo(leftX, crisp(y));
+              ctx.lineTo(leftX + maxWidth, crisp(y));
+              ctx.stroke();
+              ctx.setLineDash([]);
+              const prevFont = ctx.font;
+              ctx.font = `10px ${mergedOptions.fontFamily}`;
+              ctx.fillStyle = color;
+              ctx.textAlign = "left";
+              ctx.textBaseline = "bottom";
+              ctx.fillText(label, leftX + 3, y - 1);
+              ctx.font = prevFont;
+            };
+            drawProfileLevel(profile.rows[profile.valueAreaTo].high, "#7e8aa3", "VAH", true);
+            drawProfileLevel(profile.rows[profile.valueAreaFrom].low, "#7e8aa3", "VAL", true);
+            drawProfileLevel((poc.low + poc.high) / 2, "#f7a600", "POC", false);
+          }
+          ctx.restore();
+          handleAt(leftX, yFromPrice(p0.index <= p1.index ? p0.price : p1.price), drawing.color);
+          handleAt(rightX, yFromPrice(p0.index <= p1.index ? p1.price : p0.price), drawing.color);
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -9407,6 +9488,19 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, bx + blockW / 2, by + blockH / 2, ax, ay) <= 5 * hitTolerance) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "fixed-range-volume-profile") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 1 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1)) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -9858,6 +9952,33 @@ function createChart(element, options = {}) {
       scheduleDraw();
       return true;
     }
+    if (activeDrawingTool === "fixed-range-volume-profile") {
+      if (draftDrawing?.type === "fixed-range-volume-profile") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        scheduleDraw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fixed-range-volume-profile");
+      draftDrawing = normalizeDrawingState({
+        type: "fixed-range-volume-profile",
+        points: [point, point],
+        color: defaults.color ?? "#5b8def",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1,
+        ...defaults.profileRows === void 0 ? {} : { profileRows: defaults.profileRows },
+        ...defaults.profileValueAreaPercent === void 0 ? {} : { profileValueAreaPercent: defaults.profileValueAreaPercent },
+        ...defaults.profileWidthRatio === void 0 ? {} : { profileWidthRatio: defaults.profileWidthRatio }
+      });
+      scheduleDraw();
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;

package/dist/index.cjs

@@ -2072,8 +2072,8 @@ var BUILTIN_DONCHIAN_INDICATOR = {
   }
 };
 var computeVolumeProfile = (data, fromIndex, toIndex, rowCount, valueAreaPercent) => {
-  const from = Math.max(0, fromIndex);
-  const to = Math.min(data.length - 1, toIndex);
+  const from = Math.max(0, Math.round(fromIndex));
+  const to = Math.min(data.length - 1, Math.round(toIndex));
   if (to < from) return null;
   let low = Number.POSITIVE_INFINITY;
   let high = Number.NEGATIVE_INFINITY;
@@ -3932,6 +3932,9 @@ function createChart(element, options = {}) {
       pointValue: Number(drawing.pointValue) || 1,
       qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
       fontSize: Math.max(6, Number(drawing.fontSize) || 14),
+      profileRows: Math.max(4, Math.min(200, Math.round(Number(drawing.profileRows)) || 24)),
+      profileValueAreaPercent: Math.max(10, Math.min(99, Number(drawing.profileValueAreaPercent) || 70)),
+      profileWidthRatio: Math.max(0.1, Math.min(1, Number(drawing.profileWidthRatio) || 0.5)),
       ...drawing.label === void 0 ? {} : { label: drawing.label }
     };
   };
@@ -3965,6 +3968,9 @@ function createChart(element, options = {}) {
     pointValue: drawing.pointValue,
     qtyPrecision: drawing.qtyPrecision,
     fontSize: drawing.fontSize,
+    profileRows: drawing.profileRows,
+    profileValueAreaPercent: drawing.profileValueAreaPercent,
+    profileWidthRatio: drawing.profileWidthRatio,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let tradeMarkers = [];
@@ -6671,6 +6677,81 @@ function createChart(element, options = {}) {
           handleAt(ax, ay, drawing.color);
           handleAt(bx, by, drawing.color);
         }
+      } else if (drawing.type === "fixed-range-volume-profile") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1 && data.length > 0) {
+          const fromIndex = Math.max(0, Math.round(Math.min(p0.index, p1.index)));
+          const toIndex = Math.min(data.length - 1, Math.round(Math.max(p0.index, p1.index)));
+          const leftX = xFromDrawingPoint(p0.index <= p1.index ? p0 : p1) - candleSpacing / 2;
+          const rightX = xFromDrawingPoint(p0.index <= p1.index ? p1 : p0) + candleSpacing / 2;
+          const rangeWidth = Math.max(1, rightX - leftX);
+          const rows = Math.max(4, Math.min(200, Math.round(drawing.profileRows) || 24));
+          const valueAreaPercent = Math.max(10, Math.min(99, Number(drawing.profileValueAreaPercent) || 70));
+          const profile = toIndex >= fromIndex ? computeVolumeProfile(data, fromIndex, toIndex, rows, valueAreaPercent) : null;
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.5 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.06);
+          ctx.fillRect(leftX, chartTop, rangeWidth, chartBottom - chartTop);
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+          ctx.lineWidth = 1;
+          ctx.setLineDash([4, 3]);
+          ctx.beginPath();
+          ctx.moveTo(crisp(leftX), chartTop);
+          ctx.lineTo(crisp(leftX), chartBottom);
+          ctx.moveTo(crisp(rightX), chartTop);
+          ctx.lineTo(crisp(rightX), chartBottom);
+          ctx.stroke();
+          ctx.setLineDash([]);
+          if (profile && profile.maxRowVolume > 0) {
+            const widthRatio = Math.max(0.1, Math.min(1, Number(drawing.profileWidthRatio) || 0.5));
+            const maxWidth = rangeWidth * widthRatio;
+            for (let row = 0; row < profile.rows.length; row += 1) {
+              const bucket = profile.rows[row];
+              if (bucket.total <= 0) continue;
+              const yTop = yFromPrice(bucket.high);
+              const yBottom = yFromPrice(bucket.low);
+              const top = Math.min(yTop, yBottom);
+              const height2 = Math.max(1, Math.abs(yBottom - yTop) - 1);
+              if (top > chartBottom || top + height2 < chartTop) continue;
+              const inValueArea = row >= profile.valueAreaFrom && row <= profile.valueAreaTo;
+              ctx.globalAlpha = (draft ? 0.5 : 1) * (inValueArea ? 0.5 : 0.2);
+              const rowWidth = bucket.total / profile.maxRowVolume * maxWidth;
+              const upWidth = rowWidth * (bucket.up / bucket.total);
+              ctx.fillStyle = mergedOptions.upColor;
+              ctx.fillRect(leftX, top, upWidth, height2);
+              ctx.fillStyle = mergedOptions.downColor;
+              ctx.fillRect(leftX + upWidth, top, rowWidth - upWidth, height2);
+            }
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            const poc = profile.rows[profile.pocIndex];
+            const drawProfileLevel = (price, color, label, dashed) => {
+              const y = yFromPrice(price);
+              if (y < chartTop || y > chartBottom) return;
+              ctx.strokeStyle = color;
+              ctx.lineWidth = 1;
+              ctx.setLineDash(dashed ? [4, 3] : []);
+              ctx.beginPath();
+              ctx.moveTo(leftX, crisp(y));
+              ctx.lineTo(leftX + maxWidth, crisp(y));
+              ctx.stroke();
+              ctx.setLineDash([]);
+              const prevFont = ctx.font;
+              ctx.font = `10px ${mergedOptions.fontFamily}`;
+              ctx.fillStyle = color;
+              ctx.textAlign = "left";
+              ctx.textBaseline = "bottom";
+              ctx.fillText(label, leftX + 3, y - 1);
+              ctx.font = prevFont;
+            };
+            drawProfileLevel(profile.rows[profile.valueAreaTo].high, "#7e8aa3", "VAH", true);
+            drawProfileLevel(profile.rows[profile.valueAreaFrom].low, "#7e8aa3", "VAL", true);
+            drawProfileLevel((poc.low + poc.high) / 2, "#f7a600", "POC", false);
+          }
+          ctx.restore();
+          handleAt(leftX, yFromPrice(p0.index <= p1.index ? p0.price : p1.price), drawing.color);
+          handleAt(rightX, yFromPrice(p0.index <= p1.index ? p1.price : p0.price), drawing.color);
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -9443,6 +9524,19 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, bx + blockW / 2, by + blockH / 2, ax, ay) <= 5 * hitTolerance) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "fixed-range-volume-profile") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 1 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1)) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -9894,6 +9988,33 @@ function createChart(element, options = {}) {
       scheduleDraw();
       return true;
     }
+    if (activeDrawingTool === "fixed-range-volume-profile") {
+      if (draftDrawing?.type === "fixed-range-volume-profile") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        scheduleDraw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fixed-range-volume-profile");
+      draftDrawing = normalizeDrawingState({
+        type: "fixed-range-volume-profile",
+        points: [point, point],
+        color: defaults.color ?? "#5b8def",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1,
+        ...defaults.profileRows === void 0 ? {} : { profileRows: defaults.profileRows },
+        ...defaults.profileValueAreaPercent === void 0 ? {} : { profileValueAreaPercent: defaults.profileValueAreaPercent },
+        ...defaults.profileWidthRatio === void 0 ? {} : { profileWidthRatio: defaults.profileWidthRatio }
+      });
+      scheduleDraw();
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;

package/dist/index.d.cts

@@ -120,6 +120,12 @@ type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray"
  | "brush"
 /** Text box with a connector line pointing at an anchored bar/price. */
  | "callout"
+/**
+ * Volume profile over a bar range picked by two clicks (TradingView's
+ * fixed-range volume profile). Only the two anchors' bar indexes matter —
+ * the price extent comes from the bars they enclose.
+ */
+ | "fixed-range-volume-profile"
 /**
  * TradingView-style ruler. Unlike every other tool it is transient: the
  * measurement overlay is never added to the drawings list (no
@@ -157,6 +163,12 @@ interface DrawingObjectOptions {
     pointValue?: number;
     qtyPrecision?: number;
     fontSize?: number;
+    /** Price buckets across the range. Default 24. */
+    profileRows?: number;
+    /** Share of volume enclosed by the value area. Default 70. */
+    profileValueAreaPercent?: number;
+    /** Profile width as a share of the selected range. Default 0.5. */
+    profileWidthRatio?: number;
 }
 /** Default colors for position tools: [profit, loss, label text]. */
 declare const POSITION_DEFAULT_COLORS: string[];
@@ -220,7 +232,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision" | "fontSize">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision" | "fontSize" | "profileRows" | "profileValueAreaPercent" | "profileWidthRatio">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;

package/dist/index.d.ts

@@ -120,6 +120,12 @@ type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray"
  | "brush"
 /** Text box with a connector line pointing at an anchored bar/price. */
  | "callout"
+/**
+ * Volume profile over a bar range picked by two clicks (TradingView's
+ * fixed-range volume profile). Only the two anchors' bar indexes matter —
+ * the price extent comes from the bars they enclose.
+ */
+ | "fixed-range-volume-profile"
 /**
  * TradingView-style ruler. Unlike every other tool it is transient: the
  * measurement overlay is never added to the drawings list (no
@@ -157,6 +163,12 @@ interface DrawingObjectOptions {
     pointValue?: number;
     qtyPrecision?: number;
     fontSize?: number;
+    /** Price buckets across the range. Default 24. */
+    profileRows?: number;
+    /** Share of volume enclosed by the value area. Default 70. */
+    profileValueAreaPercent?: number;
+    /** Profile width as a share of the selected range. Default 0.5. */
+    profileWidthRatio?: number;
 }
 /** Default colors for position tools: [profit, loss, label text]. */
 declare const POSITION_DEFAULT_COLORS: string[];
@@ -220,7 +232,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision" | "fontSize">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision" | "fontSize" | "profileRows" | "profileValueAreaPercent" | "profileWidthRatio">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;

package/dist/index.js

@@ -2036,8 +2036,8 @@ var BUILTIN_DONCHIAN_INDICATOR = {
   }
 };
 var computeVolumeProfile = (data, fromIndex, toIndex, rowCount, valueAreaPercent) => {
-  const from = Math.max(0, fromIndex);
-  const to = Math.min(data.length - 1, toIndex);
+  const from = Math.max(0, Math.round(fromIndex));
+  const to = Math.min(data.length - 1, Math.round(toIndex));
   if (to < from) return null;
   let low = Number.POSITIVE_INFINITY;
   let high = Number.NEGATIVE_INFINITY;
@@ -3896,6 +3896,9 @@ function createChart(element, options = {}) {
       pointValue: Number(drawing.pointValue) || 1,
       qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
       fontSize: Math.max(6, Number(drawing.fontSize) || 14),
+      profileRows: Math.max(4, Math.min(200, Math.round(Number(drawing.profileRows)) || 24)),
+      profileValueAreaPercent: Math.max(10, Math.min(99, Number(drawing.profileValueAreaPercent) || 70)),
+      profileWidthRatio: Math.max(0.1, Math.min(1, Number(drawing.profileWidthRatio) || 0.5)),
       ...drawing.label === void 0 ? {} : { label: drawing.label }
     };
   };
@@ -3929,6 +3932,9 @@ function createChart(element, options = {}) {
     pointValue: drawing.pointValue,
     qtyPrecision: drawing.qtyPrecision,
     fontSize: drawing.fontSize,
+    profileRows: drawing.profileRows,
+    profileValueAreaPercent: drawing.profileValueAreaPercent,
+    profileWidthRatio: drawing.profileWidthRatio,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let tradeMarkers = [];
@@ -6635,6 +6641,81 @@ function createChart(element, options = {}) {
           handleAt(ax, ay, drawing.color);
           handleAt(bx, by, drawing.color);
         }
+      } else if (drawing.type === "fixed-range-volume-profile") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1 && data.length > 0) {
+          const fromIndex = Math.max(0, Math.round(Math.min(p0.index, p1.index)));
+          const toIndex = Math.min(data.length - 1, Math.round(Math.max(p0.index, p1.index)));
+          const leftX = xFromDrawingPoint(p0.index <= p1.index ? p0 : p1) - candleSpacing / 2;
+          const rightX = xFromDrawingPoint(p0.index <= p1.index ? p1 : p0) + candleSpacing / 2;
+          const rangeWidth = Math.max(1, rightX - leftX);
+          const rows = Math.max(4, Math.min(200, Math.round(drawing.profileRows) || 24));
+          const valueAreaPercent = Math.max(10, Math.min(99, Number(drawing.profileValueAreaPercent) || 70));
+          const profile = toIndex >= fromIndex ? computeVolumeProfile(data, fromIndex, toIndex, rows, valueAreaPercent) : null;
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.5 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.06);
+          ctx.fillRect(leftX, chartTop, rangeWidth, chartBottom - chartTop);
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+          ctx.lineWidth = 1;
+          ctx.setLineDash([4, 3]);
+          ctx.beginPath();
+          ctx.moveTo(crisp(leftX), chartTop);
+          ctx.lineTo(crisp(leftX), chartBottom);
+          ctx.moveTo(crisp(rightX), chartTop);
+          ctx.lineTo(crisp(rightX), chartBottom);
+          ctx.stroke();
+          ctx.setLineDash([]);
+          if (profile && profile.maxRowVolume > 0) {
+            const widthRatio = Math.max(0.1, Math.min(1, Number(drawing.profileWidthRatio) || 0.5));
+            const maxWidth = rangeWidth * widthRatio;
+            for (let row = 0; row < profile.rows.length; row += 1) {
+              const bucket = profile.rows[row];
+              if (bucket.total <= 0) continue;
+              const yTop = yFromPrice(bucket.high);
+              const yBottom = yFromPrice(bucket.low);
+              const top = Math.min(yTop, yBottom);
+              const height2 = Math.max(1, Math.abs(yBottom - yTop) - 1);
+              if (top > chartBottom || top + height2 < chartTop) continue;
+              const inValueArea = row >= profile.valueAreaFrom && row <= profile.valueAreaTo;
+              ctx.globalAlpha = (draft ? 0.5 : 1) * (inValueArea ? 0.5 : 0.2);
+              const rowWidth = bucket.total / profile.maxRowVolume * maxWidth;
+              const upWidth = rowWidth * (bucket.up / bucket.total);
+              ctx.fillStyle = mergedOptions.upColor;
+              ctx.fillRect(leftX, top, upWidth, height2);
+              ctx.fillStyle = mergedOptions.downColor;
+              ctx.fillRect(leftX + upWidth, top, rowWidth - upWidth, height2);
+            }
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            const poc = profile.rows[profile.pocIndex];
+            const drawProfileLevel = (price, color, label, dashed) => {
+              const y = yFromPrice(price);
+              if (y < chartTop || y > chartBottom) return;
+              ctx.strokeStyle = color;
+              ctx.lineWidth = 1;
+              ctx.setLineDash(dashed ? [4, 3] : []);
+              ctx.beginPath();
+              ctx.moveTo(leftX, crisp(y));
+              ctx.lineTo(leftX + maxWidth, crisp(y));
+              ctx.stroke();
+              ctx.setLineDash([]);
+              const prevFont = ctx.font;
+              ctx.font = `10px ${mergedOptions.fontFamily}`;
+              ctx.fillStyle = color;
+              ctx.textAlign = "left";
+              ctx.textBaseline = "bottom";
+              ctx.fillText(label, leftX + 3, y - 1);
+              ctx.font = prevFont;
+            };
+            drawProfileLevel(profile.rows[profile.valueAreaTo].high, "#7e8aa3", "VAH", true);
+            drawProfileLevel(profile.rows[profile.valueAreaFrom].low, "#7e8aa3", "VAL", true);
+            drawProfileLevel((poc.low + poc.high) / 2, "#f7a600", "POC", false);
+          }
+          ctx.restore();
+          handleAt(leftX, yFromPrice(p0.index <= p1.index ? p0.price : p1.price), drawing.color);
+          handleAt(rightX, yFromPrice(p0.index <= p1.index ? p1.price : p0.price), drawing.color);
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -9407,6 +9488,19 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, bx + blockW / 2, by + blockH / 2, ax, ay) <= 5 * hitTolerance) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "fixed-range-volume-profile") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 1 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1)) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -9858,6 +9952,33 @@ function createChart(element, options = {}) {
       scheduleDraw();
       return true;
     }
+    if (activeDrawingTool === "fixed-range-volume-profile") {
+      if (draftDrawing?.type === "fixed-range-volume-profile") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        scheduleDraw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fixed-range-volume-profile");
+      draftDrawing = normalizeDrawingState({
+        type: "fixed-range-volume-profile",
+        points: [point, point],
+        color: defaults.color ?? "#5b8def",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1,
+        ...defaults.profileRows === void 0 ? {} : { profileRows: defaults.profileRows },
+        ...defaults.profileValueAreaPercent === void 0 ? {} : { profileValueAreaPercent: defaults.profileValueAreaPercent },
+        ...defaults.profileWidthRatio === void 0 ? {} : { profileWidthRatio: defaults.profileWidthRatio }
+      });
+      scheduleDraw();
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;

package/docs/API.md

@@ -645,6 +645,70 @@ link.click();
 
 ---
 
+## Futures desk indicators
+
+Three built-ins aimed at intraday futures work. All three are overlays on the
+main pane, and the last two need a session spec (`setSession`) — without one
+they have no notion of a trading day and render nothing.
+
+### `volume-profile`
+
+Volume distribution across price, with point of control and value area.
+
+```ts
+chart.addIndicator("volume-profile", { scope: "visible", rows: 40, widthPercent: 28 });
+chart.addIndicator("volume-profile", { scope: "session" }); // one per trading day
+```
+
+`scope: "visible"` profiles whatever is on screen and follows pan/zoom, drawn
+against the price axis; `scope: "session"` draws a separate profile inside each
+trading day's bars, skipping any session too narrow to read. Rows are split
+into buy and sell volume by each bar's own direction, shaded brighter inside
+the value area. Inputs: `rows`, `widthPercent`, `placement`
+(`"right" | "left"`, visible scope only), `valueAreaPercent`, `upColor`,
+`downColor`, `valueAreaOpacity`, `outsideOpacity`, `showPoc`, `pocColor`,
+`showValueArea`, `valueAreaColor`, `showLabels`.
+
+OHLCV bars carry no intrabar detail, so each bar's volume is spread evenly over
+the rows its high–low range touches — the same approximation TradingView makes
+when building a profile from candles rather than ticks.
+
+### `session-levels`
+
+The reference prices marked up before the open: prior-day high/low/close
+(PDH/PDL/PDC), overnight high/low (ONH/ONL), the opening range (ORH/ORL) and
+optionally the initial balance (IBH/IBL, first hour).
+
+```ts
+chart.setSession({ spec: "cme-futures" });
+chart.addIndicator("session-levels", { openingRangeMinutes: 30, showInitialBalance: true });
+```
+
+Cash-session bounds are inputs (`rthStart` / `rthEnd`, default 09:30–16:00)
+rather than being read from the chart's session spec: a CME futures session
+runs 18:00–17:00, but the levels traders mark are relative to the 09:30 equity
+open inside it. Everything in the current session outside those hours counts as
+overnight.
+
+### `anchored-vwap`
+
+VWAP measured from a bar you choose rather than the session open.
+
+```ts
+chart.addIndicator("anchored-vwap", {
+  anchorTime: "2026-07-14T13:30:00Z", // epoch ms or ISO
+  showBands: true,
+  bandMultiplier: 2
+});
+```
+
+Without an `anchorTime` it anchors to the most recent session start, which is
+just the session VWAP. Add one instance per anchor; hosts typically expose this
+as a "start here" action on the bar under the cursor. Volume-less feeds fall
+back to an unweighted running average rather than flatlining.
+
+---
+
 ## Time zones and trading sessions
 
 Timestamps are rendered in whatever zone you choose, and the chart can be told

package/package.json

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