Chart

Zero-dependency, WASM + SIMD-accelerated financial charts in TypeScript

Features

• Zero runtime dependencies — pure ESM, sideEffects: false, tree-shakable.
• WASM + SIMD kernels — hot math paths with automatic scalar-JS fallback.
• Cross-environment — injected DOM means the library never touches global document/window; it runs in browsers, workers, SSR, and tests.
• One consolidated config — a single ChartConfig describes data, panes, series, indicators, drawings, axes, crosshair, grid, theme, and watermark.
• 20 indicators — moving averages, Bollinger Bands, VWAP, Ichimoku, Supertrend, MACD, RSI, Stochastic, ADX, volume and more, with per-plot styling, an indicator dialog, and a registry for custom ones.
• Paging datafeed — @bloxwap/chart/datafeed pages history in as the user scrolls and folds live ticks into bars, replacing a TradingView UDF datafeed.
• TradingView parity — header bar, context menus, touch gestures, price lines and markers, Heikin Ashi and hollow candles, and brand presets. See the migration guide.
• 89 drawing tools — TradingView-style groups: lines, channels, pitchforks, Fibonacci, Gann, harmonic patterns, Elliott waves, shapes, and annotations.
• Display-P3 colors — wide-gamut colors flow straight to the canvas, with automatic label contrast.
• Tested — line, branch, and function coverage measured by npm run coverage, with a 100% target.

Documentation

Browse the documentation and interactive playground for guides, an API reference, and the complete chart controls.

Installation

npm install @bloxwap/chart

0.3.0 is an early developer preview; expect breaking changes before 1.0.

Quick Example

// 1. Import module
import { createChart, defineConfig } from '@bloxwap/chart';

// 2. Describe the chart in one config object
const config = defineConfig({
  data: candles, // [{ time, open, high, low, close, volume? }] — UNIX seconds
  series: { type: 'candlestick', upColor: 'color(display-p3 0 1 0.5)', downColor: '#ef5350' },
  watermark: { visible: true, text: 'ACME', opacity: 0.08 },
});

// 3. Create the chart on a canvas
const chart = createChart({ container: document.querySelector('canvas')!, config });
await chart.ready; // WASM kernels live (or JS fallback chosen)

// Indicators, drawings, and interaction
chart.addIndicator({ name: 'sma', params: { period: 20 } });
chart.addIndicator({ name: 'macd' }); // own sub-pane
chart.addDrawing({ name: 'fib', points: [{ index: 10, price: 95 }, { index: 90, price: 110 }] });

Headless (SSR/tests/workers):

import { createChart, MockDocument } from '@bloxwap/chart';
const chart = createChart({ document: new MockDocument(), config: { data: candles } });

For custom indicators and drawings, icons, the settings card, and performance tuning, see the library API and features and the performance measurements.

Repository layout

Workspace	Purpose
packages/chart	Published library, tests, icons, fonts, benchmarks, and build scripts
apps/docs	Fumadocs documentation and GitHub Pages site
apps/playground	Full interactive chart demo, also embedded in the docs

The repository uses npm workspaces with one root lockfile. Each workspace declares its own dependencies; the chart package has no runtime dependencies.

Development

Use Node.js 24 or newer. Run commands from the repository root:

npm ci
npm run docs:dev

Open http://localhost:3902. For the standalone playground, run npm run demo (requires Bun) and open http://localhost:8641/demo/.

Command	Purpose
npm run build	Generate icons, compile embedded WASM, and build the library
npm test	Build and run the library tests
npm run coverage	Check library test coverage
npm run bench	Run calculation and rendering benchmarks
npm run demo	Build and serve the interactive playground
npm run docs:dev	Build the embedded demo and start the docs dev server
npm run docs:check	Check documentation types
npm run docs:build	Export the docs and validate local links and assets
npm run docs:preview	Serve the exported site locally
npm run pack:chart	Build and package the library into packages/chart/*.tgz

GitHub Pages

The documentation workflow validates pull requests and deploys pushes to main. To check the project path locally:

NEXT_PUBLIC_BASE_PATH=/chart npm run docs:build
npm run docs:preview

The static preview opens at http://localhost:3902/chart/. Stop the docs dev server first, or use PORT=3902 npm run docs:preview to preview alongside it. See the docs development guide for editing and deployment details.

License

MIT