hyperprop-charting-library 0.1.148 → 0.1.150

package/dist/hyperprop-charting-library.cjs

@@ -4306,6 +4306,7 @@ function createChart(element, options = {}) {
   let actionDragState = null;
   let pointerDownInfo = null;
   let crosshairPoint = null;
+  let externalCrosshair = null;
   let doubleClickEnabled = mergedOptions.doubleClickEnabled;
   let doubleClickAction = mergedOptions.doubleClickAction;
   setIndicatorLiveThrottleMs(mergedOptions.indicatorUpdate?.liveThrottleMs ?? 80);
@@ -8508,7 +8509,26 @@ function createChart(element, options = {}) {
     crosshairPriceActionRegion = null;
     const layout = overlayLayout;
     const crosshair = resolvedCrosshair;
-    if (!layout || !crosshair.visible || !crosshairPoint) {
+    if (!layout) return;
+    if (!crosshairPoint && externalCrosshair !== null && crosshair.visible) {
+      const index = findNearestIndexForTimeMs(externalCrosshair.timeMs);
+      if (index !== null) {
+        const x = layout.chartLeft + (index + 0.5 - layout.xStart) / layout.xSpan * layout.chartWidth;
+        if (x >= layout.chartLeft && x <= layout.chartRight) {
+          ctx.save();
+          ctx.globalAlpha = 0.55;
+          ctx.strokeStyle = crosshair.color;
+          ctx.lineWidth = Math.max(1, crosshair.width);
+          applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(layout.chartTop));
+          ctx.lineTo(crisp(x), crisp(layout.fullChartBottom));
+          ctx.stroke();
+          ctx.restore();
+        }
+      }
+    }
+    if (!crosshair.visible || !crosshairPoint) {
       return;
     }
     const { chartLeft, chartTop, chartRight, chartBottom, chartWidth, chartHeight, fullChartBottom, yMin, yRange, xStart, xSpan: xSpan2 } = layout;
@@ -11990,6 +12010,12 @@ function createChart(element, options = {}) {
   const onAlertAction = (handler) => {
     alertActionHandler = handler;
   };
+  const setExternalCrosshair = (point) => {
+    const nextMs = point && Number.isFinite(point.timeMs) ? point.timeMs : null;
+    if (nextMs === (externalCrosshair?.timeMs ?? null)) return;
+    externalCrosshair = nextMs === null ? null : { timeMs: nextMs };
+    scheduleDraw({ overlayOnly: true });
+  };
   const setTimezone = (timezone) => {
     timezoneSetting = timezone || "local";
     zoneClock = createZoneClock(timezoneSetting);
@@ -12300,6 +12326,7 @@ function createChart(element, options = {}) {
     saveState,
     loadState,
     takeScreenshot,
+    setExternalCrosshair,
     setTimezone,
     getTimezone,
     setTimeFormat,

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

@@ -1030,6 +1030,14 @@ interface ChartInstance {
      * the crosshair tag and day/session boundaries move. Unknown ids fall back
      * to local time rather than throwing.
      */
+    /**
+     * Mirror a sibling chart's crosshair in a multi-chart layout. Matching is
+     * by timestamp, so charts on different intervals or instruments still line
+     * up. Pass null to clear.
+     */
+    setExternalCrosshair: (point: {
+        timeMs: number;
+    } | null) => void;
     setTimezone: (timezone: ChartTimezone) => void;
     getTimezone: () => ChartTimezone;
     /** Switch rendered clock times between 24-hour and 12-hour. */

package/dist/hyperprop-charting-library.js

@@ -4270,6 +4270,7 @@ function createChart(element, options = {}) {
   let actionDragState = null;
   let pointerDownInfo = null;
   let crosshairPoint = null;
+  let externalCrosshair = null;
   let doubleClickEnabled = mergedOptions.doubleClickEnabled;
   let doubleClickAction = mergedOptions.doubleClickAction;
   setIndicatorLiveThrottleMs(mergedOptions.indicatorUpdate?.liveThrottleMs ?? 80);
@@ -8472,7 +8473,26 @@ function createChart(element, options = {}) {
     crosshairPriceActionRegion = null;
     const layout = overlayLayout;
     const crosshair = resolvedCrosshair;
-    if (!layout || !crosshair.visible || !crosshairPoint) {
+    if (!layout) return;
+    if (!crosshairPoint && externalCrosshair !== null && crosshair.visible) {
+      const index = findNearestIndexForTimeMs(externalCrosshair.timeMs);
+      if (index !== null) {
+        const x = layout.chartLeft + (index + 0.5 - layout.xStart) / layout.xSpan * layout.chartWidth;
+        if (x >= layout.chartLeft && x <= layout.chartRight) {
+          ctx.save();
+          ctx.globalAlpha = 0.55;
+          ctx.strokeStyle = crosshair.color;
+          ctx.lineWidth = Math.max(1, crosshair.width);
+          applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(layout.chartTop));
+          ctx.lineTo(crisp(x), crisp(layout.fullChartBottom));
+          ctx.stroke();
+          ctx.restore();
+        }
+      }
+    }
+    if (!crosshair.visible || !crosshairPoint) {
       return;
     }
     const { chartLeft, chartTop, chartRight, chartBottom, chartWidth, chartHeight, fullChartBottom, yMin, yRange, xStart, xSpan: xSpan2 } = layout;
@@ -11954,6 +11974,12 @@ function createChart(element, options = {}) {
   const onAlertAction = (handler) => {
     alertActionHandler = handler;
   };
+  const setExternalCrosshair = (point) => {
+    const nextMs = point && Number.isFinite(point.timeMs) ? point.timeMs : null;
+    if (nextMs === (externalCrosshair?.timeMs ?? null)) return;
+    externalCrosshair = nextMs === null ? null : { timeMs: nextMs };
+    scheduleDraw({ overlayOnly: true });
+  };
   const setTimezone = (timezone) => {
     timezoneSetting = timezone || "local";
     zoneClock = createZoneClock(timezoneSetting);
@@ -12264,6 +12290,7 @@ function createChart(element, options = {}) {
     saveState,
     loadState,
     takeScreenshot,
+    setExternalCrosshair,
     setTimezone,
     getTimezone,
     setTimeFormat,

package/dist/index.cjs

@@ -4306,6 +4306,7 @@ function createChart(element, options = {}) {
   let actionDragState = null;
   let pointerDownInfo = null;
   let crosshairPoint = null;
+  let externalCrosshair = null;
   let doubleClickEnabled = mergedOptions.doubleClickEnabled;
   let doubleClickAction = mergedOptions.doubleClickAction;
   setIndicatorLiveThrottleMs(mergedOptions.indicatorUpdate?.liveThrottleMs ?? 80);
@@ -8508,7 +8509,26 @@ function createChart(element, options = {}) {
     crosshairPriceActionRegion = null;
     const layout = overlayLayout;
     const crosshair = resolvedCrosshair;
-    if (!layout || !crosshair.visible || !crosshairPoint) {
+    if (!layout) return;
+    if (!crosshairPoint && externalCrosshair !== null && crosshair.visible) {
+      const index = findNearestIndexForTimeMs(externalCrosshair.timeMs);
+      if (index !== null) {
+        const x = layout.chartLeft + (index + 0.5 - layout.xStart) / layout.xSpan * layout.chartWidth;
+        if (x >= layout.chartLeft && x <= layout.chartRight) {
+          ctx.save();
+          ctx.globalAlpha = 0.55;
+          ctx.strokeStyle = crosshair.color;
+          ctx.lineWidth = Math.max(1, crosshair.width);
+          applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(layout.chartTop));
+          ctx.lineTo(crisp(x), crisp(layout.fullChartBottom));
+          ctx.stroke();
+          ctx.restore();
+        }
+      }
+    }
+    if (!crosshair.visible || !crosshairPoint) {
       return;
     }
     const { chartLeft, chartTop, chartRight, chartBottom, chartWidth, chartHeight, fullChartBottom, yMin, yRange, xStart, xSpan: xSpan2 } = layout;
@@ -11990,6 +12010,12 @@ function createChart(element, options = {}) {
   const onAlertAction = (handler) => {
     alertActionHandler = handler;
   };
+  const setExternalCrosshair = (point) => {
+    const nextMs = point && Number.isFinite(point.timeMs) ? point.timeMs : null;
+    if (nextMs === (externalCrosshair?.timeMs ?? null)) return;
+    externalCrosshair = nextMs === null ? null : { timeMs: nextMs };
+    scheduleDraw({ overlayOnly: true });
+  };
   const setTimezone = (timezone) => {
     timezoneSetting = timezone || "local";
     zoneClock = createZoneClock(timezoneSetting);
@@ -12300,6 +12326,7 @@ function createChart(element, options = {}) {
     saveState,
     loadState,
     takeScreenshot,
+    setExternalCrosshair,
     setTimezone,
     getTimezone,
     setTimeFormat,

package/dist/index.d.cts

@@ -1030,6 +1030,14 @@ interface ChartInstance {
      * the crosshair tag and day/session boundaries move. Unknown ids fall back
      * to local time rather than throwing.
      */
+    /**
+     * Mirror a sibling chart's crosshair in a multi-chart layout. Matching is
+     * by timestamp, so charts on different intervals or instruments still line
+     * up. Pass null to clear.
+     */
+    setExternalCrosshair: (point: {
+        timeMs: number;
+    } | null) => void;
     setTimezone: (timezone: ChartTimezone) => void;
     getTimezone: () => ChartTimezone;
     /** Switch rendered clock times between 24-hour and 12-hour. */

package/dist/index.d.ts

@@ -1030,6 +1030,14 @@ interface ChartInstance {
      * the crosshair tag and day/session boundaries move. Unknown ids fall back
      * to local time rather than throwing.
      */
+    /**
+     * Mirror a sibling chart's crosshair in a multi-chart layout. Matching is
+     * by timestamp, so charts on different intervals or instruments still line
+     * up. Pass null to clear.
+     */
+    setExternalCrosshair: (point: {
+        timeMs: number;
+    } | null) => void;
     setTimezone: (timezone: ChartTimezone) => void;
     getTimezone: () => ChartTimezone;
     /** Switch rendered clock times between 24-hour and 12-hour. */

package/dist/index.js

@@ -4270,6 +4270,7 @@ function createChart(element, options = {}) {
   let actionDragState = null;
   let pointerDownInfo = null;
   let crosshairPoint = null;
+  let externalCrosshair = null;
   let doubleClickEnabled = mergedOptions.doubleClickEnabled;
   let doubleClickAction = mergedOptions.doubleClickAction;
   setIndicatorLiveThrottleMs(mergedOptions.indicatorUpdate?.liveThrottleMs ?? 80);
@@ -8472,7 +8473,26 @@ function createChart(element, options = {}) {
     crosshairPriceActionRegion = null;
     const layout = overlayLayout;
     const crosshair = resolvedCrosshair;
-    if (!layout || !crosshair.visible || !crosshairPoint) {
+    if (!layout) return;
+    if (!crosshairPoint && externalCrosshair !== null && crosshair.visible) {
+      const index = findNearestIndexForTimeMs(externalCrosshair.timeMs);
+      if (index !== null) {
+        const x = layout.chartLeft + (index + 0.5 - layout.xStart) / layout.xSpan * layout.chartWidth;
+        if (x >= layout.chartLeft && x <= layout.chartRight) {
+          ctx.save();
+          ctx.globalAlpha = 0.55;
+          ctx.strokeStyle = crosshair.color;
+          ctx.lineWidth = Math.max(1, crosshair.width);
+          applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(layout.chartTop));
+          ctx.lineTo(crisp(x), crisp(layout.fullChartBottom));
+          ctx.stroke();
+          ctx.restore();
+        }
+      }
+    }
+    if (!crosshair.visible || !crosshairPoint) {
       return;
     }
     const { chartLeft, chartTop, chartRight, chartBottom, chartWidth, chartHeight, fullChartBottom, yMin, yRange, xStart, xSpan: xSpan2 } = layout;
@@ -11954,6 +11974,12 @@ function createChart(element, options = {}) {
   const onAlertAction = (handler) => {
     alertActionHandler = handler;
   };
+  const setExternalCrosshair = (point) => {
+    const nextMs = point && Number.isFinite(point.timeMs) ? point.timeMs : null;
+    if (nextMs === (externalCrosshair?.timeMs ?? null)) return;
+    externalCrosshair = nextMs === null ? null : { timeMs: nextMs };
+    scheduleDraw({ overlayOnly: true });
+  };
   const setTimezone = (timezone) => {
     timezoneSetting = timezone || "local";
     zoneClock = createZoneClock(timezoneSetting);
@@ -12264,6 +12290,7 @@ function createChart(element, options = {}) {
     saveState,
     loadState,
     takeScreenshot,
+    setExternalCrosshair,
     setTimezone,
     getTimezone,
     setTimeFormat,

package/docs/API.md

@@ -881,6 +881,28 @@ they are not part of `saveState()`.
 
 ---
 
+## Overlay indicator legend
+
+With `labels.showIndicatorNames` / `showIndicatorValues`, overlay indicators
+are listed top-left, one row each. Hovering a row reveals the same four
+controls the separate panes have — eye, gear, `{}`, X — and they emit the same
+`onIndicatorPaneAction` event, so a host that already handles pane actions gets
+the overlay legend for free:
+
+```ts
+chart.updateOptions({ labels: { showIndicatorNames: true, showIndicatorValues: true } });
+chart.onIndicatorPaneAction(({ id, action }) => {
+  if (action === "remove") store.removeIndicator(id);
+  if (action === "settings") store.openSettings(id);
+});
+```
+
+The eye also toggles visibility internally so it works without a host, and
+hidden indicators render their row dimmed. Position and offsets come from
+`labels.indicatorLegendPosition` / `indicatorLegendOffsetX` / `OffsetY`.
+
+---
+
 ## In-chart data line
 
 The symbol/OHLC line TradingView draws in the top-left of the plot. Hosts have

package/package.json

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