hyperprop-charting-library

Lightweight TypeScript charting library (Canvas 2D) focused on:

• OHLC candlestick rendering
• pan and zoom interactions
• price lines and order lines
• trading-style widgets and callbacks
• framework-agnostic integration

Install

npm install hyperprop-charting-library

Quick Start

import { createChart, type OhlcDataPoint } from "hyperprop-charting-library";

const root = document.getElementById("chart");
if (!root) throw new Error("Missing chart container");

const chart = createChart(root, { width: 900, height: 520 });

const data: OhlcDataPoint[] = [
  { t: "2026-01-01T00:00:00.000Z", o: 100, h: 104, l: 98, c: 102 },
  { t: "2026-01-02T00:00:00.000Z", o: 102, h: 106, l: 101, c: 105 }
];

chart.setData(data);

Dash Pattern Styling

You can control dotted/dashed spacing globally with dashPatterns:

const chart = createChart(root, {
  dashPatterns: {
    dotted: [2, 1],
    connectorDotted: [2, 2],
    borderDotted: [2, 1]
  }
});

Stable Price Labels (No Shake)

If fast ticks make right-side labels jitter, keep width stable:

const chart = createChart(root, {
  priceDecimals: 2,
  stabilizePriceLabels: true,
  priceLabelMinIntegerDigits: 4,
  // strongest lock (optional):
  // priceLabelWidthTemplate: "88888.88"
});

Candle Color Behavior

You can control how up/down candle color is decided:

const chart = createChart(root, {
  // "openClose" (default) or "prevClose"
  candleColorMode: "prevClose",
  // -1 = auto epsilon from priceDecimals, 0 = strict compare
  candleColorEpsilon: -1
});

Tick-Size Aware Precision

const chart = createChart(root, {
  tickSize: 0.25,
  priceDecimals: 2
});

This keeps labels, pointer prices, and color tolerance aligned to market tick steps.

Per-Axis Label Styling

const chart = createChart(root, {
  axis: { lineColor: "#374151" },
  xAxis: { textColor: "#9ca3af", fontSize: 11 },
  yAxis: { textColor: "#e5e7eb", fontSize: 12 }
});

Axis Label Density

const chart = createChart(root, {
  grid: {
    xTickCount: 8, // bottom labels/grid intervals
    yTickCount: 6  // right-side price labels/grid intervals
  }
});

Crosshair "+" Button

const chart = createChart(root, {
  crosshair: {
    showPriceActionButton: true,
    priceActionButtonRounded: false // square button
  }
});

chart.onCrosshairPriceAction((event) => {
  // Frontend decides what to do
  console.log(event.price);
});

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:

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 scaling tip (for large spikes):

chart.updateIndicator(volumeId, {
  inputs: {
    scaleMode: "visible",   // default; scales using current viewport only
    scaleType: "sqrt",      // default; balanced compression
    clampPercentile: 0.95   // optional outlier clamp
  }
});

Autoscale controls per indicator:

chart.addIndicator("ema", { length: 50 }, {
  excludeFromAutoscale: false,
  overlayScaleWeight: 0.25
});

Volume note:

• volume and vwma require OhlcDataPoint.v for best results.

Custom Indicator Plugins

You can register your own indicators in-app:

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
• Event contracts: docs/EVENTS.md
• Integration recipes: docs/RECIPES.md
• Bracket orders (TP/SL lifecycle): docs/BRACKETS.md
• AI integration context: docs/AI_CONTEXT.md

Core API Surface

• createChart(element, options)
• chart.setData(data)
• chart.setPriceLines(lines) / chart.addPriceLine(line) / chart.removePriceLine(id)
• 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.listBuiltInIndicators() / chart.getIndicators()
• chart.zoomInX() / chart.zoomOutX() / chart.panX(bars) / chart.resetViewport()
• chart.resize(width, height) / chart.destroy()

Scope

• This package is chart rendering + chart interaction only.
• Playground/demo UI is not part of the runtime API.