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"
});

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.setDoubleClickEnabled(enabled) / chart.setDoubleClickAction(action)
• 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.