hyperprop-charting-library 0.1.21 → 0.1.22

package/README.md

@@ -76,6 +76,55 @@ chart.onCrosshairPriceAction((event) => {
 });
 ```
 
+## Built-In Indicators
+
+Built-ins are part of this package (no extra install):
+
+- `volume`
+- `sma`
+- `ema`
+- `rsi`
+- `wma`
+- `vwma`
+- `rma`
+- `hma`
+- `stddev`
+- `atr`
+
+Quick usage:
+
+```ts
+const emaId = chart.addIndicator("ema", { length: 34, source: "close" });
+const volumeId = chart.addIndicator("volume", { upOpacity: 0.72, downOpacity: 0.72 }, { paneHeightRatio: 0.16 });
+
+// update any indicator instance
+chart.updateIndicator(emaId, { inputs: { length: 55 } });
+chart.updateIndicator(volumeId, { paneHeightRatio: 0.1 });
+```
+
+Volume note:
+
+- `volume` and `vwma` require `OhlcDataPoint.v` for best results.
+
+## Custom Indicator Plugins
+
+You can register your own indicators in-app:
+
+```ts
+chart.registerIndicator({
+  id: "my-line",
+  name: "My Line",
+  pane: "overlay",
+  defaultInputs: { color: "#22d3ee", width: 2 },
+  draw: (ctx, rc, inputs) => {
+    if (!rc.yFromPrice) return;
+    // draw using rc.xFromIndex(...) and rc.yFromPrice(...)
+  }
+});
+
+const myId = chart.addIndicator("my-line");
+```
+
 ## Full Documentation
 
 - API reference: `docs/API.md`
@@ -92,6 +141,7 @@ chart.onCrosshairPriceAction((event) => {
 - `chart.setOrderLines(lines)` / `chart.addOrderLine(line)` / `chart.updateOrderLine(id, patch)` / `chart.removeOrderLine(id)`
 - `chart.onOrderAction(handler)` / `chart.onChartClick(handler)` / `chart.onCrosshairMove(handler)` / `chart.onCrosshairPriceAction(handler)`
 - `chart.setDoubleClickEnabled(enabled)` / `chart.setDoubleClickAction(action)`
+- `chart.registerIndicator(plugin)` / `chart.addIndicator(type, inputs?, options?)` / `chart.updateIndicator(id, patch)` / `chart.removeIndicator(id)`
 - `chart.zoomInX()` / `chart.zoomOutX()` / `chart.panX(bars)` / `chart.resetViewport()`
 - `chart.resize(width, height)` / `chart.destroy()`
 

package/dist/hyperprop-charting-library.cjs

@@ -478,16 +478,21 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
 var BUILTIN_VOLUME_INDICATOR = {
   id: "volume",
   name: "Volume",
-  pane: "separate",
+  pane: "overlay",
   paneHeightRatio: 0.22,
   defaultInputs: {
     upOpacity: 0.7,
     downOpacity: 0.7,
-    minBarWidth: 1
+    minBarWidth: 1,
+    overlayHeightRatio: 0.22
   },
   draw: (ctx, renderContext, inputs) => {
     const { data, startIndex, endIndex, chartTop, chartBottom, candleSpacing, xFromIndex, upColor, downColor } = renderContext;
-    const paneHeight = Math.max(1, chartBottom - chartTop);
+    const fullPaneHeight = Math.max(1, chartBottom - chartTop);
+    const overlayMode = renderContext.yFromPrice !== null;
+    const overlayHeightRatio = Math.min(0.45, Math.max(0.08, Number(inputs.overlayHeightRatio) || 0.22));
+    const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
+    const paneBottom = chartBottom;
     const visiblePoints = data.slice(startIndex, endIndex + 1);
     const maxVolume = Math.max(1, ...visiblePoints.map((point) => point.v ?? 0));
     const barWidth = Math.max(
@@ -505,7 +510,7 @@ var BUILTIN_VOLUME_INDICATOR = {
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
-      const barY = Math.round(chartBottom - volumeHeight);
+      const barY = Math.round(paneBottom - volumeHeight);
       const isUp = point.c >= point.o;
       const opacity = isUp ? upOpacity : downOpacity;
       ctx.save();
@@ -702,6 +707,7 @@ function createChart(element, options = {}) {
       type: indicator.type,
       visible: indicator.visible ?? true,
       pane: indicator.pane ?? plugin?.pane ?? "overlay",
+      ...indicator.paneHeightRatio === void 0 ? {} : { paneHeightRatio: indicator.paneHeightRatio },
       inputs: {
         ...defaults,
         ...indicator.inputs ?? {}
@@ -1360,8 +1366,8 @@ function createChart(element, options = {}) {
     const activeSeparateIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "separate"
     );
-    const separatePaneHeightDefaults = activeSeparateIndicators.map(({ plugin }) => {
-      const ratio = Math.min(0.45, Math.max(0.08, plugin.paneHeightRatio ?? 0.22));
+    const separatePaneHeightDefaults = activeSeparateIndicators.map(({ indicator, plugin }) => {
+      const ratio = Math.min(0.45, Math.max(0.08, indicator.paneHeightRatio ?? plugin.paneHeightRatio ?? 0.22));
       return Math.round(fullChartHeight * ratio);
     });
     const separatePaneDesiredTotal = separatePaneHeightDefaults.reduce((sum, value) => sum + value, 0) + Math.max(0, activeSeparateIndicators.length - 1) * separatePaneSpacing;
@@ -1665,7 +1671,6 @@ function createChart(element, options = {}) {
         ctx.lineTo(crisp(chartRight), crisp(paneTop));
         ctx.stroke();
         ctx.restore();
-        drawText(plugin.name.toUpperCase(), chartLeft + 6, paneTop + 12, "left", "middle", axis.textColor);
       });
     }
     ctx.strokeStyle = axis.lineColor;
@@ -2535,6 +2540,7 @@ function createChart(element, options = {}) {
         ...indicator,
         visible: patch.visible ?? indicator.visible,
         pane: patch.pane ?? indicator.pane ?? plugin?.pane ?? "overlay",
+        ...patch.paneHeightRatio !== void 0 || indicator.paneHeightRatio !== void 0 ? { paneHeightRatio: patch.paneHeightRatio ?? indicator.paneHeightRatio } : {},
         type: patch.type ?? indicator.type,
         inputs: {
           ...indicator.inputs,

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

@@ -41,6 +41,7 @@ interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Rec
     type: string;
     visible?: boolean;
     pane?: IndicatorPane;
+    paneHeightRatio?: number;
     inputs?: Partial<TInputs>;
 }
 interface IndicatorRenderContext {

package/dist/hyperprop-charting-library.js

@@ -454,16 +454,21 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
 var BUILTIN_VOLUME_INDICATOR = {
   id: "volume",
   name: "Volume",
-  pane: "separate",
+  pane: "overlay",
   paneHeightRatio: 0.22,
   defaultInputs: {
     upOpacity: 0.7,
     downOpacity: 0.7,
-    minBarWidth: 1
+    minBarWidth: 1,
+    overlayHeightRatio: 0.22
   },
   draw: (ctx, renderContext, inputs) => {
     const { data, startIndex, endIndex, chartTop, chartBottom, candleSpacing, xFromIndex, upColor, downColor } = renderContext;
-    const paneHeight = Math.max(1, chartBottom - chartTop);
+    const fullPaneHeight = Math.max(1, chartBottom - chartTop);
+    const overlayMode = renderContext.yFromPrice !== null;
+    const overlayHeightRatio = Math.min(0.45, Math.max(0.08, Number(inputs.overlayHeightRatio) || 0.22));
+    const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
+    const paneBottom = chartBottom;
     const visiblePoints = data.slice(startIndex, endIndex + 1);
     const maxVolume = Math.max(1, ...visiblePoints.map((point) => point.v ?? 0));
     const barWidth = Math.max(
@@ -481,7 +486,7 @@ var BUILTIN_VOLUME_INDICATOR = {
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
-      const barY = Math.round(chartBottom - volumeHeight);
+      const barY = Math.round(paneBottom - volumeHeight);
       const isUp = point.c >= point.o;
       const opacity = isUp ? upOpacity : downOpacity;
       ctx.save();
@@ -678,6 +683,7 @@ function createChart(element, options = {}) {
       type: indicator.type,
       visible: indicator.visible ?? true,
       pane: indicator.pane ?? plugin?.pane ?? "overlay",
+      ...indicator.paneHeightRatio === void 0 ? {} : { paneHeightRatio: indicator.paneHeightRatio },
       inputs: {
         ...defaults,
         ...indicator.inputs ?? {}
@@ -1336,8 +1342,8 @@ function createChart(element, options = {}) {
     const activeSeparateIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "separate"
     );
-    const separatePaneHeightDefaults = activeSeparateIndicators.map(({ plugin }) => {
-      const ratio = Math.min(0.45, Math.max(0.08, plugin.paneHeightRatio ?? 0.22));
+    const separatePaneHeightDefaults = activeSeparateIndicators.map(({ indicator, plugin }) => {
+      const ratio = Math.min(0.45, Math.max(0.08, indicator.paneHeightRatio ?? plugin.paneHeightRatio ?? 0.22));
       return Math.round(fullChartHeight * ratio);
     });
     const separatePaneDesiredTotal = separatePaneHeightDefaults.reduce((sum, value) => sum + value, 0) + Math.max(0, activeSeparateIndicators.length - 1) * separatePaneSpacing;
@@ -1641,7 +1647,6 @@ function createChart(element, options = {}) {
         ctx.lineTo(crisp(chartRight), crisp(paneTop));
         ctx.stroke();
         ctx.restore();
-        drawText(plugin.name.toUpperCase(), chartLeft + 6, paneTop + 12, "left", "middle", axis.textColor);
       });
     }
     ctx.strokeStyle = axis.lineColor;
@@ -2511,6 +2516,7 @@ function createChart(element, options = {}) {
         ...indicator,
         visible: patch.visible ?? indicator.visible,
         pane: patch.pane ?? indicator.pane ?? plugin?.pane ?? "overlay",
+        ...patch.paneHeightRatio !== void 0 || indicator.paneHeightRatio !== void 0 ? { paneHeightRatio: patch.paneHeightRatio ?? indicator.paneHeightRatio } : {},
         type: patch.type ?? indicator.type,
         inputs: {
           ...indicator.inputs,

package/dist/index.cjs

@@ -478,16 +478,21 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
 var BUILTIN_VOLUME_INDICATOR = {
   id: "volume",
   name: "Volume",
-  pane: "separate",
+  pane: "overlay",
   paneHeightRatio: 0.22,
   defaultInputs: {
     upOpacity: 0.7,
     downOpacity: 0.7,
-    minBarWidth: 1
+    minBarWidth: 1,
+    overlayHeightRatio: 0.22
   },
   draw: (ctx, renderContext, inputs) => {
     const { data, startIndex, endIndex, chartTop, chartBottom, candleSpacing, xFromIndex, upColor, downColor } = renderContext;
-    const paneHeight = Math.max(1, chartBottom - chartTop);
+    const fullPaneHeight = Math.max(1, chartBottom - chartTop);
+    const overlayMode = renderContext.yFromPrice !== null;
+    const overlayHeightRatio = Math.min(0.45, Math.max(0.08, Number(inputs.overlayHeightRatio) || 0.22));
+    const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
+    const paneBottom = chartBottom;
     const visiblePoints = data.slice(startIndex, endIndex + 1);
     const maxVolume = Math.max(1, ...visiblePoints.map((point) => point.v ?? 0));
     const barWidth = Math.max(
@@ -505,7 +510,7 @@ var BUILTIN_VOLUME_INDICATOR = {
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
-      const barY = Math.round(chartBottom - volumeHeight);
+      const barY = Math.round(paneBottom - volumeHeight);
       const isUp = point.c >= point.o;
       const opacity = isUp ? upOpacity : downOpacity;
       ctx.save();
@@ -702,6 +707,7 @@ function createChart(element, options = {}) {
       type: indicator.type,
       visible: indicator.visible ?? true,
       pane: indicator.pane ?? plugin?.pane ?? "overlay",
+      ...indicator.paneHeightRatio === void 0 ? {} : { paneHeightRatio: indicator.paneHeightRatio },
       inputs: {
         ...defaults,
         ...indicator.inputs ?? {}
@@ -1360,8 +1366,8 @@ function createChart(element, options = {}) {
     const activeSeparateIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "separate"
     );
-    const separatePaneHeightDefaults = activeSeparateIndicators.map(({ plugin }) => {
-      const ratio = Math.min(0.45, Math.max(0.08, plugin.paneHeightRatio ?? 0.22));
+    const separatePaneHeightDefaults = activeSeparateIndicators.map(({ indicator, plugin }) => {
+      const ratio = Math.min(0.45, Math.max(0.08, indicator.paneHeightRatio ?? plugin.paneHeightRatio ?? 0.22));
       return Math.round(fullChartHeight * ratio);
     });
     const separatePaneDesiredTotal = separatePaneHeightDefaults.reduce((sum, value) => sum + value, 0) + Math.max(0, activeSeparateIndicators.length - 1) * separatePaneSpacing;
@@ -1665,7 +1671,6 @@ function createChart(element, options = {}) {
         ctx.lineTo(crisp(chartRight), crisp(paneTop));
         ctx.stroke();
         ctx.restore();
-        drawText(plugin.name.toUpperCase(), chartLeft + 6, paneTop + 12, "left", "middle", axis.textColor);
       });
     }
     ctx.strokeStyle = axis.lineColor;
@@ -2535,6 +2540,7 @@ function createChart(element, options = {}) {
         ...indicator,
         visible: patch.visible ?? indicator.visible,
         pane: patch.pane ?? indicator.pane ?? plugin?.pane ?? "overlay",
+        ...patch.paneHeightRatio !== void 0 || indicator.paneHeightRatio !== void 0 ? { paneHeightRatio: patch.paneHeightRatio ?? indicator.paneHeightRatio } : {},
         type: patch.type ?? indicator.type,
         inputs: {
           ...indicator.inputs,

package/dist/index.d.cts

@@ -41,6 +41,7 @@ interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Rec
     type: string;
     visible?: boolean;
     pane?: IndicatorPane;
+    paneHeightRatio?: number;
     inputs?: Partial<TInputs>;
 }
 interface IndicatorRenderContext {

package/dist/index.d.ts

@@ -41,6 +41,7 @@ interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Rec
     type: string;
     visible?: boolean;
     pane?: IndicatorPane;
+    paneHeightRatio?: number;
     inputs?: Partial<TInputs>;
 }
 interface IndicatorRenderContext {

package/dist/index.js

@@ -454,16 +454,21 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
 var BUILTIN_VOLUME_INDICATOR = {
   id: "volume",
   name: "Volume",
-  pane: "separate",
+  pane: "overlay",
   paneHeightRatio: 0.22,
   defaultInputs: {
     upOpacity: 0.7,
     downOpacity: 0.7,
-    minBarWidth: 1
+    minBarWidth: 1,
+    overlayHeightRatio: 0.22
   },
   draw: (ctx, renderContext, inputs) => {
     const { data, startIndex, endIndex, chartTop, chartBottom, candleSpacing, xFromIndex, upColor, downColor } = renderContext;
-    const paneHeight = Math.max(1, chartBottom - chartTop);
+    const fullPaneHeight = Math.max(1, chartBottom - chartTop);
+    const overlayMode = renderContext.yFromPrice !== null;
+    const overlayHeightRatio = Math.min(0.45, Math.max(0.08, Number(inputs.overlayHeightRatio) || 0.22));
+    const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
+    const paneBottom = chartBottom;
     const visiblePoints = data.slice(startIndex, endIndex + 1);
     const maxVolume = Math.max(1, ...visiblePoints.map((point) => point.v ?? 0));
     const barWidth = Math.max(
@@ -481,7 +486,7 @@ var BUILTIN_VOLUME_INDICATOR = {
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
-      const barY = Math.round(chartBottom - volumeHeight);
+      const barY = Math.round(paneBottom - volumeHeight);
       const isUp = point.c >= point.o;
       const opacity = isUp ? upOpacity : downOpacity;
       ctx.save();
@@ -678,6 +683,7 @@ function createChart(element, options = {}) {
       type: indicator.type,
       visible: indicator.visible ?? true,
       pane: indicator.pane ?? plugin?.pane ?? "overlay",
+      ...indicator.paneHeightRatio === void 0 ? {} : { paneHeightRatio: indicator.paneHeightRatio },
       inputs: {
         ...defaults,
         ...indicator.inputs ?? {}
@@ -1336,8 +1342,8 @@ function createChart(element, options = {}) {
     const activeSeparateIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "separate"
     );
-    const separatePaneHeightDefaults = activeSeparateIndicators.map(({ plugin }) => {
-      const ratio = Math.min(0.45, Math.max(0.08, plugin.paneHeightRatio ?? 0.22));
+    const separatePaneHeightDefaults = activeSeparateIndicators.map(({ indicator, plugin }) => {
+      const ratio = Math.min(0.45, Math.max(0.08, indicator.paneHeightRatio ?? plugin.paneHeightRatio ?? 0.22));
       return Math.round(fullChartHeight * ratio);
     });
     const separatePaneDesiredTotal = separatePaneHeightDefaults.reduce((sum, value) => sum + value, 0) + Math.max(0, activeSeparateIndicators.length - 1) * separatePaneSpacing;
@@ -1641,7 +1647,6 @@ function createChart(element, options = {}) {
         ctx.lineTo(crisp(chartRight), crisp(paneTop));
         ctx.stroke();
         ctx.restore();
-        drawText(plugin.name.toUpperCase(), chartLeft + 6, paneTop + 12, "left", "middle", axis.textColor);
       });
     }
     ctx.strokeStyle = axis.lineColor;
@@ -2511,6 +2516,7 @@ function createChart(element, options = {}) {
         ...indicator,
         visible: patch.visible ?? indicator.visible,
         pane: patch.pane ?? indicator.pane ?? plugin?.pane ?? "overlay",
+        ...patch.paneHeightRatio !== void 0 || indicator.paneHeightRatio !== void 0 ? { paneHeightRatio: patch.paneHeightRatio ?? indicator.paneHeightRatio } : {},
         type: patch.type ?? indicator.type,
         inputs: {
           ...indicator.inputs,

package/docs/API.md

@@ -245,6 +245,7 @@ Connector/fill visuals:
 - `type: string` (registered indicator id, e.g. `"volume"`)
 - `visible?: boolean` (default `true`)
 - `pane?: "overlay" | "separate"`
+- `paneHeightRatio?: number` (for separate panes; `0.08` to `0.45` recommended)
 - `inputs?: Record<string, unknown>` (plugin-specific parameters)
 
 ### `IndicatorPlugin`
@@ -256,9 +257,43 @@ Connector/fill visuals:
 - `defaultInputs?: Record<string, unknown>`
 - `draw(ctx, renderContext, inputs): void`
 
+`IndicatorRenderContext` includes:
+
+- shared x-window and visible index range (`startIndex`, `endIndex`, `xStart`, `xSpan`)
+- pane bounds (`chartLeft`, `chartRight`, `chartTop`, `chartBottom`, `chartWidth`, `chartHeight`)
+- `xFromIndex(index)` helper
+- `yFromPrice(price)` helper (available for overlay indicators, `null` for separate-pane indicators)
+- theme colors (`upColor`, `downColor`)
+
 Built-in:
 
-- `"volume"`: histogram in a bottom separate pane (uses `OhlcDataPoint.v`)
+- `"volume"`: separate pane histogram (uses `OhlcDataPoint.v`)
+- `"sma"`: Simple Moving Average (overlay)
+- `"ema"`: Exponential Moving Average (overlay)
+- `"rsi"`: Relative Strength Index (separate pane, 30/50/70 guides)
+- `"wma"`: Weighted Moving Average (overlay)
+- `"vwma"`: Volume Weighted Moving Average (overlay, uses `OhlcDataPoint.v`)
+- `"rma"`: Wilder's Moving Average (overlay)
+- `"hma"`: Hull Moving Average (overlay)
+- `"stddev"`: Standard Deviation (separate pane)
+- `"atr"`: Average True Range (separate pane)
+
+Example:
+
+```ts
+const emaId = chart.addIndicator("ema", { length: 34, source: "close" });
+const rsiId = chart.addIndicator("rsi", { length: 14 }, { pane: "separate", paneHeightRatio: 0.18 });
+
+// resize pane later (useful for drag-handle UX in frontend)
+chart.updateIndicator(rsiId, { paneHeightRatio: 0.12 });
+
+// remove when needed
+chart.removeIndicator(emaId);
+```
+
+Volume/VWMA note:
+
+- if your data has no `v`, `volume`/`vwma` will have limited or no output.
 
 ---
 

package/docs/RECIPES.md

@@ -91,6 +91,67 @@ const chart = createChart(root, {
 });
 ```
 
