Quick start

Install from sourceCopy Anchor Link

npm install @bloxwap/chart

0.3.0 is an early developer preview, so expect breaking changes before 1.0. To try unreleased changes, build a local archive from the repository with npm ci && npm run pack:chart and install the resulting packages/chart/bloxwap-chart-<version>.tgz.

Give the chart a boxCopy Anchor Link

Your application owns layout. Put the canvas inside an element with a height; the chart fills it:

<div id="chart-stage" style="height: 400px">
  <canvas id="chart"></canvas>
</div>

Create the chartCopy Anchor Link

Run this in a browser module through your application's bundler:

import { createChart, type Candle } from '@bloxwap/chart';

const canvas = document.querySelector<HTMLCanvasElement>('#chart')!;

const data: Candle[] = [
  { time: 1700000000, open: 100, high: 104, low: 98, close: 102, volume: 1200 },
  { time: 1700003600, open: 102, high: 107, low: 101, close: 105, volume: 1800 },
  { time: 1700007200, open: 105, high: 106, low: 100, close: 101, volume: 950 },
];

const chart = createChart({ container: canvas, autoResize: true, theme: 'dark', config: { data } });

chart.scale.zoomToRange(0, data.length - 1);
await chart.ready;

Timestamps are UNIX seconds, not milliseconds. autoResize sizes the chart to #chart-stage and keeps it in sync, including the device pixel ratio; theme: 'dark' applies the built-in dark colors. To size the chart yourself instead, omit autoResize and call chart.resize(width, height, pixelRatio) with CSS pixels.

Using React? @bloxwap/chart/react wraps all of this in one component; see React integration.

The core paints immediately. chart.ready resolves after WASM initialization or selection of the JavaScript fallback; you do not need to wait before calling other methods.

Add interactionCopy Anchor Link

The core does not attach pointer listeners. Add the drawing toolbar for drag, wheel, crosshair, and drawing interactions, or wire your own controls to the scale API.

Update and clean upCopy Anchor Link

chart.appendData({ time: 1700010800, open: 101, high: 108, low: 100, close: 107 });
chart.updateConfig({ grid: { visible: false } });

// When your view is removed (this also stops autoResize):
chart.destroy();

Destroy any toolbar and settings handles before destroying the chart. Your application must also cancel its own timers, network subscriptions, and observers.