kline-orderbook-chart
Native Chart Library
The only JavaScript charting library with built-in orderbook heatmap, footprint chart, and liquidation heatmap — all in one <canvas>. Powered by a native high-performance engine. 60 fps with 100K+ candles. Framework agnostic. 380 KB gzip.
Order Flow Visualization
Orderbook Heatmap
Real-time depth matrix rendered behind candles. 100 price levels, color-coded by order size. See where institutional orders cluster.
Footprint Chart
Bid/Ask, Delta, Volume, POC, and Imbalance modes. Full footprint chart rendered in the same canvas element.
Liquidation Heatmap
Leveraged position liquidation clusters overlaid on the price chart. See where cascade events are likely to trigger.
VRVP
Visible Range Volume Profile showing volume distribution at each price level. Identify high-volume nodes and value areas.
TPO Profile
Time Price Opportunity distribution showing where price spent the most time. Identify balance/imbalance zones.
Large Trade Bubbles
Whale order visualization showing individual large trades as sized bubbles on the chart.
Built-in Indicators
Frequently Asked Questions
What makes kline-orderbook-chart unique?
It is the only JavaScript charting library that includes orderbook heatmap, footprint chart, and liquidation heatmap as built-in features — all rendered in a single canvas element. Competing libraries require separate third-party plugins or don't support order flow visualization at all.
How is performance measured?
Benchmarks are run on a standard desktop with 100,000+ candles loaded. The library achieves 60 fps sustained rendering with all features enabled. The native engine uses a custom rendering pipeline optimized for financial data, not a generic canvas framework.
What frameworks are supported?
kline-orderbook-chart is framework agnostic. It works with React, Vue, Svelte, Angular, and vanilla JavaScript. The library provides framework-specific wrappers and examples in the documentation.
How do I install it?
Install via npm: npm install kline-orderbook-chart. Then import and create an instance with your container element. Full documentation and examples are available on GitHub.
Is it open source?
Yes, kline-orderbook-chart is available on GitHub at github.com/PhamNhinh/kline-orderbook-chart and on npm. The library is free to use in both personal and commercial projects.
Get Started with kline-orderbook-chart
Install from npm, read the docs, or try the live demo on our Chart Terminal.