hyperprop-charting-library 0.1.150 → 0.1.152

package/dist/hyperprop-charting-library.cjs

@@ -3587,8 +3587,10 @@ var DEFAULT_LABELS_OPTIONS = {
   showIndicatorValues: false,
   showIndicatorValueLabels: true,
   indicatorLegendPosition: "top-left",
-  indicatorLegendOffsetX: 10,
-  indicatorLegendOffsetY: 10,
+  // One inset for the whole top-left block (data line + legend), so the gap
+  // from the left edge matches the gap from the top.
+  indicatorLegendOffsetX: 12,
+  indicatorLegendOffsetY: 12,
   showCountdownToBarClose: false,
   noOverlapping: true,
   backgroundColor: "#0b1220",
@@ -7156,7 +7158,7 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     }
-    const sessionSeparatorsOn = grid.sessionSeparators || compiledSession !== null && sessionOptions.separators !== false;
+    const sessionSeparatorsOn = grid.sessionSeparators && sessionOptions.separators !== false;
     const intradaySeries = (() => {
       if (data.length < 2) return false;
       const probe = Math.min(Math.max(1, startIndex), data.length - 1);
@@ -8264,6 +8266,8 @@ function createChart(element, options = {}) {
     for (const orderLine of orderLines) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    const legendInsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
+    const legendInsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
     let dataLineBottom = chartTop;
     const dataLine = mergedOptions.dataLine;
     if (dataLine?.visible && data.length > 0) {
@@ -8280,8 +8284,8 @@ function createChart(element, options = {}) {
         const textColor = dataLine.textColor || labels.indicatorTextColor;
         const changeAbs = bar.c - bar.o;
         const changeColor = changeAbs >= 0 ? mergedOptions.upColor : mergedOptions.downColor;
-        const rowY = chartTop + 6;
-        let cursorX = chartLeft + 10;
+        const rowY = chartTop + legendInsetY;
+        let cursorX = chartLeft + legendInsetX;
         if (dataLine.statusColor) {
           const dotRadius = Math.max(2.5, fontSize / 4);
           ctx.fillStyle = dataLine.statusColor;
@@ -8327,7 +8331,7 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 4;
+        dataLineBottom = rowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }
@@ -8357,8 +8361,8 @@ function createChart(element, options = {}) {
         const prevFont = ctx.font;
         const legendFontSize = Math.max(8, axis.fontSize);
         ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
-        const offsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
-        const offsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
+        const offsetX = legendInsetX;
+        const offsetY = legendInsetY;
         const position = labels.indicatorLegendPosition;
         const isRight = position === "top-right" || position === "bottom-right";
         const isBottom = position === "bottom-left" || position === "bottom-right";

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

@@ -844,6 +844,11 @@ interface LabelsOptions {
     showIndicatorValues?: boolean;
     showIndicatorValueLabels?: boolean;
     indicatorLegendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Inset of the whole top-left block — the data line and the indicator
+     * legend stacked under it — from the plot edges. Both axes use the same
+     * pair so the block never sits closer to the top than to the side.
+     */
     indicatorLegendOffsetX?: number;
     indicatorLegendOffsetY?: number;
     showCountdownToBarClose?: boolean;
@@ -1192,7 +1197,12 @@ type SessionPresetName = "cme-futures" | "cme-rth" | "us-equities" | "us-equitie
 interface SessionOptions {
     /** A preset name or your own spec. null disables session handling. */
     spec?: SessionSpec | SessionPresetName | null;
-    /** Vertical rule at each session start. Default true when a spec is set. */
+    /**
+     * Opt out of session-aware separators while keeping the spec for everything
+     * else. Setting a spec never turns separators *on* by itself — that switch
+     * is `grid.sessionSeparators`; the spec only moves the boundary from
+     * calendar midnight to the real session open.
+     */
     separators?: boolean;
     /**
      * Tint bars that fall outside the session (overnight/extended hours), the

package/dist/hyperprop-charting-library.js

@@ -3551,8 +3551,10 @@ var DEFAULT_LABELS_OPTIONS = {
   showIndicatorValues: false,
   showIndicatorValueLabels: true,
   indicatorLegendPosition: "top-left",
-  indicatorLegendOffsetX: 10,
-  indicatorLegendOffsetY: 10,
+  // One inset for the whole top-left block (data line + legend), so the gap
+  // from the left edge matches the gap from the top.
+  indicatorLegendOffsetX: 12,
+  indicatorLegendOffsetY: 12,
   showCountdownToBarClose: false,
   noOverlapping: true,
   backgroundColor: "#0b1220",
@@ -7120,7 +7122,7 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     }
-    const sessionSeparatorsOn = grid.sessionSeparators || compiledSession !== null && sessionOptions.separators !== false;
+    const sessionSeparatorsOn = grid.sessionSeparators && sessionOptions.separators !== false;
     const intradaySeries = (() => {
       if (data.length < 2) return false;
       const probe = Math.min(Math.max(1, startIndex), data.length - 1);
@@ -8228,6 +8230,8 @@ function createChart(element, options = {}) {
     for (const orderLine of orderLines) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    const legendInsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
+    const legendInsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
     let dataLineBottom = chartTop;
     const dataLine = mergedOptions.dataLine;
     if (dataLine?.visible && data.length > 0) {
@@ -8244,8 +8248,8 @@ function createChart(element, options = {}) {
         const textColor = dataLine.textColor || labels.indicatorTextColor;
         const changeAbs = bar.c - bar.o;
         const changeColor = changeAbs >= 0 ? mergedOptions.upColor : mergedOptions.downColor;
-        const rowY = chartTop + 6;
-        let cursorX = chartLeft + 10;
+        const rowY = chartTop + legendInsetY;
+        let cursorX = chartLeft + legendInsetX;
         if (dataLine.statusColor) {
           const dotRadius = Math.max(2.5, fontSize / 4);
           ctx.fillStyle = dataLine.statusColor;
@@ -8291,7 +8295,7 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 4;
+        dataLineBottom = rowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }
@@ -8321,8 +8325,8 @@ function createChart(element, options = {}) {
         const prevFont = ctx.font;
         const legendFontSize = Math.max(8, axis.fontSize);
         ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
-        const offsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
-        const offsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
+        const offsetX = legendInsetX;
+        const offsetY = legendInsetY;
         const position = labels.indicatorLegendPosition;
         const isRight = position === "top-right" || position === "bottom-right";
         const isBottom = position === "bottom-left" || position === "bottom-right";

package/dist/index.cjs

@@ -3587,8 +3587,10 @@ var DEFAULT_LABELS_OPTIONS = {
   showIndicatorValues: false,
   showIndicatorValueLabels: true,
   indicatorLegendPosition: "top-left",
-  indicatorLegendOffsetX: 10,
-  indicatorLegendOffsetY: 10,
+  // One inset for the whole top-left block (data line + legend), so the gap
+  // from the left edge matches the gap from the top.
+  indicatorLegendOffsetX: 12,
+  indicatorLegendOffsetY: 12,
   showCountdownToBarClose: false,
   noOverlapping: true,
   backgroundColor: "#0b1220",
@@ -7156,7 +7158,7 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     }
-    const sessionSeparatorsOn = grid.sessionSeparators || compiledSession !== null && sessionOptions.separators !== false;
+    const sessionSeparatorsOn = grid.sessionSeparators && sessionOptions.separators !== false;
     const intradaySeries = (() => {
       if (data.length < 2) return false;
       const probe = Math.min(Math.max(1, startIndex), data.length - 1);
@@ -8264,6 +8266,8 @@ function createChart(element, options = {}) {
     for (const orderLine of orderLines) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    const legendInsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
+    const legendInsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
     let dataLineBottom = chartTop;
     const dataLine = mergedOptions.dataLine;
     if (dataLine?.visible && data.length > 0) {
@@ -8280,8 +8284,8 @@ function createChart(element, options = {}) {
         const textColor = dataLine.textColor || labels.indicatorTextColor;
         const changeAbs = bar.c - bar.o;
         const changeColor = changeAbs >= 0 ? mergedOptions.upColor : mergedOptions.downColor;
-        const rowY = chartTop + 6;
-        let cursorX = chartLeft + 10;
+        const rowY = chartTop + legendInsetY;
+        let cursorX = chartLeft + legendInsetX;
         if (dataLine.statusColor) {
           const dotRadius = Math.max(2.5, fontSize / 4);
           ctx.fillStyle = dataLine.statusColor;
@@ -8327,7 +8331,7 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 4;
+        dataLineBottom = rowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }
@@ -8357,8 +8361,8 @@ function createChart(element, options = {}) {
         const prevFont = ctx.font;
         const legendFontSize = Math.max(8, axis.fontSize);
         ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
-        const offsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
-        const offsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
+        const offsetX = legendInsetX;
+        const offsetY = legendInsetY;
         const position = labels.indicatorLegendPosition;
         const isRight = position === "top-right" || position === "bottom-right";
         const isBottom = position === "bottom-left" || position === "bottom-right";

package/dist/index.d.cts

@@ -844,6 +844,11 @@ interface LabelsOptions {
     showIndicatorValues?: boolean;
     showIndicatorValueLabels?: boolean;
     indicatorLegendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Inset of the whole top-left block — the data line and the indicator
+     * legend stacked under it — from the plot edges. Both axes use the same
+     * pair so the block never sits closer to the top than to the side.
+     */
     indicatorLegendOffsetX?: number;
     indicatorLegendOffsetY?: number;
     showCountdownToBarClose?: boolean;
@@ -1192,7 +1197,12 @@ type SessionPresetName = "cme-futures" | "cme-rth" | "us-equities" | "us-equitie
 interface SessionOptions {
     /** A preset name or your own spec. null disables session handling. */
     spec?: SessionSpec | SessionPresetName | null;
-    /** Vertical rule at each session start. Default true when a spec is set. */
+    /**
+     * Opt out of session-aware separators while keeping the spec for everything
+     * else. Setting a spec never turns separators *on* by itself — that switch
+     * is `grid.sessionSeparators`; the spec only moves the boundary from
+     * calendar midnight to the real session open.
+     */
     separators?: boolean;
     /**
      * Tint bars that fall outside the session (overnight/extended hours), the

package/dist/index.d.ts

@@ -844,6 +844,11 @@ interface LabelsOptions {
     showIndicatorValues?: boolean;
     showIndicatorValueLabels?: boolean;
     indicatorLegendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Inset of the whole top-left block — the data line and the indicator
+     * legend stacked under it — from the plot edges. Both axes use the same
+     * pair so the block never sits closer to the top than to the side.
+     */
     indicatorLegendOffsetX?: number;
     indicatorLegendOffsetY?: number;
     showCountdownToBarClose?: boolean;
@@ -1192,7 +1197,12 @@ type SessionPresetName = "cme-futures" | "cme-rth" | "us-equities" | "us-equitie
 interface SessionOptions {
     /** A preset name or your own spec. null disables session handling. */
     spec?: SessionSpec | SessionPresetName | null;
-    /** Vertical rule at each session start. Default true when a spec is set. */
+    /**
+     * Opt out of session-aware separators while keeping the spec for everything
+     * else. Setting a spec never turns separators *on* by itself — that switch
+     * is `grid.sessionSeparators`; the spec only moves the boundary from
+     * calendar midnight to the real session open.
+     */
     separators?: boolean;
     /**
      * Tint bars that fall outside the session (overnight/extended hours), the

package/dist/index.js

@@ -3551,8 +3551,10 @@ var DEFAULT_LABELS_OPTIONS = {
   showIndicatorValues: false,
   showIndicatorValueLabels: true,
   indicatorLegendPosition: "top-left",
-  indicatorLegendOffsetX: 10,
-  indicatorLegendOffsetY: 10,
+  // One inset for the whole top-left block (data line + legend), so the gap
+  // from the left edge matches the gap from the top.
+  indicatorLegendOffsetX: 12,
+  indicatorLegendOffsetY: 12,
   showCountdownToBarClose: false,
   noOverlapping: true,
   backgroundColor: "#0b1220",
@@ -7120,7 +7122,7 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     }
-    const sessionSeparatorsOn = grid.sessionSeparators || compiledSession !== null && sessionOptions.separators !== false;
+    const sessionSeparatorsOn = grid.sessionSeparators && sessionOptions.separators !== false;
     const intradaySeries = (() => {
       if (data.length < 2) return false;
       const probe = Math.min(Math.max(1, startIndex), data.length - 1);
@@ -8228,6 +8230,8 @@ function createChart(element, options = {}) {
     for (const orderLine of orderLines) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    const legendInsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
+    const legendInsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
     let dataLineBottom = chartTop;
     const dataLine = mergedOptions.dataLine;
     if (dataLine?.visible && data.length > 0) {
@@ -8244,8 +8248,8 @@ function createChart(element, options = {}) {
         const textColor = dataLine.textColor || labels.indicatorTextColor;
         const changeAbs = bar.c - bar.o;
         const changeColor = changeAbs >= 0 ? mergedOptions.upColor : mergedOptions.downColor;
-        const rowY = chartTop + 6;
-        let cursorX = chartLeft + 10;
+        const rowY = chartTop + legendInsetY;
+        let cursorX = chartLeft + legendInsetX;
         if (dataLine.statusColor) {
           const dotRadius = Math.max(2.5, fontSize / 4);
           ctx.fillStyle = dataLine.statusColor;
@@ -8291,7 +8295,7 @@ function createChart(element, options = {}) {
           ctx.fillText(text, cursorX, rowY);
           cursorX += width2 + 12;
         }
-        dataLineBottom = rowY + fontSize + 4;
+        dataLineBottom = rowY + fontSize + 6;
         ctx.font = prevFont;
       }
     }
@@ -8321,8 +8325,8 @@ function createChart(element, options = {}) {
         const prevFont = ctx.font;
         const legendFontSize = Math.max(8, axis.fontSize);
         ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
-        const offsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
-        const offsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
+        const offsetX = legendInsetX;
+        const offsetY = legendInsetY;
         const position = labels.indicatorLegendPosition;
         const isRight = position === "top-right" || position === "bottom-right";
         const isBottom = position === "bottom-left" || position === "bottom-right";

package/docs/API.md

@@ -881,6 +881,30 @@ they are not part of `saveState()`.
 
 ---
 
+## Multi-chart layouts
+
+Several charts are just several `createChart` calls; what the library adds is
+the piece hosts can't do themselves — mirroring one chart's crosshair onto the
+others:
+
+```ts
+primary.onCrosshairMove((event) => {
+  const ms = event.time ? Date.parse(event.time) : NaN;
+  const at = event.region === "plot" && Number.isFinite(ms) ? { timeMs: ms } : null;
+  for (const other of siblings) other.setExternalCrosshair(at);
+});
+```
+
+Mirrored crosshairs match by **timestamp**, not pixels, so charts on different
+intervals — or different instruments — still line up, and the ghost line is
+drawn dimmer than the chart's own. It is suppressed while that chart is the one
+being hovered, so the two never fight.
+
+Time-range sync needs nothing new: feed `onViewportChange` into the siblings'
+`setViewport({ centerTimeMs, xSpan })`.
+
+---
+
 ## Overlay indicator legend
 
 With `labels.showIndicatorNames` / `showIndicatorValues`, overlay indicators

package/package.json

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