# @bloxwap/chart

> A zero-dependency TypeScript library for interactive financial charts, drawn on an HTML canvas with WebAssembly-accelerated math and a JavaScript fallback. Open source (MIT) by Bloxwap, Inc.

`@bloxwap/chart` renders candlestick, hollow candle, Heikin Ashi, OHLC bar, line, area, and histogram series with 20 built-in indicators (SMA, EMA, Bollinger Bands, VWAP, MA ribbon, Supertrend, Ichimoku, Donchian, Parabolic SAR, MACD, RSI, KDJ, volume, ADX, CCI, MFI, OBV, ATR, Stochastic, Stochastic RSI) and 89 drawing tools grouped the way trading terminals present them (trend lines, channels, pitchforks, Fibonacci, Gann, harmonic patterns, Elliott waves, long/short positions, measurers, shapes, annotations). An optional UI layer, `@bloxwap/chart/ui`, adds a drawing toolbar, a header bar or vertical control rail, a settings card, indicator dialog, context menus, touch gestures, and on-chart editing. An optional datafeed, `@bloxwap/chart/datafeed`, pages history from a server and folds live ticks into bars, replacing a TradingView UDF datafeed; it also maintains a live L2 order book from a snapshot plus diff-depth stream. Order-flow views draw that data on the chart: an inline order book, a visible-range volume profile, a session volume profile/TPO pane, a liquidity heatmap, footprint candles, and delta/CVD indicators. Rendering can run on WebGL2 (`renderer: 'webgl2'`) with an automatic Canvas2D fallback, and host code can add custom series, panes, and pane primitives.

## When to use this

Reach for `@bloxwap/chart` when an agent or developer needs to:

- Put an interactive price chart (candles, OHLC, line, area) into a web app, dashboard, or trading interface.
- Let users draw and edit technical-analysis annotations: trend lines, Fibonacci retracements, pitchforks, long/short positions, price and date ranges.
- Add standard technical indicators to a chart without writing the math.
- Stream live candle updates into an existing chart, or page history in from a server as the user scrolls.
- Show order flow next to price: a live order book on the price axis, a volume profile, a liquidity heatmap, or footprint candles with delta/CVD.
- Replace the TradingView Charting Library with an MIT-licensed, dependency-free library.
- Keep full control of layout and DOM: the core draws into a canvas you pass in and never touches global `document` or `window`, so it also runs in workers, SSR, and tests.
- Ship without runtime dependencies.

## When not to use this

- General-purpose business charts (pie, scatter, stacked bars): use a general charting library instead.
- Server-side image generation without any canvas implementation available.
- Projects that need a stable API today: 0.x is a developer preview and may change before 1.0.

## How to use it

Install it from npm (0.3.0 is an early developer preview):

```sh
npm install @bloxwap/chart
```

In React, render the component (React is an optional peer dependency):

```tsx
import { Chart } from '@bloxwap/chart/react';

<Chart data={candles} theme="dark" height={360} />; // candles: { time, open, high, low, close, volume? }[], UNIX seconds
```

Without React, put a canvas inside an element with a height; `autoResize` makes the chart fill it and follow its size:

```ts
import { createChart } from '@bloxwap/chart';

const chart = createChart({
  container: document.querySelector('canvas')!,
  autoResize: true,
  theme: 'dark',
  config: { data: candles },
});
chart.addIndicator({ name: 'sma', params: { period: 20 } });
chart.addDrawing({ name: 'fib', points: [{ index: 10, price: 95 }, { index: 90, price: 110 }] });
```

Add the toolbar with `createDrawingToolbar({ chart, document, canvas, rail, overlay })` from `@bloxwap/chart/ui`.

## Docs