+## Add built-in indicators
+
+```ts
+const emaId = chart.addIndicator("ema", { length: 34, source: "close" });
+const rsiId = chart.addIndicator("rsi", { length: 14 }, { pane: "separate", paneHeightRatio: 0.18 });
+const volumeId = chart.addIndicator("volume", { upOpacity: 0.72, downOpacity: 0.72 });
+```
+
+Available built-ins:
+
+- `volume`, `sma`, `ema`, `rsi`, `wma`, `vwma`, `rma`, `hma`, `stddev`, `atr`
+
+## Resize indicator pane from frontend
+
+Use `paneHeightRatio` so your app can wire a drag handle or slider:
+
+```ts
+const volumeId = chart.addIndicator("volume", {}, { paneHeightRatio: 0.2 });
+
+// e.g. on slider/drag updates:
+chart.updateIndicator(volumeId, { paneHeightRatio: 0.1 });
+```
+
+Recommended range:
+
+- `0.08` to `0.45` (library clamps to safe bounds)
+
+## Remove or hide indicators
+
+```ts
+const id = chart.addIndicator("ema", { length: 21 });
+chart.updateIndicator(id, { visible: false }); // hide
+chart.removeIndicator(id); // remove
+```
+
+## Volume and VWMA data requirement
+
+`volume` and `vwma` use `OhlcDataPoint.v`. If `v` is missing, output can be empty/limited.
+
+```ts
+const data = [
+  { t: "2026-01-01T00:00:00Z", o: 100, h: 103, l: 99, c: 102, v: 125000 }
+];
+chart.setData(data);
+```
+
+## Register a custom indicator plugin
+
+```ts
+chart.registerIndicator({
+  id: "my-overlay-line",
+  name: "My Overlay Line",
+  pane: "overlay",
+  defaultInputs: { color: "#22d3ee", width: 2 },
+  draw: (ctx, rc, inputs) => {
+    if (!rc.yFromPrice) return;
+    // draw custom line with rc.xFromIndex + rc.yFromPrice
+  }
+});
+```
+
 ## Add a draggable pending limit line
 
 ```ts

package/package.json

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