hyperprop-charting-library 0.1.118 → 0.1.120

package/dist/hyperprop-charting-library.cjs

@@ -43,7 +43,10 @@ var DEFAULT_GRID_OPTIONS = {
   verticalLines: true,
   xTickCount: 8,
   yTickCount: 6,
-  horizontalTickCount: 6
+  horizontalTickCount: 6,
+  sessionSeparators: false,
+  sessionSeparatorColor: "#3b4150",
+  sessionSeparatorOpacity: 0.55
 };
 var DEFAULT_AXIS_OPTIONS = {
   lineColor: "#3b3f47",
@@ -432,6 +435,60 @@ var computeStdDevSeries = (data, length, source) => {
   }
   return result;
 };
+var VWAP_SESSION_ANCHOR_MS = 22 * 36e5;
+var vwapSessionDayOf = (ms) => Math.floor((ms - VWAP_SESSION_ANCHOR_MS) / 864e5);
+var computeVwapSeries = (data, band) => {
+  const result = new Array(data.length).fill(null);
+  let session = Number.NaN;
+  let cumPv = 0;
+  let cumPv2 = 0;
+  let cumV = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    const point = data[i];
+    if (!point) continue;
+    const day = vwapSessionDayOf(point.time.getTime());
+    if (day !== session) {
+      session = day;
+      cumPv = 0;
+      cumPv2 = 0;
+      cumV = 0;
+    }
+    const typical = (point.h + point.l + point.c) / 3;
+    const volume = Math.max(0, point.v ?? 0);
+    cumPv += typical * volume;
+    cumPv2 += typical * typical * volume;
+    cumV += volume;
+    if (cumV <= 0) continue;
+    const vwap = cumPv / cumV;
+    if (band === "vwap") {
+      result[i] = vwap;
+    } else {
+      const variance = Math.max(0, cumPv2 / cumV - vwap * vwap);
+      result[i] = Math.sqrt(variance);
+    }
+  }
+  for (let i = 1; i < data.length; i += 1) {
+    const point = data[i];
+    const prev = data[i - 1];
+    const next = data[i + 1];
+    if (!point || !prev || !next) continue;
+    const day = vwapSessionDayOf(point.time.getTime());
+    if (day !== vwapSessionDayOf(prev.time.getTime()) && day === vwapSessionDayOf(next.time.getTime())) {
+      result[i] = null;
+    }
+  }
+  return result;
+};
+var computeBollingerSeries = (data, length, multiplier, source, band) => {
+  const basis = computeSmaSeries(data, length, source);
+  if (band === "basis") return basis;
+  const dev = computeStdDevSeries(data, length, source);
+  return basis.map((value, idx) => {
+    const sigma = dev[idx];
+    if (value == null || sigma == null) return null;
+    return band === "upper" ? value + multiplier * sigma : value - multiplier * sigma;
+  });
+};
 var computeRsiSeries = (data, length) => {
   const result = new Array(data.length).fill(null);
   if (data.length < 2) return result;
@@ -558,6 +615,39 @@ var drawOverlaySeries = (ctx, renderContext, values, color, width) => {
   }
   ctx.restore();
 };
+var fillBetweenSeries = (ctx, renderContext, upper, lower, color, opacity) => {
+  if (!renderContext.yFromPrice || opacity <= 0) return;
+  const yFromPrice = renderContext.yFromPrice;
+  ctx.save();
+  ctx.globalAlpha = Math.min(1, Math.max(0, opacity));
+  ctx.fillStyle = color;
+  let runStart = -1;
+  const flushRun = (endIndexExclusive) => {
+    if (runStart < 0) return;
+    ctx.beginPath();
+    for (let i = runStart; i < endIndexExclusive; i += 1) {
+      const x = renderContext.xFromIndex(i);
+      const y = yFromPrice(upper[i]);
+      if (i === runStart) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+    for (let i = endIndexExclusive - 1; i >= runStart; i -= 1) {
+      ctx.lineTo(renderContext.xFromIndex(i), yFromPrice(lower[i]));
+    }
+    ctx.closePath();
+    ctx.fill();
+    runStart = -1;
+  };
+  for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+    const up = upper[index];
+    const lo = lower[index];
+    const valid = Number.isFinite(up ?? Number.NaN) && Number.isFinite(lo ?? Number.NaN);
+    if (valid && runStart < 0) runStart = index;
+    if (!valid) flushRun(index);
+  }
+  flushRun(renderContext.endIndex + 1);
+  ctx.restore();
+};
 var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride, maxOverride, guideLines, options = {}) => {
   const visible = [];
   for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
@@ -819,6 +909,89 @@ var BUILTIN_HMA_INDICATOR = {
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#14b8a6", Number(inputs.width) || 2);
   }
 };