- [Introduction](https://bloxwap.github.io/chart/docs/): What the library is and how its layers fit together.
- [Quick start](https://bloxwap.github.io/chart/docs/getting-started/): Build the package locally and render a first candlestick chart.
- [Data and updates](https://bloxwap.github.io/chart/docs/guides/data/): Supply candles, stream the current bar, add older history, and group changes.
- [Paging datafeed](https://bloxwap.github.io/chart/docs/guides/datafeed/): Load history through one fetch function, page it in on scroll, and fold live ticks into bars.
- [Series and appearance](https://bloxwap.github.io/chart/docs/guides/series/): Renderers (including Heikin Ashi and hollow candles), colors, labels, scales, and themes.
- [Theming and presets](https://bloxwap.github.io/chart/docs/guides/theming-presets/): Brand presets, preset/theme/config layering, scale fonts, and UI CSS variables.
- [Price lines and markers](https://bloxwap.github.io/chart/docs/guides/price-lines-markers/): Live horizontal price references and bar markers.
- [Indicators](https://bloxwap.github.io/chart/docs/guides/indicators/): 20 built-in studies, per-plot styling, the indicator dialog, and custom calculations.
- [Drawings](https://bloxwap.github.io/chart/docs/guides/drawings/): Place, edit, and manage annotations in data coordinates.
- [Toolbar and settings](https://bloxwap.github.io/chart/docs/guides/toolbar-settings/): Drawing rail, navigation, the settings card, and context menus.
- [Header, control rail and scale buttons](https://bloxwap.github.io/chart/docs/guides/header/): Top bar or vertical control rail with timeframes, chart types, indicators, and Auto / % / Log toggles.
- [Touch gestures](https://bloxwap.github.io/chart/docs/guides/touch/): Pan, pinch, fling, and long-press crosshair.
- [Time scale](https://bloxwap.github.io/chart/docs/guides/time-scale/): Bar-indexed or time-continuous axis, and what stays bar-indexed.
- [Chart events](https://bloxwap.github.io/chart/docs/guides/events/): Visible range, crosshair, data load, and layout events and their delivery rules.
- [Snapshots and countdown](https://bloxwap.github.io/chart/docs/guides/snapshots-countdown/): Export images and show the bar-close countdown.
- [React integration](https://bloxwap.github.io/chart/docs/guides/react/): Keep the chart in a ref and manage its lifetime.
- [Rendering and performance](https://bloxwap.github.io/chart/docs/guides/performance/): Batching, caches, animation, and the canvas boundary.
- [Migrating from TradingView](https://bloxwap.github.io/chart/docs/guides/tradingview-migration/): Map Charting Library widget options, overrides, UDF datafeeds, and features to `@bloxwap/chart`.

## API reference

- [Chart API](https://bloxwap.github.io/chart/docs/api/chart/): Construction, data updates, studies, drawings, rendering, cleanup.
- [Configuration](https://bloxwap.github.io/chart/docs/api/configuration/): The single typed configuration object.
- [Scale and coordinates](https://bloxwap.github.io/chart/docs/api/scale/): Visible bars and data/pixel conversion.
- [Package exports](https://bloxwap.github.io/chart/docs/api/exports/): Import the core or a specific integration layer.

## Optional

- [Developer portal](https://bloxwap.github.io/chart/developers/): Quickstart, machine-readable resources, and the sandbox in one place.
- [Interactive playground](https://bloxwap.github.io/chart/docs/playground/): The complete chart on live Hyperliquid data through the paging datafeed, with the header, drawing tools, context menus, and settings.
- [OpenAPI specification](https://bloxwap.github.io/chart/openapi.json): OpenAPI 3.1 description of this site's machine-readable endpoints (this index, the sitemap, the search index).
- [Search index](https://bloxwap.github.io/chart/search.json): Full-text index over all documentation for question answering without crawling.
- [Sitemap](https://bloxwap.github.io/chart/sitemap.xml): Every public page with last modification dates.
- [Development](https://bloxwap.github.io/chart/docs/development/): Run the library and edit these docs.
- [Source code](https://github.com/bloxwap/chart): MIT-licensed repository and issue tracker.
- [Bloxwap](https://bloxwap.github.io/about/): About Bloxwap, Inc., contact, and privacy.