# HFChart
**La référence des charts financiers haute fréquence — moteur canvas écrit from scratch, zéro dépendance.**
[](https://www.hfchart.io)
[](https://www.hfmarketdata.io)
[](#architecture)
[](#le-catalogue)
[](#indicateurs)
[](#embed--snippet-autonome)
[](#interactions)
[](#architecture)
[](#couleurs)
[](https://www.spboucher.ai)
[](mailto:contact@spboucher.ai)
Plateforme-catalogue de graphiques financiers haute fréquence : chaque pixel est
dessiné à la main sur un canvas 2D — **pas de TradingView, pas de lib de charts,
pas de framework**. Les données proviennent de l'API ouverte
[HF Market Data](https://www.hfmarketdata.io) (interrogée directement par le
navigateur), qui couvre **6 classes d'actifs et ~13 000 instruments**.
---
## Métriques
| Métrique | Valeur |
|---|---|
| Dépendances (front + serveur) | **0** |
| Lignes de code totales | **3 240** |
| — moteur de rendu (`engine.js`) | 867 |
| — application (`app.js`) | 688 |
| — renderers (`renderers.js`) | 348 |
| — transformations (`transforms.js`) | 208 |
| — client API (`data.js`) | 185 |
| — indicateurs (`indicators.js`) | 164 |
| — bootstrapper embed (`embed-boot.js`) | 151 |
| — serveur statique (`server.py`, stdlib pur) | 109 |
| Bundle embed complet (`/embed.js`) | 68,5 Ko brut · **18,3 Ko gzip** |
| Types de charts | **14** |
| Indicateurs techniques | **8** |
| Classes d'actifs | 6 (indices, ETF, actions, futures, crypto, FX) |
| Instruments accessibles | ~13 200 |
| Thèmes | clair (défaut) + sombre, sélectionnés — pas dérivés |
| Schémas hausse/baisse | vert/rouge classique + bleu/rouge validé daltonisme |
## Le catalogue
| Type | Rendu |
|---|---|
| **Chandelles** | corps pleins, mèches, fast-path haute densité (< 2 px/barre → traits hi-lo) |
| **Chandelles creuses** | hausse creuse / baisse pleine — lisible sans la couleur |
| **Barres OHLC** | ticks open/close |
| **Ligne · Escalier · Aire · Baseline** | close 2 px, marches, dégradé 3 arrêts, ancre ± |
| **Heikin-Ashi** | chandelles lissées de tendance |
| **Renko** | briques à taille fixe, auto-dimensionnées par ATR, personnalisables |
| **Three-Line Break** | nouvelle barre sur cassure des N dernières |
| **Range Bars** | chaque barre couvre exactement un range fixe |
| **Kagi** | yang épais / yin fin, renversement fixe |
| **Point & Figure** | colonnes de X et O, renversement en boîtes |
| **Comparaison %** | jusqu'à 4 symboles, **rebasage dynamique sur la 1ʳᵉ barre visible** |
## Indicateurs
SMA · EMA · Bollinger · VWAP de session ±2σ · Profil de volume (POC) —
en overlay, et RSI · MACD · ATR en panes dédiées. Toutes les périodes sont
réglables (menu Réglages). Chaque calcul est implémenté from scratch dans
`indicators.js` (Wilder pour RSI/ATR, σ cumulée pour les bandes VWAP).
## Interactions
- Molette = zoom ancré au curseur · glisser = pan · double-clic = reset
- **Tactile** : pan au doigt, **pinch-zoom à deux doigts**, drawer de symboles
- Crosshair avec lecture OHLCV + variation %, chips de prix/temps
- Échelle logarithmique, extension automatique de l'historique au bord gauche
- Vue table (accessibilité), galerie live des types, état persistant
- **Vues partageables par URL** :
```
https://www.hfchart.io/?group=etf&symbol=SPY&tf=60&type=renko&inds=rsi,vwap&theme=dark
https://www.hfchart.io/?group=index&symbol=SPX&tf=D&type=compare&compare=NDX,DJI,RUT
https://www.hfchart.io/?panel=gallery
```
## Embed — snippet autonome
Le bouton **Exporter** génère un snippet HTML **avec les données intégrées**
(barres visibles, type, indicateurs, réglages) : le graphe collé dans n'importe
quelle page est pleinement interactif (zoom, pan, crosshair, panes) et ne fait
**aucune requête réseau** pour les données. Un seul script :
```html
```
Une variante **iframe live** (`?embed=1`) est aussi proposée.
## Couleurs
Le schéma hausse/baisse classique (vert `#0ca30c` / rouge `#d03b3b`) est doublé
d'un schéma **« Bleu / rouge (daltonisme) »** dont la paire passe tous les
checks du validateur de palette (CVD ΔE 19,2 ; contraste ≥ 3:1 sur les deux
surfaces). Les séries d'indicateurs et de comparaison suivent un ordre
catégoriel fixe validé — jamais recyclé.
## Architecture
```
server.py hôte statique (Python stdlib) + route /embed.js (bundle concaténé, cache mtime)
web/index.html shell de l'app
web/css/style.css tokens clair/sombre + layout responsive (drawer mobile)
web/js/engine.js moteur canvas : panes, échelles lin/log, axes, crosshair, zoom/pan/pinch
web/js/renderers.js dessin des 14 types + colonnes de volume + bandes + profil
web/js/transforms.js Heikin-Ashi, Renko, Kagi, PnF, Line Break, Range Bars
web/js/indicators.js SMA/EMA/Bollinger/RSI/MACD/ATR/VWAP/profil de volume
web/js/data.js client API hfmarketdata.io + resampling client (1h→4h, 1J→1S, 5min→15m)
web/js/app.js état, UI, comparaison, galerie, export snippet
web/js/embed-boot.js bootstrapper des graphes intégrés
```
Les timeframes absents du lac de données sont dérivés côté client, et les
boutons s'activent automatiquement via `/v1/status` quand le lac se remplit.
## Lancer
```bash
python3 server.py 8787 # aucune dépendance à installer
# → http://localhost:8787
```
## Déploiement
Production : **https://www.hfchart.io** — nœud MacLustr `M4M64b`, PM2
(`hfchart-web` + `hfchart-ngrok`), tunnel ngrok sur domaine custom.
---
**Author : Simon-Pierre Boucher** · [contact@spboucher.ai](mailto:contact@spboucher.ai) · [spboucher.ai](https://www.spboucher.ai)