+var BUILTIN_VWAP_INDICATOR = {
+  id: "vwap",
+  name: "VWAP",
+  pane: "overlay",
+  defaultInputs: {
+    color: "#f59e0b",
+    width: 2,
+    showBands: false,
+    bandMultiplier: 1,
+    bandColor: "#94a3b8",
+    bandFillOpacity: 0.06
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const vwap = withCachedSeries(
+      "vwap|line",
+      renderContext.data,
+      () => computeVwapSeries(renderContext.data, "vwap")
+    );
+    if (inputs.showBands) {
+      const sigma = withCachedSeries(
+        "vwap|sigma",
+        renderContext.data,
+        () => computeVwapSeries(renderContext.data, "sigma")
+      );
+      const multiplier = Math.max(0.1, Number(inputs.bandMultiplier) || 1);
+      const upper = vwap.map((value, idx) => {
+        const s = sigma[idx];
+        return value == null || s == null ? null : value + multiplier * s;
+      });
+      const lower = vwap.map((value, idx) => {
+        const s = sigma[idx];
+        return value == null || s == null ? null : value - multiplier * s;
+      });
+      const bandColor = inputs.bandColor ?? "#94a3b8";
+      fillBetweenSeries(ctx, renderContext, upper, lower, bandColor, Number(inputs.bandFillOpacity) || 0.06);
+      drawOverlaySeries(ctx, renderContext, upper, bandColor, 1);
+      drawOverlaySeries(ctx, renderContext, lower, bandColor, 1);
+    }
+    drawOverlaySeries(ctx, renderContext, vwap, inputs.color ?? "#f59e0b", Number(inputs.width) || 2);
+  }
+};
+var BUILTIN_BOLLINGER_INDICATOR = {
+  id: "bollinger",
+  name: "BB",
+  pane: "overlay",
+  // Basis is pink so it stays distinguishable from the (orange) VWAP line
+  // when both overlays are active.
+  defaultInputs: {
+    length: 20,
+    multiplier: 2,
+    source: "close",
+    basisColor: "#ec4899",
+    bandColor: "#3b82f6",
+    width: 1.5,
+    fillOpacity: 0.05
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const multiplier = Math.max(0.1, Number(inputs.multiplier) || 2);
+    const source = inputs.source ?? "close";
+    const basis = withCachedSeries(
+      `bb|basis|${length}|${source}`,
+      renderContext.data,
+      () => computeBollingerSeries(renderContext.data, length, multiplier, source, "basis")
+    );
+    const upper = withCachedSeries(
+      `bb|upper|${length}|${multiplier}|${source}`,
+      renderContext.data,
+      () => computeBollingerSeries(renderContext.data, length, multiplier, source, "upper")
+    );
+    const lower = withCachedSeries(
+      `bb|lower|${length}|${multiplier}|${source}`,
+      renderContext.data,
+      () => computeBollingerSeries(renderContext.data, length, multiplier, source, "lower")
+    );
+    const bandColor = inputs.bandColor ?? "#3b82f6";
+    const width = Number(inputs.width) || 1.5;
+    fillBetweenSeries(ctx, renderContext, upper, lower, bandColor, Number(inputs.fillOpacity) || 0.05);
+    drawOverlaySeries(ctx, renderContext, upper, bandColor, width);
+    drawOverlaySeries(ctx, renderContext, lower, bandColor, width);
+    drawOverlaySeries(ctx, renderContext, basis, inputs.basisColor ?? "#f59e0b", width);
+  }
+};
 var BUILTIN_STDDEV_INDICATOR = {
   id: "stddev",
   name: "StdDev",
@@ -902,6 +1075,8 @@ var BUILTIN_INDICATORS = [
   BUILTIN_VWMA_INDICATOR,
   BUILTIN_RMA_INDICATOR,
   BUILTIN_HMA_INDICATOR,
+  BUILTIN_VWAP_INDICATOR,
+  BUILTIN_BOLLINGER_INDICATOR,
   BUILTIN_STDDEV_INDICATOR,
   BUILTIN_ATR_INDICATOR
 ];
@@ -2754,15 +2929,31 @@ function createChart(element, options = {}) {
           const pct = diff / base * 100;
           const ticks = tick > 0 ? Math.round(diff / tick) : 0;
           const signed = (value, text) => `${value < 0 ? "\u2212" : value > 0 ? "+" : ""}${text}`;
-          const labelText = tick > 0 ? `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)}) ${signed(ticks, String(Math.abs(ticks)))}` : `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)})`;
+          const labelLines = [
+            tick > 0 ? `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)}) ${signed(ticks, String(Math.abs(ticks)))}` : `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)})`
+          ];
+          const barSpan = Math.abs(Math.round(p1.index) - Math.round(p0.index));
+          if (barSpan > 0) {
+            const t0 = getTimeForIndex(Math.round(p0.index));
+            const t1 = getTimeForIndex(Math.round(p1.index));
+            const spanMs = t0 && t1 ? Math.abs(t1.getTime() - t0.getTime()) : 0;
+            labelLines.push(spanMs > 0 ? `${barSpan} bars, ${formatDuration(spanMs)}` : `${barSpan} bars`);
+          }
+          const pointValue = Number(drawing.pointValue);
+          if (Number.isFinite(pointValue) && pointValue > 0) {
+            const dollars = diff * pointValue;
+            const money = Math.abs(dollars).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+            labelLines.push(`${signed(dollars, `$${money}`)} / contract`);
+          }
           const prevFont = ctx.font;
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
           const padding = 6;
-          const textW = ctx.measureText(labelText).width;
+          const lineHeight = 15;
+          const textW = Math.max(...labelLines.map((line) => ctx.measureText(line).width));
           const pillW = textW + padding * 2;
-          const pillH = 18;
+          const pillH = labelLines.length * lineHeight + padding;
           const pillX = midX - pillW / 2;
-          const pillY = botY + 6;
+          const pillY = botY + 6 + pillH <= fullChartBottom - 2 ? botY + 6 : Math.max(chartTop + 2, topY - 6 - pillH);
           ctx.fillStyle = mergedOptions.backgroundColor;
           fillRoundedRect(pillX, pillY, pillW, pillH, 4);
           ctx.save();
@@ -2773,7 +2964,9 @@ function createChart(element, options = {}) {
           ctx.fillStyle = drawing.color;
           ctx.textAlign = "center";
           ctx.textBaseline = "middle";
-          ctx.fillText(labelText, midX, pillY + pillH / 2);
+          labelLines.forEach((line, lineIndex) => {
+            ctx.fillText(line, midX, pillY + padding / 2 + lineIndex * lineHeight + lineHeight / 2);
+          });
           ctx.font = prevFont;
           if (drawing.label) {
             drawDrawingLabel(drawing.label, midX, topY - 4, drawing.color);
@@ -2917,6 +3110,32 @@ function createChart(element, options = {}) {
       }
       ctx.restore();
     }
+    if (grid.sessionSeparators && data.length > 1) {
+      const first = Math.max(1, startIndex);
+      const barDeltaMs = data.length > 1 ? Math.abs(data[Math.min(first, data.length - 1)].time.getTime() - data[Math.min(first, data.length - 1) - 1].time.getTime()) : 0;
+      if (barDeltaMs > 0 && barDeltaMs < 0.9 * 864e5) {
+        const SESSION_ANCHOR_MS = 22 * 36e5;
+        const sessionDayOf = (ms) => Math.floor((ms - SESSION_ANCHOR_MS) / 864e5);
+        ctx.save();
+        ctx.globalAlpha = clamp(grid.sessionSeparatorOpacity, 0, 1);
+        ctx.strokeStyle = grid.sessionSeparatorColor;
+        ctx.lineWidth = 1;
+        for (let index = first; index <= endIndex; index += 1) {
+          const point = data[index];
+          const prev = data[index - 1];
+          if (!point || !prev) continue;
+          if (sessionDayOf(point.time.getTime()) === sessionDayOf(prev.time.getTime())) {
+            continue;
+          }
+          const x = chartLeft + (index - xStart) / xSpan * chartWidth;
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(chartTop));
+          ctx.lineTo(crisp(x), crisp(fullChartBottom));
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+    }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
     const lastDataIndex = data.length - 1;
@@ -3523,8 +3742,9 @@ function createChart(element, options = {}) {
         }
         return typeof value === "string" && !/^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value.trim());
       };
+      const LEGEND_EXCLUDED_INPUT_KEYS = /* @__PURE__ */ new Set(["width", "bandMultiplier", "bandFillOpacity", "fillOpacity"]);
       const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
-        const inputValues = Object.entries(indicator.inputs).filter(([, value]) => isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
+        const inputValues = Object.entries(indicator.inputs).filter(([key, value]) => !LEGEND_EXCLUDED_INPUT_KEYS.has(key) && typeof value !== "boolean" && isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
         if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
           return `${plugin.name} ${inputValues.join(" ")}`;
         }
@@ -4502,7 +4722,9 @@ function createChart(element, options = {}) {
           points: [point, normalizeDrawingPoint(point.index + width2, point.price - priceOffset)],
           color: defaults.color ?? "#2962ff",
           style: defaults.style ?? "solid",
-          width: defaults.width ?? 1
+          width: defaults.width ?? 1,
+          // pointValue enables the dollar-P&L line in the measure label.
+          ...defaults.pointValue === void 0 ? {} : { pointValue: defaults.pointValue }
         })
       );
       emitDrawingsChange();

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

@@ -215,6 +215,14 @@ interface GridOptions {
     xTickCount?: number;
     yTickCount?: number;
     horizontalTickCount?: number;
+    /**
+     * Vertical separator at every trading-day boundary (a bar whose UTC
+     * calendar day differs from the previous bar's). Drawn stronger than the
+     * regular grid so intraday charts stay oriented while scrolling history.
+     */
+    sessionSeparators?: boolean;
+    sessionSeparatorColor?: string;
+    sessionSeparatorOpacity?: number;
 }
 interface CrosshairOptions {
     visible?: boolean;

package/dist/hyperprop-charting-library.js

@@ -17,7 +17,10 @@ var DEFAULT_GRID_OPTIONS = {
   verticalLines: true,
   xTickCount: 8,
   yTickCount: 6,
-  horizontalTickCount: 6
+  horizontalTickCount: 6,
+  sessionSeparators: false,
+  sessionSeparatorColor: "#3b4150",
+  sessionSeparatorOpacity: 0.55
 };
 var DEFAULT_AXIS_OPTIONS = {
   lineColor: "#3b3f47",
@@ -406,6 +409,60 @@ var computeStdDevSeries = (data, length, source) => {
   }
   return result;
 };
+var VWAP_SESSION_ANCHOR_MS = 22 * 36e5;
+var vwapSessionDayOf = (ms) => Math.floor((ms - VWAP_SESSION_ANCHOR_MS) / 864e5);
+var computeVwapSeries = (data, band) => {
+  const result = new Array(data.length).fill(null);
+  let session = Number.NaN;
+  let cumPv = 0;
+  let cumPv2 = 0;
+  let cumV = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    const point = data[i];
+    if (!point) continue;
+    const day = vwapSessionDayOf(point.time.getTime());
+    if (day !== session) {
+      session = day;
+      cumPv = 0;
+      cumPv2 = 0;
+      cumV = 0;
+    }
+    const typical = (point.h + point.l + point.c) / 3;
+    const volume = Math.max(0, point.v ?? 0);
+    cumPv += typical * volume;
+    cumPv2 += typical * typical * volume;
+    cumV += volume;
+    if (cumV <= 0) continue;
+    const vwap = cumPv / cumV;
+    if (band === "vwap") {
+      result[i] = vwap;
+    } else {
+      const variance = Math.max(0, cumPv2 / cumV - vwap * vwap);
+      result[i] = Math.sqrt(variance);
+    }
+  }
+  for (let i = 1; i < data.length; i += 1) {
+    const point = data[i];
+    const prev = data[i - 1];
+    const next = data[i + 1];
+    if (!point || !prev || !next) continue;
+    const day = vwapSessionDayOf(point.time.getTime());
+    if (day !== vwapSessionDayOf(prev.time.getTime()) && day === vwapSessionDayOf(next.time.getTime())) {
+      result[i] = null;
+    }
+  }
+  return result;
+};
+var computeBollingerSeries = (data, length, multiplier, source, band) => {
+  const basis = computeSmaSeries(data, length, source);
+  if (band === "basis") return basis;
+  const dev = computeStdDevSeries(data, length, source);
+  return basis.map((value, idx) => {
+    const sigma = dev[idx];
+    if (value == null || sigma == null) return null;
+    return band === "upper" ? value + multiplier * sigma : value - multiplier * sigma;
+  });
+};
 var computeRsiSeries = (data, length) => {
   const result = new Array(data.length).fill(null);
   if (data.length < 2) return result;
@@ -532,6 +589,39 @@ var drawOverlaySeries = (ctx, renderContext, values, color, width) => {
   }
   ctx.restore();
 };
+var fillBetweenSeries = (ctx, renderContext, upper, lower, color, opacity) => {
+  if (!renderContext.yFromPrice || opacity <= 0) return;
+  const yFromPrice = renderContext.yFromPrice;
+  ctx.save();
+  ctx.globalAlpha = Math.min(1, Math.max(0, opacity));
+  ctx.fillStyle = color;
+  let runStart = -1;
+  const flushRun = (endIndexExclusive) => {
+    if (runStart < 0) return;
+    ctx.beginPath();
+    for (let i = runStart; i < endIndexExclusive; i += 1) {
+      const x = renderContext.xFromIndex(i);
+      const y = yFromPrice(upper[i]);
+      if (i === runStart) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+    for (let i = endIndexExclusive - 1; i >= runStart; i -= 1) {
+      ctx.lineTo(renderContext.xFromIndex(i), yFromPrice(lower[i]));
+    }
+    ctx.closePath();
+    ctx.fill();
+    runStart = -1;
+  };
+  for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+    const up = upper[index];
+    const lo = lower[index];
+    const valid = Number.isFinite(up ?? Number.NaN) && Number.isFinite(lo ?? Number.NaN);
+    if (valid && runStart < 0) runStart = index;
+    if (!valid) flushRun(index);
+  }
+  flushRun(renderContext.endIndex + 1);
+  ctx.restore();
+};
 var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride, maxOverride, guideLines, options = {}) => {
   const visible = [];
   for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
@@ -793,6 +883,89 @@ var BUILTIN_HMA_INDICATOR = {
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#14b8a6", Number(inputs.width) || 2);
   }
 };
