ProChart

Professional Financial Charting Infrastructure

Canvas-based charting engine for trading platforms. 6 chart types, drawing tools, real-time streaming, and trading integration in a single embeddable library.

Architecture

Multi-Layered
Canvas Engine

Each visual element lives on its own high-performance canvas layer. Layers render independently at 60fps, so panning the grid doesn't repaint candles and toggling indicators won't touch your price axis. All layers are composited for pixel-perfect output.

Grid & Axes

Candlestick Data

Indicators (RSI)

UI Controls

Grid

Candles

RSI

index.html

<!-- 1. Include the library -->
<script src="pro-chart.min.js"></script>

<!-- 2. Add a container -->
<div id="chart" style="width:100%;height:600px"></div>

<script>
// 3. Define a custom data source (e.g. Coinbase)
const coinbase = {
  fetch(params) {
    const pair = params.symbol + '-USD';
    return fetch(
      `https://api.exchange.coinbase.com/products/
       ${pair}/candles?granularity=3600` +
      `&start=${params.from}&end=${params.to}`
    ).then(r => r.json());
  },
  transform(data) {
    return data.map(c => ({
      time:  c[0] * 1000,
      open:  c[3], high: c[2],
      low:   c[1], close: c[4],
      volume: c[5]
    }));
  }
};

// 4. Initialize — built-in + custom exchanges
const chart = new ProChart('#chart', {
  symbol: 'BTC',
  customExchanges: [{
    id: 'coinbase',
    label: 'Coinbase',
    datafeed: coinbase
  }]
});
</script>

Easy Integration

Any Data Source.
Your Rules.

No complex build steps, no framework dependency. Drop a single script tag into any HTML page and bring your own data source with just two functions: fetch and transform.

Zero dependencies — single .js file
Plug any exchange API with { fetch, transform }
Built-in support for Binance, Bybit, OKX & more
Works with vanilla HTML, React, Vue, or any framework

Built for Performance

Everything you need for professional financial charting

6 Chart Types

Candlestick, Hollow Candle, Volume, Bar (OHLC), Line, and Area charts — each optimized for canvas rendering.

Professional Drawing Tools

Trend Lines, Rays, Rectangles, Fibonacci Retracement, Date/Price Range, and Angle tools with full undo/redo support.

Real-Time Data Streaming

Live market data via WebSocket with automatic reconnection, REST polling fallback, and built-in candle caching for instant loads.

Trading Integration

Order Lines and Position Lines rendered directly on the chart. A fluent builder API lets you wire up trade execution in minutes.

Fully Customizable UI

Dock bar, 3 layout presets, zen mode, glassmorphism design, 5 color-blind accessible palettes, and full white-label support.

Single-File Embed

One script tag, zero dependencies. Works with vanilla HTML, React, Vue, or any framework. Production-ready in under 5 minutes.