Skip to content
Learni
Voir tous les tutoriels
JavaScript

Comment créer des graphiques avec Chart.js en 2026

12 minBEGINNER
Chart.jsJavaScriptVisualisationGraphiques
Read in English

Introduction

Chart.js est une bibliothèque JavaScript open-source légère et puissante pour créer des graphiques interactifs directement dans le navigateur. En 2026, elle reste le choix n°1 pour les développeurs frontend grâce à sa simplicité, sa performance (rendu canvas natif) et son support de plus de 8 types de graphiques : lignes, barres, secteurs, radars, etc. Contrairement à D3.js qui est low-level et complexe, Chart.js est plug-and-play : imaginez un Lego pour les données, où vous assemblez datasets et options en quelques lignes.

Pourquoi l'utiliser ? Pour dashboard analytics, rapports financiers ou visualisations scientifiques sans backend lourd. Ce tutoriel beginner vous emmène des bases (un line chart simple) aux options avancées (animations, tooltips responsives). À la fin, vous saurez créer un dashboard complet. Temps estimé : 15 minutes pour un premier graphique fonctionnel. Tous les codes sont copier-collables et testables en live sur CodePen.

Prérequis

  • Connaissances de base en HTML, CSS et JavaScript (niveau débutant).
  • Un éditeur de code comme VS Code.
  • Un navigateur moderne (Chrome, Firefox).
  • Pas d'installation npm requise : on utilise le CDN pour démarrer instantanément.

Structure HTML de base avec CDN

index.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Premier Chart.js</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
</head>
<body>
  <div style="width: 80%; margin: 0 auto;">
    <canvas id="myChart" width="400" height="200"></canvas>
  </div>
  <script>
    // Code du graphique sera ajouté dans les étapes suivantes
  </script>
</body>
</html>

Ce fichier HTML charge Chart.js via CDN (version 4.4.3 stable en 2026). Le canvas est l'élément clé : c'est la zone de dessin. Style inline pour centrage rapide ; évitez d'oublier le viewport pour le responsive mobile.

Premier graphique : Line Chart

Commençons par un graphique en ligne simple, parfait pour montrer l'évolution temporelle (ex: ventes mensuelles). Chart.js utilise un objet config avec type, data (labels + datasets) et options. Copiez le script dans la balise