+var BUILTIN_VWAP_INDICATOR = {
+  id: "vwap",
+  name: "VWAP",
+  pane: "overlay",
+  defaultInputs: {
+    color: "#f59e0b",
+    width: 2,
+    showBands: false,
+    bandMultiplier: 1,
+    bandColor: "#94a3b8",
+    bandFillOpacity: 0.06
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const vwap = withCachedSeries(
+      "vwap|line",
+      renderContext.data,
+      () => computeVwapSeries(renderContext.data, "vwap")
+    );
+    if (inputs.showBands) {
+      const sigma = withCachedSeries(
+        "vwap|sigma",
+        renderContext.data,
+        () => computeVwapSeries(renderContext.data, "sigma")
+      );
+      const multiplier = Math.max(0.1, Number(inputs.bandMultiplier) || 1);
+      const upper = vwap.map((value, idx) => {
+        const s = sigma[idx];
+        return value == null || s == null ? null : value + multiplier * s;
+      });
+      const lower = vwap.map((value, idx) => {
+        const s = sigma[idx];
+        return value == null || s == null ? null : value - multiplier * s;
+      });
+      const bandColor = inputs.bandColor ?? "#94a3b8";
+      fillBetweenSeries(ctx, renderContext, upper, lower, bandColor, Number(inputs.bandFillOpacity) || 0.06);
+      drawOverlaySeries(ctx, renderContext, upper, bandColor, 1);
+      drawOverlaySeries(ctx, renderContext, lower, bandColor, 1);
+    }
+    drawOverlaySeries(ctx, renderContext, vwap, inputs.color ?? "#f59e0b", Number(inputs.width) || 2);
+  }
+};
+var BUILTIN_BOLLINGER_INDICATOR = {
+  id: "bollinger",
+  name: "BB",
+  pane: "overlay",
+  // Basis is pink so it stays distinguishable from the (orange) VWAP line
+  // when both overlays are active.
+  defaultInputs: {
+    length: 20,
+    multiplier: 2,
+    source: "close",
+    basisColor: "#ec4899",
+    bandColor: "#3b82f6",
+    width: 1.5,
+    fillOpacity: 0.05
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const multiplier = Math.max(0.1, Number(inputs.multiplier) || 2);
+    const source = inputs.source ?? "close";
+    const basis = withCachedSeries(
+      `bb|basis|${length}|${source}`,
+      renderContext.data,
+      () => computeBollingerSeries(renderContext.data, length, multiplier, source, "basis")
+    );
+    const upper = withCachedSeries(
+      `bb|upper|${length}|${multiplier}|${source}`,
+      renderContext.data,
+      () => computeBollingerSeries(renderContext.data, length, multiplier, source, "upper")
+    );
+    const lower = withCachedSeries(
+      `bb|lower|${length}|${multiplier}|${source}`,
+      renderContext.data,
+      () => computeBollingerSeries(renderContext.data, length, multiplier, source, "lower")
+    );
+    const bandColor = inputs.bandColor ?? "#3b82f6";
+    const width = Number(inputs.width) || 1.5;
+    fillBetweenSeries(ctx, renderContext, upper, lower, bandColor, Number(inputs.fillOpacity) || 0.05);
+    drawOverlaySeries(ctx, renderContext, upper, bandColor, width);
+    drawOverlaySeries(ctx, renderContext, lower, bandColor, width);
+    drawOverlaySeries(ctx, renderContext, basis, inputs.basisColor ?? "#f59e0b", width);
+  }
+};
 var BUILTIN_STDDEV_INDICATOR = {
   id: "stddev",
   name: "StdDev",
@@ -876,6 +1049,8 @@ var BUILTIN_INDICATORS = [
   BUILTIN_VWMA_INDICATOR,
   BUILTIN_RMA_INDICATOR,
   BUILTIN_HMA_INDICATOR,
+  BUILTIN_VWAP_INDICATOR,
+  BUILTIN_BOLLINGER_INDICATOR,
   BUILTIN_STDDEV_INDICATOR,
   BUILTIN_ATR_INDICATOR
 ];
@@ -2728,15 +2903,31 @@ function createChart(element, options = {}) {
           const pct = diff / base * 100;
           const ticks = tick > 0 ? Math.round(diff / tick) : 0;
           const signed = (value, text) => `${value < 0 ? "\u2212" : value > 0 ? "+" : ""}${text}`;
-          const labelText = tick > 0 ? `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)}) ${signed(ticks, String(Math.abs(ticks)))}` : `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)})`;
+          const labelLines = [
+            tick > 0 ? `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)}) ${signed(ticks, String(Math.abs(ticks)))}` : `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)})`
+          ];
+          const barSpan = Math.abs(Math.round(p1.index) - Math.round(p0.index));
+          if (barSpan > 0) {
+            const t0 = getTimeForIndex(Math.round(p0.index));
+            const t1 = getTimeForIndex(Math.round(p1.index));
+            const spanMs = t0 && t1 ? Math.abs(t1.getTime() - t0.getTime()) : 0;
+            labelLines.push(spanMs > 0 ? `${barSpan} bars, ${formatDuration(spanMs)}` : `${barSpan} bars`);
+          }
+          const pointValue = Number(drawing.pointValue);
+          if (Number.isFinite(pointValue) && pointValue > 0) {
+            const dollars = diff * pointValue;
+            const money = Math.abs(dollars).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+            labelLines.push(`${signed(dollars, `$${money}`)} / contract`);
+          }
           const prevFont = ctx.font;
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
           const padding = 6;
-          const textW = ctx.measureText(labelText).width;
+          const lineHeight = 15;
+          const textW = Math.max(...labelLines.map((line) => ctx.measureText(line).width));
           const pillW = textW + padding * 2;
-          const pillH = 18;
+          const pillH = labelLines.length * lineHeight + padding;
           const pillX = midX - pillW / 2;
-          const pillY = botY + 6;
+          const pillY = botY + 6 + pillH <= fullChartBottom - 2 ? botY + 6 : Math.max(chartTop + 2, topY - 6 - pillH);
           ctx.fillStyle = mergedOptions.backgroundColor;
           fillRoundedRect(pillX, pillY, pillW, pillH, 4);
           ctx.save();
@@ -2747,7 +2938,9 @@ function createChart(element, options = {}) {
           ctx.fillStyle = drawing.color;
           ctx.textAlign = "center";
           ctx.textBaseline = "middle";
-          ctx.fillText(labelText, midX, pillY + pillH / 2);
+          labelLines.forEach((line, lineIndex) => {
+            ctx.fillText(line, midX, pillY + padding / 2 + lineIndex * lineHeight + lineHeight / 2);
+          });
           ctx.font = prevFont;
           if (drawing.label) {
             drawDrawingLabel(drawing.label, midX, topY - 4, drawing.color);
@@ -2891,6 +3084,32 @@ function createChart(element, options = {}) {
       }
       ctx.restore();
     }
+    if (grid.sessionSeparators && data.length > 1) {
+      const first = Math.max(1, startIndex);
+      const barDeltaMs = data.length > 1 ? Math.abs(data[Math.min(first, data.length - 1)].time.getTime() - data[Math.min(first, data.length - 1) - 1].time.getTime()) : 0;
+      if (barDeltaMs > 0 && barDeltaMs < 0.9 * 864e5) {
+        const SESSION_ANCHOR_MS = 22 * 36e5;
+        const sessionDayOf = (ms) => Math.floor((ms - SESSION_ANCHOR_MS) / 864e5);
+        ctx.save();
+        ctx.globalAlpha = clamp(grid.sessionSeparatorOpacity, 0, 1);
+        ctx.strokeStyle = grid.sessionSeparatorColor;
+        ctx.lineWidth = 1;
+        for (let index = first; index <= endIndex; index += 1) {
+          const point = data[index];
+          const prev = data[index - 1];
+          if (!point || !prev) continue;
+          if (sessionDayOf(point.time.getTime()) === sessionDayOf(prev.time.getTime())) {
+            continue;
+          }
+          const x = chartLeft + (index - xStart) / xSpan * chartWidth;
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(chartTop));
+          ctx.lineTo(crisp(x), crisp(fullChartBottom));
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+    }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
     const lastDataIndex = data.length - 1;
@@ -3497,8 +3716,9 @@ function createChart(element, options = {}) {
         }
         return typeof value === "string" && !/^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value.trim());
       };
+      const LEGEND_EXCLUDED_INPUT_KEYS = /* @__PURE__ */ new Set(["width", "bandMultiplier", "bandFillOpacity", "fillOpacity"]);
       const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
-        const inputValues = Object.entries(indicator.inputs).filter(([, value]) => isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
+        const inputValues = Object.entries(indicator.inputs).filter(([key, value]) => !LEGEND_EXCLUDED_INPUT_KEYS.has(key) && typeof value !== "boolean" && isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
         if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
           return `${plugin.name} ${inputValues.join(" ")}`;
         }
@@ -4476,7 +4696,9 @@ function createChart(element, options = {}) {
           points: [point, normalizeDrawingPoint(point.index + width2, point.price - priceOffset)],
           color: defaults.color ?? "#2962ff",
           style: defaults.style ?? "solid",
-          width: defaults.width ?? 1
+          width: defaults.width ?? 1,
+          // pointValue enables the dollar-P&L line in the measure label.
+          ...defaults.pointValue === void 0 ? {} : { pointValue: defaults.pointValue }
         })
       );
       emitDrawingsChange();

package/dist/index.cjs

@@ -43,7 +43,10 @@ var DEFAULT_GRID_OPTIONS = {
   verticalLines: true,
   xTickCount: 8,
   yTickCount: 6,
-  horizontalTickCount: 6
+  horizontalTickCount: 6,
+  sessionSeparators: false,
+  sessionSeparatorColor: "#3b4150",
+  sessionSeparatorOpacity: 0.55
 };
 var DEFAULT_AXIS_OPTIONS = {
   lineColor: "#3b3f47",
@@ -432,6 +435,60 @@ var computeStdDevSeries = (data, length, source) => {
   }
   return result;
 };
+var VWAP_SESSION_ANCHOR_MS = 22 * 36e5;
+var vwapSessionDayOf = (ms) => Math.floor((ms - VWAP_SESSION_ANCHOR_MS) / 864e5);
+var computeVwapSeries = (data, band) => {
+  const result = new Array(data.length).fill(null);
+  let session = Number.NaN;
+  let cumPv = 0;
+  let cumPv2 = 0;
+  let cumV = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    const point = data[i];
+    if (!point) continue;
+    const day = vwapSessionDayOf(point.time.getTime());
+    if (day !== session) {
+      session = day;
+      cumPv = 0;
+      cumPv2 = 0;
+      cumV = 0;
+    }
+    const typical = (point.h + point.l + point.c) / 3;
+    const volume = Math.max(0, point.v ?? 0);
+    cumPv += typical * volume;
+    cumPv2 += typical * typical * volume;
+    cumV += volume;
+    if (cumV <= 0) continue;
+    const vwap = cumPv / cumV;
+    if (band === "vwap") {
+      result[i] = vwap;
+    } else {
+      const variance = Math.max(0, cumPv2 / cumV - vwap * vwap);
+      result[i] = Math.sqrt(variance);
+    }
+  }
+  for (let i = 1; i < data.length; i += 1) {
+    const point = data[i];
+    const prev = data[i - 1];
+    const next = data[i + 1];
+    if (!point || !prev || !next) continue;
+    const day = vwapSessionDayOf(point.time.getTime());
+    if (day !== vwapSessionDayOf(prev.time.getTime()) && day === vwapSessionDayOf(next.time.getTime())) {
+      result[i] = null;
+    }
+  }
+  return result;
+};
+var computeBollingerSeries = (data, length, multiplier, source, band) => {
+  const basis = computeSmaSeries(data, length, source);
+  if (band === "basis") return basis;
+  const dev = computeStdDevSeries(data, length, source);
+  return basis.map((value, idx) => {
+    const sigma = dev[idx];
+    if (value == null || sigma == null) return null;
+    return band === "upper" ? value + multiplier * sigma : value - multiplier * sigma;
+  });
+};
 var computeRsiSeries = (data, length) => {
   const result = new Array(data.length).fill(null);
   if (data.length < 2) return result;
@@ -558,6 +615,39 @@ var drawOverlaySeries = (ctx, renderContext, values, color, width) => {
   }
   ctx.restore();
 };
