A TradingView-grade chart.
One tag. Zero dependencies.

wickchart is a modern financial charting Web Component: candles, indicators, live streaming, scenario planning — plus an opt-in drawing toolkit — in a single framework-agnostic element that renders anywhere a <div> does.

Open the full demo npm · wickchart Source on GitHub

The chart below is the real component, live — placed with two HTML tags (<wick-feed> + <wick-chart>) and zero JavaScript.

loading Try it: scroll to zoom · drag to pan · shift-drag to measure · double-click to reset

Everything a trader needs, nothing they don't

Built as one Canvas-rendered element — ~270 KB unminified, held under a 74 KB gzipped CI budget, no framework, no build step.

⌁Zero-dependency streaming

<wick-feed> streams Binance over WebSocket with REST backfill — degrading gracefully to polling, then a synthetic bridge. Or bring your own data with setData() / update().

⧗Information-based bars

One attribute off the clock: aggregate="dollar:50000" builds tick, volume or dollar bars client-side from the raw trade tape — Binance aggTrade WebSocket with paginated backfill, offline synthetic prints, or your own trades endpoint. Quant-grade, zero JavaScript.

⚙Million-bar histories

<wick-chart worker> computes built-in indicators in a Web Worker — at 1M bars the longest main-thread freeze drops ~270 ms → ~56 ms — and streamed ticks patch series incrementally in O(warm-up) instead of recomputing history. Watch it load a million bars live.

ƒ15 built-in indicators + WickScript

SMA, EMA, Bollinger, VWAP, SuperTrend, Donchian, Keltner, RSI, MACD, Stochastic, ATR, OBV, CCI, Williams %R, volume. Need more? Write it inline — expr:{(close - sma(close,20)) / sma(close,20) * 100} — through a hand-written parser, no eval, with vwap(), atr() and friends callable inside expressions and alerts.

✎Drawings, as opt-in bytes

Trendlines & rays, levels, boxes, fibonacci retracements and editable notes — the wickchart-draw plugin (~8 KB gz) adds them without the core growing a single tool. Anchors magnet-snap to bars & OHLC, serialize to JSON, and sync across tabs: draw on one window, it appears on the other.

⌥A real plugin API

addLayer() paints into the render pipeline and claims pointer gestures, with coordinate transforms that extrapolate into future space. The whole surface is ~2 KB — and a CI size budget keeps the core under 74 KB gzipped, so “small” is an invariant, not a promise.

◐Volatility-regime shading

volshading tints the chart by realized-vol percentiles — calm vs hot markets read at a glance, with the regime in the legend.

✦Smart annotations

Volume spikes, gaps, pivot highs/lows and RSI divergences auto-badge themselves with a one-line insight on hover.

⇄Trading tools

Positions with stop/target zones and live P&L, edge-triggered price alerts, an R-multiple risk planner, scenario mode with σ-cones, shift-drag measure, visible-range stats, volume profile with POC/VAH/VAL — plus server-side zones & levels via setOverlays(), and bar replay with paper trading & an equity curve (wickchart-replay + wickchart-paper).

🤖AI-ready summaries

getDataWindow() turns what's on screen into a compact, paste-anywhere summary: trend, vol percentile, patterns, indicator snapshots. All computed locally.

♪Sonification

Price maps to pitch — arrow keys play the chart so trend and shape are audible. A rare accessibility win for screen-reader traders.

⧉Share everything

Chart state round-trips through the URL hash, PNG export is built in, and wickchart/report composes chart + visible-range stats + watermark into one shareable snapshot — while co-view syncs crosshairs, viewport presence bands and shared drawings across tabs over BroadcastChannel, no server.

Two tags to a live chart

No install, no bundler — one script tag from a CDN and pure HTML. That's the whole integration.

<!-- live Binance chart, zero JS -->
<script type="module" src="https://unpkg.com/wickchart/feed"></script>

<wick-feed for="c" binance="BTCUSDT" tf="1h"></wick-feed>
<wick-chart id="c" indicators="sma:20 volume" volshading></wick-chart>
// or npm, with types included
npm install wickchart

// full programmatic control
import WickChart from 'wickchart';
chart.setData(bars);      // [{time,o,h,l,c,v}]
chart.update(bar);        // stream live
chart.getDataWindow();    // AI-ready summary

Also exported: wickchart/core (pure functions — indicators, stats, the WickScript engine), wickchart/feed (the declarative element), wickchart/worker and wickchart/report. The wider family — drawings, replay, paper trading, grid sync, tape and more — is 15 opt-in packages.

From React (or Vue, or Svelte)

npm install wickchart react

import { WickChart } from 'wickchart/react';

// props → attributes · data → bars · onXxx → wick:* events
<WickChart type="candles" indicators="sma:20" volshading
           data={bars} onRange={handleRange} />

The full source of the live React demo is ~130 lines with no build step — every control on that page is React state driving the same element. Vue and Svelte snippets are in the README.