SPB Git

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

chartscanvasfinancehftzero-dependencyohlcv
JavaScript 82.1% CSS 10% HTML 5.8% Python 2.1%
8.7 KB
View source Raw Blame History

# HFChart

La référence des charts financiers haute fréquence — moteur canvas écrit from scratch, zéro dépendance.

Live Données Dépendances Types de charts Indicateurs Options Lab Tests Embed gzip Mobile Python CVD safe

Author Contact

HFChart — thème clair

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 (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 4 805 (dont 1 564 pour l'Options Lab)
— 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

Galerie des 14 types

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

Renko Comparaison %

# 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).

Thème sombre + indicateurs

# 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 :
text
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

Mobile 390 px

# 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
<div id="hfchart-x7k2" style="width:100%;height:420px"></div>
<script>
(window.HFChartEmbedQueue = window.HFChartEmbedQueue || []).push({
  el: "#hfchart-x7k2",
  config: { symbol: "SPX", tf: "1h", type: "candles", theme: "light",
            inds: ["sma20","rsi"], decimals: 2, hasVolume: true,
            bars: [[1700000000, 100.0, 101.2, 99.8, 100.9, 12000], ...] }
});
</script>
<script async src="https://www.hfchart.io/embed.js"></script>

Une variante iframe live (?embed=1) est aussi proposée.

Embed autonome dans une page

# Options Lab

Options Lab — bull call spread AAPL août 2015 avec replay réel

Laboratoire de stratégies d'options sur chaînes historiques réelles depuis 2010 (quotes, IV, open interest, Greeks — API HF Market Data) :

  • Chaîne datée : choisissez un ticker + une date passée et voyez la chaîne telle qu'elle était ce jour-là — calls/puts côte à côte, filtres |Δ| et distance au spot, spot non ajusté (les strikes sont as-traded), ITM ombré, chargement paresseux par échéance avec cache.
  • Builder multi-jambes : clic sur un prix → acheter/vendre ; presets covered call, cash-secured put, verticals, iron condor, straddle, strangle.
  • Payoff : courbe P&L à l'échéance (zones vert/rouge), courbe T+0 estimée via les Greeks (bornée à sa zone de validité locale), breakevens exacts, profit/perte max, Greeks agrégés (Δ Γ Θ ν ρ).
  • Replay historique : mark-to-market réel jour par jour jusqu'à l'échéance via les prix historiques de chaque contrat — pas une simulation Black-Scholes. Slider + P&L réalisé + Greeks du jour.
  • Module de calcul pur et testé (options-math.js, 10 tests node --test, zéro dépendance) ; vues partageables : options.html?ticker=AAPL&date=2015-08-24&preset=ironcondor&replay=1.

Outil éducatif — pas un conseil en investissement.

# 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

text
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 · spboucher.ai