1. Origine
Créée en 2013 par Nick Downie, Chart.js s'est imposée comme la référence pour les graphiques JavaScript accessibles. Sa philosophie : couvrir les types de graphiques les plus courants avec une APIsimple, des animations fluides et un poids minimal, là où D3.js offre une flexibilité totale mais avec une courbe d'apprentissage bien plus élevée. Chart.js est maintenu activement et compte parmi les librairies JavaScript les plus étoilées sur GitHub.
2. Utilité
Pour les projets Webflow qui nécessitent des données vivantes (statistiques, métriques de performance), Chart.js permet d'afficher des graphiques interactifs sans infrastructure dédiée. Intégré via CDN dans le custom code, il reçoit ses données depuis un fichier JSON ou une API externe, et génère le graphique nativement dans la page.
3. Fonctionnalités
Chart.js couvre les types de graphiques les plus courants avec une API déclarative : quelques lignes de JavaScript suffisent pour initialiser un graphique fonctionnel et animé.
- 8 types de graphiques natifs : barres, lignes, camemberts, radar, doughnut, etc.
- Animations fluides et transitions configurables
- Responsive : adaptatif à tous les écrans
- Tooltips interactifs personnalisables
- Intégration de données dynamiques : via API ou JSON
4. Cas concrets
→ Pour un rapport annuel en ligne, Chart.js est intégré dans une section Webflow via un embed HTML. Les données sont chargées depuis un fichier JSON. Le client met à jour ses chiffres chaque année sans toucher au code.
→ Pour un dashboard de statistiques lié à une API externe (Airtable, Supabase), un fetch JavaScript est déclenché au chargement de la page (ou à intervalle régulier via setInterval) pour récupérer les données et les passer à Chart.js. Le graphique se met à jour automatiquement, sans rechargement de page.
5. Prix
Chart.js est entièrement gratuit et open source (MIT). Aucun plan payant, aucune limite d'usage, aucune dépendance à un service tiers.
→ Documentation : chartjs.org | CDN : https://cdn.jsdelivr.net/npm/chart.js
6. Questions fréquentes
Chart.js ou D3.js pour un projet Webflow ?
Chart.js est le choix recommandé pour les types de graphiques courants, bien plus rapide à mettre en place. D3.js est à réserver aux visualisations très complexes ou très personnalisées, avec une courbe d'apprentissage significativement plus longue.
Comment intégrer Chart.js dans Webflow ?
Via le script CDN (https://cdn.jsdelivr.net/npm/chart.js) directement depuis les paramètres du site Webflow. Ensuite, via un embed HTML contenant un <canvas> et le code JavaScript d'initialisation. Le graphique s'affiche nativement dans la page.
Chart.js est-il compatible avec les interactions Webflow ?
Oui, on peut déclencher l'animation du graphique via les Webflow Interactions au moment où l'élément entre dans le viewport.
Chart.js est-il léger ?
Oui, la librairie pèse environ 200 Ko en version complète, ou moins de 60 Ko avec un build tree-shaken limité aux types de graphiques utilisés. Pour les projets sensibles aux performances, il est recommandé d'importer uniquement les composants nécessaires plutôt que le bundle complet.
