HFChart
Every pixel drawn by hand. Zero dependencies.
A high-frequency financial charting platform built on a from-scratch canvas rendering engine — no TradingView, no chart library, no framework.
0
Dependencies (front + server)
14
Chart types
8
Technical indicators
~13,200
Instruments across 6 asset classes
18.3 KB
Full embed bundle, gzipped
4,805
Total lines of code
Overview
HFChart is a catalogue-grade platform for high-frequency financial charts where every pixel is drawn by hand on a 2D canvas. There is no TradingView widget, no charting library, and no framework anywhere in the stack — the entire application weighs in at 4,805 lines of code with exactly zero dependencies, front end and server included.
Data flows straight from the open HF Market Data API (hfmarketdata.io), queried directly by the browser across 6 asset classes — indices, ETFs, stocks, futures, crypto, and FX — covering roughly 13,200 instruments. Fourteen chart types, from candlesticks and Heikin-Ashi to Renko, Kagi, Point & Figure, and dynamic percent-comparison of up to 4 symbols, are rendered by a custom engine with linear and log scales, multi-pane layouts, and full touch support including two-finger pinch-zoom.
Beyond charting, HFChart ships an Options Lab built on real historical option chains going back to 2010: dated chains as they traded that day, a multi-leg strategy builder with presets, exact payoff analysis with aggregated Greeks, and a day-by-day historical replay that marks positions to market using actual contract prices — not a Black-Scholes simulation. An export button generates a fully interactive, self-contained embed snippet that makes zero network requests.
Key Features
14 chart types
Candles, hollow candles, OHLC bars, line, step, area, baseline, Heikin-Ashi, Renko, Three-Line Break, Range Bars, Kagi, Point & Figure, and percent comparison — all hand-rendered.
From-scratch canvas engine
A custom 867-line rendering engine handles panes, linear/log scales, axes, crosshair, and zoom/pan/pinch, with a high-density fast path that switches to hi-lo strokes below 2 px per bar.
8 built-in indicators
SMA, EMA, Bollinger, session VWAP with ±2σ bands, and volume profile with POC as overlays, plus RSI, MACD, and ATR in dedicated panes — every calculation implemented from scratch.
Options Lab
Real historical option chains since 2010 with quotes, IV, open interest, and Greeks, a multi-leg builder with presets from covered calls to iron condors, and exact payoff analysis.
Real historical replay
Mark-to-market a strategy day by day through expiry using actual historical contract prices — with a slider, realized P&L, and daily Greeks — not a Black-Scholes simulation.
Self-contained embeds
The export button generates an HTML snippet with the data baked in, so the pasted chart stays fully interactive while making zero network requests — one 18.3 KB gzipped script.
Percent comparison mode
Overlay up to 4 symbols with dynamic rebasing on the first visible bar, so every zoom and pan recomputes relative performance on the fly.
Colorblind-safe by design
The classic green/red scheme is doubled by a blue/red pair that passes every palette-validator check (CVD ΔE 19.2, contrast ≥ 3:1 on both surfaces), with a fixed, never-recycled categorical series order.
Shareable URL state
Symbol, timeframe, chart type, indicators, theme, and comparison sets all encode into the URL, so any view — including Options Lab setups — can be shared as a link.
How It Works
Static host & bundle route
A 109-line pure-stdlib Python server serves the app shell and exposes /embed.js — the full engine (transforms, indicators, renderers, engine, embed bootstrapper) concatenated into a single script with mtime-based caching.
Direct browser data fetch
The browser queries the HF Market Data API directly via a 185-line client; timeframes missing from the data lake are derived client-side by resampling, and timeframe buttons auto-enable through /v1/status as the lake fills.
Series transformation
Raw OHLC bars are reshaped by transforms.js into Heikin-Ashi, Renko (ATR-auto-sized bricks), Kagi, Point & Figure, Three-Line Break, and Range Bars before rendering.
Canvas rendering pipeline
engine.js orchestrates panes, linear/log scales, axes, crosshair, and zoom/pan/pinch interactions while renderers.js draws all 14 chart types plus volume columns, bands, and the volume profile — pixel by pixel.
Export & embed
The export button serializes visible bars, chart type, indicators, and settings into a self-contained snippet that embed-boot.js hydrates into a fully interactive chart with zero network requests; a live iframe variant (?embed=1) is also available.
Tech Stack
Frontend
Server
Data
Testing & Deployment
Highlights
- 4,805 lines of hand-written code with exactly zero dependencies — front end and server
- The complete interactive embed bundle ships at 18.3 KB gzipped (68.5 KB raw)
- 14 chart types and 8 indicators drawn pixel-by-pixel on a 2D canvas — no chart library, no framework
- Options Lab replays real historical option chains since 2010 with actual mark-to-market, not a Black-Scholes simulation
- Colorblind-safe up/down scheme validated at CVD ΔE 19.2 with ≥ 3:1 contrast on both surfaces
- The entire production server is 109 lines of pure Python stdlib
Explore HFChart
High-frequency charts, hand-built canvas engine — the full source is on GitHub.