+var fillBetweenSeries = (ctx, renderContext, upper, lower, color, opacity) => {
+  if (!renderContext.yFromPrice || opacity <= 0) return;
+  const yFromPrice = renderContext.yFromPrice;
+  ctx.save();
+  ctx.globalAlpha = Math.min(1, Math.max(0, opacity));
+  ctx.fillStyle = color;
+  let runStart = -1;
+  const flushRun = (endIndexExclusive) => {
+    if (runStart < 0) return;
+    ctx.beginPath();
+    for (let i = runStart; i < endIndexExclusive; i += 1) {
+      const x = renderContext.xFromIndex(i);
+      const y = yFromPrice(upper[i]);
+      if (i === runStart) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+    for (let i = endIndexExclusive - 1; i >= runStart; i -= 1) {
+      ctx.lineTo(renderContext.xFromIndex(i), yFromPrice(lower[i]));
+    }
+    ctx.closePath();
+    ctx.fill();
+    runStart = -1;
+  };
+  for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+    const up = upper[index];
+    const lo = lower[index];
+    const valid = Number.isFinite(up ?? Number.NaN) && Number.isFinite(lo ?? Number.NaN);
+    if (valid && runStart < 0) runStart = index;
+    if (!valid) flushRun(index);
+  }
+  flushRun(renderContext.endIndex + 1);
+  ctx.restore();
+};
 var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride, maxOverride, guideLines, options = {}) => {
   const visible = [];
   for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
@@ -819,6 +909,89 @@ var BUILTIN_HMA_INDICATOR = {
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#14b8a6", Number(inputs.width) || 2);
   }
 };
