Chart.js est la bibliothèque JavaScript la plus simple pour dessiner des graphiques : barres, courbes, camemberts… En quelques lignes, tu obtiens un graphique animé, responsive et interactif. Dans ce tutoriel, tu vas créer un graphique des visiteurs par mois, puis le rendre dynamique : ajouter des données depuis un formulaire et passer des barres à la courbe. Durée : environ 30 minutes.

Installer Chart.js

Le plus rapide est de charger Chart.js depuis un CDN, avec une simple balise <script> (c'est ce que fait le code ci-dessous, avec la version 4.5.1). Dans un projet qui utilise npm et un outil comme Vite, installe plutôt le paquet :

npm install chart.js

Crée un dossier avec index.html, style.css et script.js.

1. Le HTML : un canvas et un formulaire

Chart.js dessine dans un élément <canvas>. On le place dans une div qui fixera sa hauteur. Comme un canvas n'est qu'une image pour les lecteurs d'écran, role="img" et aria-label décrivent ce qu'il montre.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Graphique dynamique</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <h1>Visiteurs par mois</h1>
    <div class="chart">
      <canvas id="visitors" aria-label="Graphique des visiteurs par mois" role="img"></canvas>
    </div>

    <form id="add-month" class="controls">
      <input name="month" placeholder="Mois (ex. Juil)" required>
      <input name="value" type="number" min="0" placeholder="Visiteurs" required>
      <button type="submit">Ajouter</button>
      <button type="button" id="toggle-type">Barres / courbe</button>
    </form>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Les scripts sont placés en bas de la page : le canvas existe déjà quand ils s'exécutent.

2. Le CSS : donner une taille au graphique

main {
  max-width: 48rem;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: system-ui, sans-serif;
}

/* Chart.js remplit son conteneur : on lui donne une hauteur. */
.chart {
  position: relative;
  height: 20rem;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.controls input,
.controls button {
  padding: 0.5rem 0.75rem;
  font: inherit;
}

C'est le piège numéro un avec Chart.js : un graphique responsive prend la taille de son conteneur. Sans hauteur sur la div, il peut s'aplatir ou grandir sans fin. Le conteneur doit aussi être en position: relative.

3. Le JavaScript : créer puis mettre à jour le graphique

const data = {
  labels: ['Janv', 'Févr', 'Mars', 'Avr', 'Mai', 'Juin'],
  datasets: [{
    label: 'Visiteurs',
    data: [120, 190, 150, 220, 260, 310],
    backgroundColor: 'rgba(37, 115, 125, 0.6)',
    borderColor: '#25737d',
    borderWidth: 2,
  }],
};

const options = {
  responsive: true,
  maintainAspectRatio: false, // Le graphique prend la hauteur de son conteneur.
  scales: { y: { beginAtZero: true } },
};

let chart = new Chart(document.getElementById('visitors'), { type: 'bar', data, options });

// Ajouter un mois : on modifie les données, puis on demande à Chart.js de redessiner.
document.getElementById('add-month').addEventListener('submit', (event) => {
  event.preventDefault();
  const form = event.target;

  chart.data.labels.push(form.month.value);
  chart.data.datasets[0].data.push(Number(form.value.value));
  chart.update();

  form.reset();
  form.month.focus();
});

// Changer de type de graphique : on détruit l'ancien et on en recrée un avec les mêmes données.
document.getElementById('toggle-type').addEventListener('click', () => {
  const type = chart.config.type === 'bar' ? 'line' : 'bar';
  chart.destroy();
  chart = new Chart(document.getElementById('visitors'), { type, data, options });
});

Un graphique Chart.js se décrit avec trois choses :

  • type : 'bar', 'line', 'pie', 'doughnut'… ;
  • data : les étiquettes (labels) et une ou plusieurs séries de valeurs (datasets) ;
  • options : les réglages, ici un axe vertical qui commence à zéro.

Pour le rendre dynamique, on modifie directement chart.data, puis on appelle chart.update() : Chart.js redessine le graphique avec une animation. Pour changer de type de graphique, le plus fiable est de détruire l'ancien (chart.destroy()) et d'en créer un nouveau avec les mêmes données.

4. Tester

  • Le graphique en barres s'affiche avec six mois.
  • Ajoute « Juil » avec 400 visiteurs : une septième barre apparaît en douceur.
  • Clique sur « Barres / courbe » : le même jeu de données s'affiche en courbe.
  • Survole une barre : une infobulle affiche la valeur, sans une ligne de code en plus.

Pour aller plus loin

  • Plusieurs séries : ajoute un second objet dans datasets (par exemple « Inscriptions ») pour comparer deux courbes.
  • Des données réelles : charge un fichier JSON avec fetch, ou une API publique (météo, cours d'une cryptomonnaie…), puis appelle chart.update().
  • Mise à jour en temps réel : avec setInterval, ajoute une valeur toutes les secondes et retire la plus ancienne avec shift().

La documentation officielle de Chart.js (en anglais) détaille tous les types de graphiques et leurs options.