Zero-dependency, WASM + SIMD-accelerated financial charts in TypeScript
- 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
ChartConfigdescribes 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/datafeedpages 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. 100% line, branch, and function coverage enforcement.
npm install @bloxwap/chart0.3.0 is an early developer preview; expect breaking changes before 1.0.
import { createChart, defineConfig } from '@bloxwap/chart';
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 },
});
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.
Guides, API reference, and the complete chart controls: https://bloxwap.github.io/chart/
The repository uses npm workspaces with one root lockfile. Each workspace declares its own dependencies; the chart package has no runtime dependencies.
npm ci
npm test # build and run the library tests
npm run coverage # tests with 100% line, branch, and function coverage enforcement
npm run bench # calculation and rendering benchmarks
npm run demo # interactive playground at http://localhost:8641/demo/ (requires Bun)
npm run docs:dev # docs dev server at http://localhost:3902
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/*.tgzRequires Node.js 24 or newer.
| 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 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:previewThe 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.