hyperprop-charting-library 0.1.48 → 0.1.50

package/docs/RECIPES.md

@@ -146,6 +146,34 @@ const rsiId = chart.addIndicator("rsi", { length: 14 }, { pane: "separate", pane
 const volumeId = chart.addIndicator("volume", { upOpacity: 0.72, downOpacity: 0.72 });
 ```
 
+## Move the main indicator legend away from a HUD
+
+The main overlay indicator legend defaults to the chart pane's top-left corner. If your app renders a symbol/OHLC HUD over the canvas, move the legend with `labels.indicatorLegend*`.
+
+```ts
+const chart = createChart(root, {
+  labels: {
+    showIndicatorNames: true,
+    showIndicatorValues: true,
+    indicatorLegendPosition: "top-left",
+    indicatorLegendOffsetX: 10,
+    indicatorLegendOffsetY: 34
+  }
+});
+```
+
+You can also place it in another corner:
+
+```ts
+chart.updateOptions({
+  labels: {
+    indicatorLegendPosition: "top-right",
+    indicatorLegendOffsetX: 12,
+    indicatorLegendOffsetY: 10
+  }
+});
+```
+
 ## Prevent one volume spike from crushing all bars
 
 ```ts
@@ -160,6 +188,78 @@ Available built-ins:
 
 - `volume`, `sma`, `ema`, `rsi`, `wma`, `vwma`, `rma`, `hma`, `stddev`, `atr`
 
+## Add a custom separate-pane indicator with scale labels
+
+Separate-pane plugins can return pane metadata from `draw()` so the chart renders the right-side scale, top-left legend, and latest-value tag.
+
+```ts
+import { type IndicatorPlugin } from "hyperprop-charting-library";
+
+const momentumPlugin: IndicatorPlugin<{ length: number; color: string }> = {
+  id: "momentum",
+  name: "Momentum",
+  pane: "separate",
+  paneHeightRatio: 0.18,
+  defaultInputs: { length: 10, color: "#38bdf8" },
+  draw: (ctx, renderContext, inputs) => {
+    const values = renderContext.data.map((point, index, data) => {
+      const prior = data[index - inputs.length];
+      return prior ? point.c - prior.c : null;
+    });
+    const visibleValues = values
+      .slice(renderContext.startIndex, renderContext.endIndex + 1)
+      .filter((value): value is number => Number.isFinite(value ?? Number.NaN));
+    if (visibleValues.length === 0) return;
+
+    const maxAbs = Math.max(...visibleValues.map((value) => Math.abs(value)), 1);
+    const min = -maxAbs;
+    const max = maxAbs;
+    const yFromValue = (value: number) => {
+      const ratio = (value - min) / (max - min || 1);
+      return renderContext.chartBottom - ratio * renderContext.chartHeight;
+    };
+
+    ctx.save();
+    ctx.strokeStyle = inputs.color;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    let drawing = false;
+    for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+      const value = values[index];
+      if (!Number.isFinite(value ?? Number.NaN)) {
+        drawing = false;
+        continue;
+      }
+      const x = renderContext.xFromIndex(index);
+      const y = yFromValue(value as number);
+      if (!drawing) {
+        ctx.moveTo(x, y);
+        drawing = true;
+      } else {
+        ctx.lineTo(x, y);
+      }
+    }
+    ctx.stroke();
+    ctx.restore();
+
+    const latest = [...values].reverse().find((value): value is number => Number.isFinite(value ?? Number.NaN));
+    return {
+      title: `Momentum ${inputs.length}`,
+      axis: { min, max, ticks: [min, 0, max], decimals: 2 },
+      guideLines: [{ value: 0, label: "0", style: "dotted" }],
+      legendValues: latest === undefined ? [] : [{ value: latest, text: latest.toFixed(2), color: inputs.color }],
+      valueLabels:
+        latest === undefined
+          ? []
+          : [{ value: latest, text: latest.toFixed(2), backgroundColor: inputs.color, textColor: "#0f172a" }]
+    };
+  }
+};
+
+chart.registerIndicator(momentumPlugin);
+chart.addIndicator("momentum", { length: 10 });
+```
+
 ## Resize indicator pane from frontend
 
 Use `paneHeightRatio` so your app can wire a drag handle or slider:

package/package.json

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