spb/hfchart Public
HFChart — la référence des charts haute fréquence : 14 types rendus canvas from scratch (zéro dépendance), données HF Market Data — www.hfchart.io
JavaScript 82.1%
CSS 10%
HTML 5.8%
Python 2.1%
1# HFChart23**La référence des charts financiers haute fréquence — moteur canvas écrit from scratch, zéro dépendance.**45[](https://www.hfchart.io)6[](https://www.hfmarketdata.io)7[](#architecture)8[](#le-catalogue)9[](#indicateurs)10[](#options-lab)11[](#options-lab)12[](#embed--snippet-autonome)13[](#interactions)14[](#architecture)15[](#couleurs)1617[](https://www.spboucher.ai)18[](mailto:contact@spboucher.ai)19202122Plateforme-catalogue de graphiques financiers haute fréquence : chaque pixel est23dessiné à la main sur un canvas 2D — **pas de TradingView, pas de lib de charts,24pas de framework**. Les données proviennent de l'API ouverte25[HF Market Data](https://www.hfmarketdata.io) (interrogée directement par le26navigateur), qui couvre **6 classes d'actifs et ~13 000 instruments**.2728---2930## Métriques3132| Métrique | Valeur |33|---|---|34| Dépendances (front + serveur) | **0** |35| Lignes de code totales | **4 805** (dont 1 564 pour l'Options Lab) |36| — moteur de rendu (`engine.js`) | 867 |37| — application (`app.js`) | 688 |38| — renderers (`renderers.js`) | 348 |39| — transformations (`transforms.js`) | 208 |40| — client API (`data.js`) | 185 |41| — indicateurs (`indicators.js`) | 164 |42| — bootstrapper embed (`embed-boot.js`) | 151 |43| — serveur statique (`server.py`, stdlib pur) | 109 |44| Bundle embed complet (`/embed.js`) | 68,5 Ko brut · **18,3 Ko gzip** |45| Types de charts | **14** |46| Indicateurs techniques | **8** |47| Classes d'actifs | 6 (indices, ETF, actions, futures, crypto, FX) |48| Instruments accessibles | ~13 200 |49| Thèmes | clair (défaut) + sombre, sélectionnés — pas dérivés |50| Schémas hausse/baisse | vert/rouge classique + bleu/rouge validé daltonisme |5152## Le catalogue53545556| Type | Rendu |57|---|---|58| **Chandelles** | corps pleins, mèches, fast-path haute densité (< 2 px/barre → traits hi-lo) |59| **Chandelles creuses** | hausse creuse / baisse pleine — lisible sans la couleur |60| **Barres OHLC** | ticks open/close |61| **Ligne · Escalier · Aire · Baseline** | close 2 px, marches, dégradé 3 arrêts, ancre ± |62| **Heikin-Ashi** | chandelles lissées de tendance |63| **Renko** | briques à taille fixe, auto-dimensionnées par ATR, personnalisables |64| **Three-Line Break** | nouvelle barre sur cassure des N dernières |65| **Range Bars** | chaque barre couvre exactement un range fixe |66| **Kagi** | yang épais / yin fin, renversement fixe |67| **Point & Figure** | colonnes de X et O, renversement en boîtes |68| **Comparaison %** | jusqu'à 4 symboles, **rebasage dynamique sur la 1ʳᵉ barre visible** |6970717273## Indicateurs7475SMA · EMA · Bollinger · VWAP de session ±2σ · Profil de volume (POC) —76en overlay, et RSI · MACD · ATR en panes dédiées. Toutes les périodes sont77réglables (menu Réglages). Chaque calcul est implémenté from scratch dans78`indicators.js` (Wilder pour RSI/ATR, σ cumulée pour les bandes VWAP).79808182## Interactions8384- Molette = zoom ancré au curseur · glisser = pan · double-clic = reset85- **Tactile** : pan au doigt, **pinch-zoom à deux doigts**, drawer de symboles86- Crosshair avec lecture OHLCV + variation %, chips de prix/temps87- Échelle logarithmique, extension automatique de l'historique au bord gauche88- Vue table (accessibilité), galerie live des types, état persistant89- **Vues partageables par URL** :9091```92https://www.hfchart.io/?group=etf&symbol=SPY&tf=60&type=renko&inds=rsi,vwap&theme=dark93https://www.hfchart.io/?group=index&symbol=SPX&tf=D&type=compare&compare=NDX,DJI,RUT94https://www.hfchart.io/?panel=gallery95```96979899## Embed — snippet autonome100101Le bouton **Exporter** génère un snippet HTML **avec les données intégrées**102(barres visibles, type, indicateurs, réglages) : le graphe collé dans n'importe103quelle page est pleinement interactif (zoom, pan, crosshair, panes) et ne fait104**aucune requête réseau** pour les données. Un seul script :105106```html107<div id="hfchart-x7k2" style="width:100%;height:420px"></div>108<script>109(window.HFChartEmbedQueue = window.HFChartEmbedQueue || []).push({110 el: "#hfchart-x7k2",111 config: { symbol: "SPX", tf: "1h", type: "candles", theme: "light",112 inds: ["sma20","rsi"], decimals: 2, hasVolume: true,113 bars: [[1700000000, 100.0, 101.2, 99.8, 100.9, 12000], ...] }114});115</script>116<script async src="https://www.hfchart.io/embed.js"></script>117```118119Une variante **iframe live** (`?embed=1`) est aussi proposée.120121122123## Options Lab124125126127Laboratoire de stratégies d'options sur **chaînes historiques réelles depuis1282010** (quotes, IV, open interest, Greeks — API HF Market Data) :129130- **Chaîne datée** : choisissez un ticker + une date passée et voyez la chaîne131 telle qu'elle était ce jour-là — calls/puts côte à côte, filtres |Δ| et132 distance au spot, spot non ajusté (les strikes sont as-traded), ITM ombré,133 chargement paresseux par échéance avec cache.134- **Builder multi-jambes** : clic sur un prix → acheter/vendre ; presets135 covered call, cash-secured put, verticals, iron condor, straddle, strangle.136- **Payoff** : courbe P&L à l'échéance (zones vert/rouge), courbe **T+0**137 estimée via les Greeks (bornée à sa zone de validité locale), breakevens138 exacts, profit/perte max, Greeks agrégés (Δ Γ Θ ν ρ).139- **Replay historique** : mark-to-market **réel** jour par jour jusqu'à140 l'échéance via les prix historiques de chaque contrat — pas une simulation141 Black-Scholes. Slider + P&L réalisé + Greeks du jour.142- Module de calcul **pur et testé** (`options-math.js`, 10 tests `node --test`,143 zéro dépendance) ; vues partageables :144 `options.html?ticker=AAPL&date=2015-08-24&preset=ironcondor&replay=1`.145146> Outil éducatif — pas un conseil en investissement.147148## Couleurs149150Le schéma hausse/baisse classique (vert `#0ca30c` / rouge `#d03b3b`) est doublé151d'un schéma **« Bleu / rouge (daltonisme) »** dont la paire passe tous les152checks du validateur de palette (CVD ΔE 19,2 ; contraste ≥ 3:1 sur les deux153surfaces). Les séries d'indicateurs et de comparaison suivent un ordre154catégoriel fixe validé — jamais recyclé.155156## Architecture157158```159server.py hôte statique (Python stdlib) + route /embed.js (bundle concaténé, cache mtime)160web/index.html shell de l'app161web/css/style.css tokens clair/sombre + layout responsive (drawer mobile)162web/js/engine.js moteur canvas : panes, échelles lin/log, axes, crosshair, zoom/pan/pinch163web/js/renderers.js dessin des 14 types + colonnes de volume + bandes + profil164web/js/transforms.js Heikin-Ashi, Renko, Kagi, PnF, Line Break, Range Bars165web/js/indicators.js SMA/EMA/Bollinger/RSI/MACD/ATR/VWAP/profil de volume166web/js/data.js client API hfmarketdata.io + resampling client (1h→4h, 1J→1S, 5min→15m)167web/js/app.js état, UI, comparaison, galerie, export snippet168web/js/embed-boot.js bootstrapper des graphes intégrés169```170171Les timeframes absents du lac de données sont dérivés côté client, et les172boutons s'activent automatiquement via `/v1/status` quand le lac se remplit.173174## Lancer175176```bash177python3 server.py 8787 # aucune dépendance à installer178# → http://localhost:8787179```180181## Déploiement182183Production : **https://www.hfchart.io** — nœud MacLustr `M4M64b`, PM2184(`hfchart-web` + `hfchart-ngrok`), tunnel ngrok sur domaine custom.185186---187188**Author : Simon-Pierre Boucher** · [contact@spboucher.ai](mailto:contact@spboucher.ai) · [spboucher.ai](https://www.spboucher.ai)189