Getting started

The Hyperprop Charting Library is a trading-grade TypeScript charting engine built on Canvas 2D. One dependency, one createChart call — candlesticks, 30+ indicators, drawing tools, order lines, brackets, alerts, bar replay, themes and a scriptable indicator runtime, with zero runtime dependencies.

Commercial software — license required. The library is proprietary and production use requires a Hyperprop Commercial License. Request a license to get npm access and pricing for your team.

Install#

npm install @hyperprop/charting-library

The package is published with restricted access — your team receives npm access as part of a commercial license.

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

That is a complete, working chart: crosshair, pan, zoom, keyboard and touch interactions all work out of the box. Everything else — indicators, order lines, drawings, replay — is opt-in through the same chart instance.

Framework integration#

The library is framework-agnostic: it renders into any DOM element and never touches your application state. In React, mount it inside a ref callback or an effect and call chart.destroy() on unmount:

import { useEffect, useRef } from "react";
import {
  createChart,
  type ChartInstance,
  type OhlcDataPoint
} from "@hyperprop/charting-library";

export function Chart({ data }: { data: OhlcDataPoint[] }) {
  const rootRef = useRef<HTMLDivElement>(null);
  const chartRef = useRef<ChartInstance | null>(null);

  useEffect(() => {
    if (!rootRef.current) return;
    const chart = createChart(rootRef.current, { width: 900, height: 520 });
    chartRef.current = chart;
    return () => chart.destroy();
  }, []);

  useEffect(() => {
    chartRef.current?.setData(data);
  }, [data]);

  return <div ref={rootRef} />;
}

The same pattern works in Vue, Svelte, Angular or plain JavaScript — see Recipes for streaming data, order lifecycles and more complete integrations.

Add an indicator#

Built-in indicators ship with the package — no extra installs:

const emaId = chart.addIndicator("ema", { length: 34, source: "close" });
const volumeId = chart.addIndicator("volume", {}, { paneHeightRatio: 0.16 });

// update any indicator instance later
chart.updateIndicator(emaId, { inputs: { length: 55 } });
chart.removeIndicator(volumeId);

You can also register your own indicator plugins, or let end users author Pine-style script indicators at runtime — see the API reference for the full catalog.

Wire up trading#

Order lines, bracket orders (TP/SL) and chart-click trading are first-class:

chart.addOrderLine({
  id: "order-1",
  type: "limit",
  side: "buy",
  price: 23480.25,
  qty: 2,
  draggable: true
});

chart.onOrderAction((event) => {
  // user pressed a button on, or dragged, an order line
  console.log(event.action, event.orderId, event.price);
});

The full order and bracket lifecycle — including the exact event contracts your backend should implement — is documented in Events and Bracket orders.

Core API surface#

• createChart(element, options)
• chart.setData(data) / chart.upsertBar(bar)
• 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.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()

Every option and method is covered in the API reference.

Where next#

• API reference — every type, option and ChartInstance method.
• Events — the event contracts between chart and backend.
• Recipes — integration patterns for common product features.
• Bracket orders — the TP/SL lifecycle end to end.
• AI integration — a compact context file for LLM-assisted integration.
• Playground — every feature of the library, live in the browser.