+var BUILTIN_VWAP_INDICATOR = {
+  id: "vwap",
+  name: "VWAP",
+  pane: "overlay",
+  defaultInputs: {
+    color: "#f59e0b",
+    width: 2,
+    showBands: false,
+    bandMultiplier: 1,
+    bandColor: "#94a3b8",
+    bandFillOpacity: 0.06
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const vwap = withCachedSeries(
+      "vwap|line",
+      renderContext.data,
+      () => computeVwapSeries(renderContext.data, "vwap")
+    );
+    if (inputs.showBands) {
+      const sigma = withCachedSeries(
+        "vwap|sigma",
+        renderContext.data,
+        () => computeVwapSeries(renderContext.data, "sigma")
+      );
+      const multiplier = Math.max(0.1, Number(inputs.bandMultiplier) || 1);
+      const upper = vwap.map((value, idx) => {
+        const s = sigma[idx];
+        return value == null || s == null ? null : value + multiplier * s;
+      });
+      const lower = vwap.map((value, idx) => {
+        const s = sigma[idx];
+        return value == null || s == null ? null : value - multiplier * s;
+      });
+      const bandColor = inputs.bandColor ?? "#94a3b8";
+      fillBetweenSeries(ctx, renderContext, upper, lower, bandColor, Number(inputs.bandFillOpacity) || 0.06);
+      drawOverlaySeries(ctx, renderContext, upper, bandColor, 1);
+      drawOverlaySeries(ctx, renderContext, lower, bandColor, 1);
+    }
+    drawOverlaySeries(ctx, renderContext, vwap, inputs.color ?? "#f59e0b", Number(inputs.width) || 2);
+  }
+};
+var BUILTIN_BOLLINGER_INDICATOR = {
+  id: "bollinger",
+  name: "BB",
+  pane: "overlay",
+  // Basis is pink so it stays distinguishable from the (orange) VWAP line
+  // when both overlays are active.
+  defaultInputs: {
+    length: 20,
+    multiplier: 2,
+    source: "close",
+    basisColor: "#ec4899",
+    bandColor: "#3b82f6",
+    width: 1.5,
+    fillOpacity: 0.05
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const multiplier = Math.max(0.1, Number(inputs.multiplier) || 2);
+    const source = inputs.source ?? "close";
+    const basis = withCachedSeries(
+      `bb|basis|${length}|${source}`,
+      renderContext.data,
+      () => computeBollingerSeries(renderContext.data, length, multiplier, source, "basis")
+    );
+    const upper = withCachedSeries(
+      `bb|upper|${length}|${multiplier}|${source}`,
+      renderContext.data,
+      () => computeBollingerSeries(renderContext.data, length, multiplier, source, "upper")
+    );
+    const lower = withCachedSeries(
+      `bb|lower|${length}|${multiplier}|${source}`,
+      renderContext.data,
+      () => computeBollingerSeries(renderContext.data, length, multiplier, source, "lower")
+    );
+    const bandColor = inputs.bandColor ?? "#3b82f6";
+    const width = Number(inputs.width) || 1.5;
+    fillBetweenSeries(ctx, renderContext, upper, lower, bandColor, Number(inputs.fillOpacity) || 0.05);
+    drawOverlaySeries(ctx, renderContext, upper, bandColor, width);
+    drawOverlaySeries(ctx, renderContext, lower, bandColor, width);
+    drawOverlaySeries(ctx, renderContext, basis, inputs.basisColor ?? "#f59e0b", width);
+  }
+};
 var BUILTIN_STDDEV_INDICATOR = {
   id: "stddev",
   name: "StdDev",
@@ -902,6 +1075,8 @@ var BUILTIN_INDICATORS = [
   BUILTIN_VWMA_INDICATOR,
   BUILTIN_RMA_INDICATOR,
   BUILTIN_HMA_INDICATOR,
+  BUILTIN_VWAP_INDICATOR,
+  BUILTIN_BOLLINGER_INDICATOR,
   BUILTIN_STDDEV_INDICATOR,
   BUILTIN_ATR_INDICATOR
 ];
@@ -2754,15 +2929,31 @@ function createChart(element, options = {}) {
           const pct = diff / base * 100;
           const ticks = tick > 0 ? Math.round(diff / tick) : 0;
           const signed = (value, text) => `${value < 0 ? "\u2212" : value > 0 ? "+" : ""}${text}`;
-          const labelText = tick > 0 ? `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)}) ${signed(ticks, String(Math.abs(ticks)))}` : `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)})`;
+          const labelLines = [
+            tick > 0 ? `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)}) ${signed(ticks, String(Math.abs(ticks)))}` : `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)})`
+          ];
+          const barSpan = Math.abs(Math.round(p1.index) - Math.round(p0.index));
+          if (barSpan > 0) {
+            const t0 = getTimeForIndex(Math.round(p0.index));
+            const t1 = getTimeForIndex(Math.round(p1.index));
+            const spanMs = t0 && t1 ? Math.abs(t1.getTime() - t0.getTime()) : 0;
+            labelLines.push(spanMs > 0 ? `${barSpan} bars, ${formatDuration(spanMs)}` : `${barSpan} bars`);
+          }
+          const pointValue = Number(drawing.pointValue);
+          if (Number.isFinite(pointValue) && pointValue > 0) {
+            const dollars = diff * pointValue;
+            const money = Math.abs(dollars).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+            labelLines.push(`${signed(dollars, `$${money}`)} / contract`);
+          }
           const prevFont = ctx.font;
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
           const padding = 6;
-          const textW = ctx.measureText(labelText).width;
+          const lineHeight = 15;
+          const textW = Math.max(...labelLines.map((line) => ctx.measureText(line).width));
           const pillW = textW + padding * 2;
-          const pillH = 18;
+          const pillH = labelLines.length * lineHeight + padding;
           const pillX = midX - pillW / 2;
-          const pillY = botY + 6;
+          const pillY = botY + 6 + pillH <= fullChartBottom - 2 ? botY + 6 : Math.max(chartTop + 2, topY - 6 - pillH);
           ctx.fillStyle = mergedOptions.backgroundColor;
           fillRoundedRect(pillX, pillY, pillW, pillH, 4);
           ctx.save();
@@ -2773,7 +2964,9 @@ function createChart(element, options = {}) {
           ctx.fillStyle = drawing.color;
           ctx.textAlign = "center";
           ctx.textBaseline = "middle";
-          ctx.fillText(labelText, midX, pillY + pillH / 2);
+          labelLines.forEach((line, lineIndex) => {
+            ctx.fillText(line, midX, pillY + padding / 2 + lineIndex * lineHeight + lineHeight / 2);
+          });
           ctx.font = prevFont;
           if (drawing.label) {
             drawDrawingLabel(drawing.label, midX, topY - 4, drawing.color);
@@ -2917,6 +3110,32 @@ function createChart(element, options = {}) {
       }
       ctx.restore();
     }
+    if (grid.sessionSeparators && data.length > 1) {
+      const first = Math.max(1, startIndex);
+      const barDeltaMs = data.length > 1 ? Math.abs(data[Math.min(first, data.length - 1)].time.getTime() - data[Math.min(first, data.length - 1) - 1].time.getTime()) : 0;
+      if (barDeltaMs > 0 && barDeltaMs < 0.9 * 864e5) {
+        const SESSION_ANCHOR_MS = 22 * 36e5;
+        const sessionDayOf = (ms) => Math.floor((ms - SESSION_ANCHOR_MS) / 864e5);
+        ctx.save();
+        ctx.globalAlpha = clamp(grid.sessionSeparatorOpacity, 0, 1);
+        ctx.strokeStyle = grid.sessionSeparatorColor;
+        ctx.lineWidth = 1;
+        for (let index = first; index <= endIndex; index += 1) {
+          const point = data[index];
+          const prev = data[index - 1];
+          if (!point || !prev) continue;
+          if (sessionDayOf(point.time.getTime()) === sessionDayOf(prev.time.getTime())) {
+            continue;
+          }
+          const x = chartLeft + (index - xStart) / xSpan * chartWidth;
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(chartTop));
+          ctx.lineTo(crisp(x), crisp(fullChartBottom));
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+    }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
     const lastDataIndex = data.length - 1;
@@ -3523,8 +3742,9 @@ function createChart(element, options = {}) {
         }
         return typeof value === "string" && !/^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value.trim());
       };
+      const LEGEND_EXCLUDED_INPUT_KEYS = /* @__PURE__ */ new Set(["width", "bandMultiplier", "bandFillOpacity", "fillOpacity"]);
       const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
-        const inputValues = Object.entries(indicator.inputs).filter(([, value]) => isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
+        const inputValues = Object.entries(indicator.inputs).filter(([key, value]) => !LEGEND_EXCLUDED_INPUT_KEYS.has(key) && typeof value !== "boolean" && isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
         if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
           return `${plugin.name} ${inputValues.join(" ")}`;
         }
@@ -4502,7 +4722,9 @@ function createChart(element, options = {}) {
           points: [point, normalizeDrawingPoint(point.index + width2, point.price - priceOffset)],
           color: defaults.color ?? "#2962ff",
           style: defaults.style ?? "solid",
-          width: defaults.width ?? 1
+          width: defaults.width ?? 1,
+          // pointValue enables the dollar-P&L line in the measure label.
+          ...defaults.pointValue === void 0 ? {} : { pointValue: defaults.pointValue }
         })
       );
       emitDrawingsChange();

package/dist/index.d.cts

@@ -215,6 +215,14 @@ interface GridOptions {
     xTickCount?: number;
     yTickCount?: number;
     horizontalTickCount?: number;
+    /**
+     * Vertical separator at every trading-day boundary (a bar whose UTC
+     * calendar day differs from the previous bar's). Drawn stronger than the
+     * regular grid so intraday charts stay oriented while scrolling history.
+     */
+    sessionSeparators?: boolean;
+    sessionSeparatorColor?: string;
+    sessionSeparatorOpacity?: number;
 }
 interface CrosshairOptions {
     visible?: boolean;

package/dist/index.d.ts

@@ -215,6 +215,14 @@ interface GridOptions {
     xTickCount?: number;
     yTickCount?: number;
     horizontalTickCount?: number;
+    /**
+     * Vertical separator at every trading-day boundary (a bar whose UTC
+     * calendar day differs from the previous bar's). Drawn stronger than the
+     * regular grid so intraday charts stay oriented while scrolling history.
+     */
+    sessionSeparators?: boolean;
+    sessionSeparatorColor?: string;
+    sessionSeparatorOpacity?: number;
 }
 interface CrosshairOptions {
     visible?: boolean;

package/dist/index.js

@@ -17,7 +17,10 @@ var DEFAULT_GRID_OPTIONS = {
   verticalLines: true,
   xTickCount: 8,
   yTickCount: 6,
-  horizontalTickCount: 6
+  horizontalTickCount: 6,
+  sessionSeparators: false,
+  sessionSeparatorColor: "#3b4150",
+  sessionSeparatorOpacity: 0.55
 };
 var DEFAULT_AXIS_OPTIONS = {
   lineColor: "#3b3f47",
@@ -406,6 +409,60 @@ var computeStdDevSeries = (data, length, source) => {
   }
   return result;
 };
+var VWAP_SESSION_ANCHOR_MS = 22 * 36e5;
+var vwapSessionDayOf = (ms) => Math.floor((ms - VWAP_SESSION_ANCHOR_MS) / 864e5);
+var computeVwapSeries = (data, band) => {
+  const result = new Array(data.length).fill(null);
+  let session = Number.NaN;
+  let cumPv = 0;
+  let cumPv2 = 0;
+  let cumV = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    const point = data[i];
+    if (!point) continue;
+    const day = vwapSessionDayOf(point.time.getTime());
+    if (day !== session) {
+      session = day;
+      cumPv = 0;
+      cumPv2 = 0;
+      cumV = 0;
+    }
+    const typical = (point.h + point.l + point.c) / 3;
+    const volume = Math.max(0, point.v ?? 0);
+    cumPv += typical * volume;
+    cumPv2 += typical * typical * volume;
+    cumV += volume;
+    if (cumV <= 0) continue;
+    const vwap = cumPv / cumV;
+    if (band === "vwap") {
+      result[i] = vwap;
+    } else {
+      const variance = Math.max(0, cumPv2 / cumV - vwap * vwap);
+      result[i] = Math.sqrt(variance);
+    }
+  }
+  for (let i = 1; i < data.length; i += 1) {
+    const point = data[i];
+    const prev = data[i - 1];
+    const next = data[i + 1];
+    if (!point || !prev || !next) continue;
+    const day = vwapSessionDayOf(point.time.getTime());
+    if (day !== vwapSessionDayOf(prev.time.getTime()) && day === vwapSessionDayOf(next.time.getTime())) {
+      result[i] = null;
+    }
+  }
+  return result;
+};
+var computeBollingerSeries = (data, length, multiplier, source, band) => {
+  const basis = computeSmaSeries(data, length, source);
+  if (band === "basis") return basis;
+  const dev = computeStdDevSeries(data, length, source);
+  return basis.map((value, idx) => {
+    const sigma = dev[idx];
+    if (value == null || sigma == null) return null;
+    return band === "upper" ? value + multiplier * sigma : value - multiplier * sigma;
+  });
+};
 var computeRsiSeries = (data, length) => {
   const result = new Array(data.length).fill(null);
   if (data.length < 2) return result;
@@ -532,6 +589,39 @@ var drawOverlaySeries = (ctx, renderContext, values, color, width) => {
   }
   ctx.restore();
 };
+var fillBetweenSeries = (ctx, renderContext, upper, lower, color, opacity) => {
+  if (!renderContext.yFromPrice || opacity <= 0) return;
+  const yFromPrice = renderContext.yFromPrice;
+  ctx.save();
+  ctx.globalAlpha = Math.min(1, Math.max(0, opacity));
+  ctx.fillStyle = color;
+  let runStart = -1;
+  const flushRun = (endIndexExclusive) => {
+    if (runStart < 0) return;
+    ctx.beginPath();
+    for (let i = runStart; i < endIndexExclusive; i += 1) {
+      const x = renderContext.xFromIndex(i);
+      const y = yFromPrice(upper[i]);
+      if (i === runStart) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+    for (let i = endIndexExclusive - 1; i >= runStart; i -= 1) {
+      ctx.lineTo(renderContext.xFromIndex(i), yFromPrice(lower[i]));
+    }
+    ctx.closePath();
+    ctx.fill();
+    runStart = -1;
+  };
+  for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+    const up = upper[index];
+    const lo = lower[index];
+    const valid = Number.isFinite(up ?? Number.NaN) && Number.isFinite(lo ?? Number.NaN);
+    if (valid && runStart < 0) runStart = index;
+    if (!valid) flushRun(index);
+  }
+  flushRun(renderContext.endIndex + 1);
+  ctx.restore();
+};
 var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride, maxOverride, guideLines, options = {}) => {
   const visible = [];
   for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
@@ -793,6 +883,89 @@ var BUILTIN_HMA_INDICATOR = {
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#14b8a6", Number(inputs.width) || 2);
   }
 };
+var BUILTIN_VWAP_INDICATOR = {
+  id: "vwap",
+  name: "VWAP",
+  pane: "overlay",
+  defaultInputs: {
+    color: "#f59e0b",
+    width: 2,
+    showBands: false,
+    bandMultiplier: 1,
+    bandColor: "#94a3b8",
+    bandFillOpacity: 0.06
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const vwap = withCachedSeries(
+      "vwap|line",
+      renderContext.data,
+      () => computeVwapSeries(renderContext.data, "vwap")
+    );
+    if (inputs.showBands) {
+      const sigma = withCachedSeries(
+        "vwap|sigma",
+        renderContext.data,
+        () => computeVwapSeries(renderContext.data, "sigma")
+      );
+      const multiplier = Math.max(0.1, Number(inputs.bandMultiplier) || 1);
+      const upper = vwap.map((value, idx) => {
+        const s = sigma[idx];
+        return value == null || s == null ? null : value + multiplier * s;
+      });
+      const lower = vwap.map((value, idx) => {
+        const s = sigma[idx];
+        return value == null || s == null ? null : value - multiplier * s;
+      });
+      const bandColor = inputs.bandColor ?? "#94a3b8";
+      fillBetweenSeries(ctx, renderContext, upper, lower, bandColor, Number(inputs.bandFillOpacity) || 0.06);
+      drawOverlaySeries(ctx, renderContext, upper, bandColor, 1);
+      drawOverlaySeries(ctx, renderContext, lower, bandColor, 1);
+    }
+    drawOverlaySeries(ctx, renderContext, vwap, inputs.color ?? "#f59e0b", Number(inputs.width) || 2);
+  }
+};
+var BUILTIN_BOLLINGER_INDICATOR = {
+  id: "bollinger",
+  name: "BB",
+  pane: "overlay",
+  // Basis is pink so it stays distinguishable from the (orange) VWAP line
+  // when both overlays are active.
+  defaultInputs: {
+    length: 20,
+    multiplier: 2,
+    source: "close",
+    basisColor: "#ec4899",
+    bandColor: "#3b82f6",
+    width: 1.5,
+    fillOpacity: 0.05
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const multiplier = Math.max(0.1, Number(inputs.multiplier) || 2);
+    const source = inputs.source ?? "close";
+    const basis = withCachedSeries(
+      `bb|basis|${length}|${source}`,
+      renderContext.data,
+      () => computeBollingerSeries(renderContext.data, length, multiplier, source, "basis")
+    );
+    const upper = withCachedSeries(
+      `bb|upper|${length}|${multiplier}|${source}`,
+      renderContext.data,
+      () => computeBollingerSeries(renderContext.data, length, multiplier, source, "upper")
+    );
+    const lower = withCachedSeries(
+      `bb|lower|${length}|${multiplier}|${source}`,
+      renderContext.data,
+      () => computeBollingerSeries(renderContext.data, length, multiplier, source, "lower")
+    );
+    const bandColor = inputs.bandColor ?? "#3b82f6";
+    const width = Number(inputs.width) || 1.5;
+    fillBetweenSeries(ctx, renderContext, upper, lower, bandColor, Number(inputs.fillOpacity) || 0.05);
+    drawOverlaySeries(ctx, renderContext, upper, bandColor, width);
+    drawOverlaySeries(ctx, renderContext, lower, bandColor, width);
+    drawOverlaySeries(ctx, renderContext, basis, inputs.basisColor ?? "#f59e0b", width);
+  }
+};
 var BUILTIN_STDDEV_INDICATOR = {
   id: "stddev",
   name: "StdDev",
@@ -876,6 +1049,8 @@ var BUILTIN_INDICATORS = [
   BUILTIN_VWMA_INDICATOR,
   BUILTIN_RMA_INDICATOR,
   BUILTIN_HMA_INDICATOR,
+  BUILTIN_VWAP_INDICATOR,
+  BUILTIN_BOLLINGER_INDICATOR,
   BUILTIN_STDDEV_INDICATOR,
   BUILTIN_ATR_INDICATOR
 ];
@@ -2728,15 +2903,31 @@ function createChart(element, options = {}) {
           const pct = diff / base * 100;
           const ticks = tick > 0 ? Math.round(diff / tick) : 0;
           const signed = (value, text) => `${value < 0 ? "\u2212" : value > 0 ? "+" : ""}${text}`;
-          const labelText = tick > 0 ? `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)}) ${signed(ticks, String(Math.abs(ticks)))}` : `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)})`;
+          const labelLines = [
+            tick > 0 ? `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)}) ${signed(ticks, String(Math.abs(ticks)))}` : `${signed(diff, formatPrice(Math.abs(diff)))} (${signed(pct, `${Math.abs(pct).toFixed(2)}%`)})`
+          ];
+          const barSpan = Math.abs(Math.round(p1.index) - Math.round(p0.index));
+          if (barSpan > 0) {
+            const t0 = getTimeForIndex(Math.round(p0.index));
+            const t1 = getTimeForIndex(Math.round(p1.index));
+            const spanMs = t0 && t1 ? Math.abs(t1.getTime() - t0.getTime()) : 0;
+            labelLines.push(spanMs > 0 ? `${barSpan} bars, ${formatDuration(spanMs)}` : `${barSpan} bars`);
+          }
+          const pointValue = Number(drawing.pointValue);
+          if (Number.isFinite(pointValue) && pointValue > 0) {
+            const dollars = diff * pointValue;
+            const money = Math.abs(dollars).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+            labelLines.push(`${signed(dollars, `$${money}`)} / contract`);
+          }
           const prevFont = ctx.font;
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
           const padding = 6;
-          const textW = ctx.measureText(labelText).width;
+          const lineHeight = 15;
+          const textW = Math.max(...labelLines.map((line) => ctx.measureText(line).width));
           const pillW = textW + padding * 2;
-          const pillH = 18;
+          const pillH = labelLines.length * lineHeight + padding;
           const pillX = midX - pillW / 2;
-          const pillY = botY + 6;
+          const pillY = botY + 6 + pillH <= fullChartBottom - 2 ? botY + 6 : Math.max(chartTop + 2, topY - 6 - pillH);
           ctx.fillStyle = mergedOptions.backgroundColor;
           fillRoundedRect(pillX, pillY, pillW, pillH, 4);
           ctx.save();
@@ -2747,7 +2938,9 @@ function createChart(element, options = {}) {
           ctx.fillStyle = drawing.color;
           ctx.textAlign = "center";
           ctx.textBaseline = "middle";
-          ctx.fillText(labelText, midX, pillY + pillH / 2);
+          labelLines.forEach((line, lineIndex) => {
+            ctx.fillText(line, midX, pillY + padding / 2 + lineIndex * lineHeight + lineHeight / 2);
+          });
           ctx.font = prevFont;
           if (drawing.label) {
             drawDrawingLabel(drawing.label, midX, topY - 4, drawing.color);
@@ -2891,6 +3084,32 @@ function createChart(element, options = {}) {
       }
       ctx.restore();
     }
+    if (grid.sessionSeparators && data.length > 1) {
+      const first = Math.max(1, startIndex);
+      const barDeltaMs = data.length > 1 ? Math.abs(data[Math.min(first, data.length - 1)].time.getTime() - data[Math.min(first, data.length - 1) - 1].time.getTime()) : 0;
+      if (barDeltaMs > 0 && barDeltaMs < 0.9 * 864e5) {
+        const SESSION_ANCHOR_MS = 22 * 36e5;
+        const sessionDayOf = (ms) => Math.floor((ms - SESSION_ANCHOR_MS) / 864e5);
+        ctx.save();
+        ctx.globalAlpha = clamp(grid.sessionSeparatorOpacity, 0, 1);
+        ctx.strokeStyle = grid.sessionSeparatorColor;
+        ctx.lineWidth = 1;
+        for (let index = first; index <= endIndex; index += 1) {
+          const point = data[index];
+          const prev = data[index - 1];
+          if (!point || !prev) continue;
+          if (sessionDayOf(point.time.getTime()) === sessionDayOf(prev.time.getTime())) {
+            continue;
+          }
+          const x = chartLeft + (index - xStart) / xSpan * chartWidth;
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(chartTop));
+          ctx.lineTo(crisp(x), crisp(fullChartBottom));
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+    }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
     const lastDataIndex = data.length - 1;
@@ -3497,8 +3716,9 @@ function createChart(element, options = {}) {
         }
         return typeof value === "string" && !/^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value.trim());
       };
+      const LEGEND_EXCLUDED_INPUT_KEYS = /* @__PURE__ */ new Set(["width", "bandMultiplier", "bandFillOpacity", "fillOpacity"]);
       const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
-        const inputValues = Object.entries(indicator.inputs).filter(([, value]) => isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
+        const inputValues = Object.entries(indicator.inputs).filter(([key, value]) => !LEGEND_EXCLUDED_INPUT_KEYS.has(key) && typeof value !== "boolean" && isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
         if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
           return `${plugin.name} ${inputValues.join(" ")}`;
         }
@@ -4476,7 +4696,9 @@ function createChart(element, options = {}) {
           points: [point, normalizeDrawingPoint(point.index + width2, point.price - priceOffset)],
           color: defaults.color ?? "#2962ff",
           style: defaults.style ?? "solid",
-          width: defaults.width ?? 1
+          width: defaults.width ?? 1,
+          // pointValue enables the dollar-P&L line in the measure label.
+          ...defaults.pointValue === void 0 ? {} : { pointValue: defaults.pointValue }
         })
       );
       emitDrawingsChange();

package/package.json

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