📈 Crypto Charts – Multi-Provider (Binance / Bybit / CoinGecko / CoinPaprika)

A high-performance, browser-based cryptocurrency charting tool that aggregates OHLCV market data from multiple providers and renders interactive candlestick charts with advanced indicators using Apache ECharts.

This project is a lightweight, dependency-minimal trading visualization tool designed for:

• Multi-exchange data comparison
• Infinite historical data exploration
• Custom indicator visualization
• Fast, responsive chart rendering

It runs entirely in the browser using vanilla JavaScript and external APIs.

• Candlestick (OHLC) chart

• Logarithmic price scale

• EMA 200 overlay

• Custom volume-based indicator:

  SuperVolume
  

• Dual-panel layout:

  • Top: Price chart
  • Bottom: Indicator scatter plot

Supports 4 data providers:

• BTC, ETH, BNB, SOL, XRP
• DOGE, DOT, KSM, SUI
• ATOM, TRUMP

Each asset is mapped per provider internally.

Dynamic per provider:

• Ultra-short: 1m, 3m, 5m
• Intraday: 15m, 1h, 2h, 6h, 12h
• Swing: 1d, 3d
• Macro: 1w, 1M

• Automatic historical data loading when panning left
• Maintains viewport position after loading
• Graceful fallback for non-paginated APIs

• Smooth zoom & pan (mouse + trackpad)

• Dynamic tooltip with:

  • OHLC values
  • EMA 200
  • Volume
  • Custom indicator

• Auto-adjusting timeframe buttons per provider

• Visual indicator when no more data:

  • 🦕 "Dino mode" appears at historical limit

Each provider implements a unified interface:

{
 mapSymbol(asset),
 fetch(symbol, interval, limit, endTime),
 supportedTimeframes,
 supportsInfinite
}

• fetchBinance()
• fetchBybit()
• fetchCoinGecko()
• fetchCoinPaprika()

All return normalized OHLCV:

{
 time: number (seconds),
 open: number,
 high: number,
 low: number,
 close: number,
 volume: number
}

Global state variables:

currentAsset
currentProvider
currentTimeframe
allData
oldestTimeMs
hasMore
isLoading

EMA = (Close - PrevEMA) * k + PrevEMA
k = 2 / (period + 1)

Safeguards:

• Division-by-zero protection
• Value clamping
• Log-scale compatibility

Built with ECharts 5

• candlestick
• line (EMA 200)
• scatter (indicator)

[ Price Chart (log scale) ]
[ Indicator Panel (log scale) ]

• Inside zoom (mouse)
• Slider (bottom)

Triggered on:

chart.on('datazoom')

Logic:

1. Detect proximity to oldest candle
2. Fetch older data using endTime
3. Prepend dataset
4. Recalculate viewport percentages
5. Restore zoom window

No build step required.

git clone <repo>
cd crypto-charts
open btc_chart.html

python -m http.server 8080

GET /api/v3/klines

GET /v5/market/kline

GET /coins/{id}/ohlc

GET /coins/{id}/ohlcv

Edit:

const ASSETS = {
 NEW: {
 label: 'NEW/USD',
 binance: 'NEWUSDT',
 bybit: 'NEWUSDT',
 gecko: 'new',
 paprika: 'new-new'
 }
}

1. Create fetch function
2. Add config:

PROVIDERS.newProvider = {
 name: 'NewProvider',
 supportedTimeframes: [...],
 mapSymbol: fn,
 fetch: fn,
 supportsInfinite: true/false
}

• No backend → subject to API rate limits

• CoinGecko:

  • No volume data
  • No pagination

• No caching layer

• No WebSocket (REST polling only)

• WebSocket live candles
• Volume profile / order flow
• Drawing tools (trendlines, fibs)
• Indicator library (RSI, MACD)
• Multi-chart layout
• Mobile gesture optimization
• Local caching (IndexedDB)

• Minimal dependencies
• Max performance
• Readable math
• Trader-first UX

MIT License

• Apache ECharts
• Binance, Bybit, CoinGecko, CoinPaprika APIs