Créer facilement des graphiques de stats avec Chart.JS
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
57m49
de formation
9
leçons vidéo
5
chapitres
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

Créer facilement des graphiques de stats avec Chart.JS

4.8/5 Trustpilot (1390 avis) Satisfait ou remboursé
57m49
de formation
9
leçons vidéo
5
chapitres

Dans ce cours en ligne, nous allons apprendre à réaliser des graphiques statistiques en utilisant la librairie JavaScript nommée Chart.js
Nous allons apprendre à utiliser cette librairie JS de manière extrêmement simple. Le but n'étant pas de se noyer avec toutes les possibilités qu'offre Chart.js.

Nous allons voir ensemble les trois graphiques les plus utilisés :

  • Le graphique "camembert"
    Un graphique camembert nous permet d'obtenir visuellement des tranches de statistiques.
  • Le graphique en "ligne"
    Un graphique en ligne nous permet d'obtenir une abscisse ainsi qu'une ordonnée afin de mieux apprécier les hausses ou les baisses. Il nous permet également de pouvoir superposer des lignes de statistiques.
  • Le graphique en "barre"
    Un graphique en barre nous permet d'obtenir un visuel de statistique sous la forme d'une barre plus ou moins haute.

Afin d'utiliser ces graphiques et de les mettre en forme, nous utiliserons le langage JavaScript au travers de la librairie Chart.js.
Ceci nous permettra de positionner un certain nombre d'éléments ainsi que de leur mettre de la couleur afin de rendre nos graphiques plus lisibles et plus limpides.

Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

La version de Chart.js utilisée dans ce tuto est la version 3.7
Pour aller plus loin, je propose une formation pour devenir un Pro du développement en JS.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Installation de la librairie Chart.JS
Chapitre 2
Création d'un graphique de type "camembert"
Chapitre 3
Création d'un graphique de type "ligne"
Chapitre 4
Création d'un graphique de type "barre"
Chapitre 5
Pour aller plus loin

Table des matières

Chapitre 1 : Installation de la librairie Chart.JS

13m34
 
Leçon 1Installer la librairie Chart.JS

Chapitre 2 : Création d'un graphique de type "camembert"

19m44
 
Leçon 1Créer notre premier graphique de type "camembert"
Leçon 2Mettre en forme notre graphique
Leçon 3Ajouter des options à notre graphique

Chapitre 3 : Création d'un graphique de type "ligne"

12m01
 
Leçon 1Créer notre graphique de type "ligne"
Leçon 2Superposer deux lignes sur un même graphique

Chapitre 4 : Création d'un graphique de type "barre"

02m21
 
Leçon 1Créer notre graphique de type "barre"

Chapitre 5 : Pour aller plus loin

10m09
 
Leçon 1Positionner le graphique sur la page web
Leçon 2Pour aller plus loin

Aperçus

Avis des apprenants

Détail des avis
2
Commentaires
5/5
Note moyenne
5/5
2
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 21/03/2025
Merci Carl pour ce cours sur Chart.js : clair, structuré et sans surcharge cognitive 📊 ! Manipuler les `datasets`, jongler avec `type: 'pie'`, `'bar'` ou `'line'` devient presque ludique. Mention spéciale à la gestion des `options.plugins` pour personnaliser l'affichage sans prise de tête. Les stats n’ont jamais été aussi stylées 😄. Validé 100%.
Carl Brison
Carl Brison
Merci Alain, pour votre commentaire très gentil ;-)
Bernard Chabloz
Bernard Chabloz
Publié le 22/06/2022
Bel outil! Merci pour sa présentation, agréable et claire comme toujours.
Carl Brison
Carl Brison
Merci beaucoup ;-)))

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Les codes sources de ce tuto

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
18,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
57m49 de vidéo • 5 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 768 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1424 tutos gratuits

Notre politique de protection des données