Graphique à colonnes ou à barres
Un graphique à colonnes ou à barres est un graphique composé de barres rectangulaires dont la longueur est proportionnelle aux valeurs qu’elles représentent.
Quand l’utiliser
Ce type de graphique sert à comparer des données. S’il y a beaucoup de catégories, il faut utiliser le graphique à barres (horizontal). À l’inverse, s’il y a peu de catégories, il faut utiliser le graphique à colonnes (vertical).
Comment l’utiliser
Un graphique à colonnes ou à barres comprend deux axes dont l’un représente la variable primaire et l’autre la variable secondaire.
La variable primaire est catégorielle. Elle prend des valeurs discrètes, que l’on peut considérer comme des libellés, tels que les mois de l’année, des groupes d’âge, ou des régions du Québec. Certaines variables catégorielles ont des valeurs ordonnées comme la division des objets par taille (petit, moyen, grand). Il est également possible de convertir des variables non catégorielles en groupe, comme pour l’agrégation de données temporelles sur la base de date (par exemple, la division par trimestre en 20XX-Q1, 20XX-Q2, 20XX-Q3, 20XX-Q4, etc.).
La variable primaire est représentée sur l’axe horizontal dans un graphique à colonnes et sur l’axe vertical dans un graphique à barres.
La variable secondaire est numérique. Les valeurs de la variable déterminent la longueur de chaque barre. Ces valeurs peuvent provenir d’une grande variété de sources.
La variable secondaire est représentée sur l’axe vertical dans un graphique à colonnes et sur l’axe horizontal dans un graphique à barres.
Graphique à colonnes
Les colonnes sont un bon choix lorsque l’on a peu de catégories à mettre sur l’abscisse et que l’on compare peu de séries de données.
Un bon graphique à colonnes doit respecter les normes suivantes :
- L’axe vertical commence à zéro;
- L’échelle est à 100 % pour présenter des pourcentages;
- L’utilisation d’un axe vertical commun à tous les petits multiples pour une comparaison aisée;
- Une grille de fond qui ne gêne pas la lecture.
Exemple bureau
Exemple mobile
Graphique à barres
Les barres sont un bon choix lorsque l’on a beaucoup de catégories à comparer, mais peu de périodes.
Un bon graphique à barres doit respecter les normes suivantes :
- L’utilisation de barres pour permettre l’ajout d’un texte horizontal et pouvoir accommoder toutes les catégories;
- Ne pas utiliser d’axe ou de grille de fond, car il y a des libellés directement sur les données;
- Le titre de l’axe directement intégré au graphique;
- L’ajout d’un fond de couleur qui représente le 100 % pour montrer le total possible.
Exemple bureau
Exemple mobile
Informations techniques
Les informations techniques communes à tous les graphiques se trouvent dans la fiche Réalisation de la visualisation de donnée.
Certaines informations techniques sont spécifiques aux graphiques à colonnes et à barres.
Graphique à colonnes
L’espacement entre les colonnes équivaut à 50 % de la largeur d'une colonne.
Les libellés de l'abscisse sont placés vis-à-vis les colonnes correspondantes.
Graphique à barres
L’espacement entre les barres équivaut à 50 % de la hauteur d'une barre.
Le titre de l'axe est placé au-dessus de la première barre. Il a un espacement de 32 px en format bureau et de 24 px en format mobile.
Les libellés de l'axe sont placés à gauche de la barre correspondante avec un espacement de 16 px. Le texte est aligné à droite et est centré verticalement avec la barre.
Le pourcentage est placé à 16 px à droite de la barre pleine correspondante. Il est centré verticalement avec la barre.
CSS du titre de l'axe
font-family: Open Sans;
font-weight: semibold;
font-size: 16px;
line-height: 24px;
color: #223654;
CSS des valeurs de pourcentage
font-family: Open Sans;
font-weight: semibold;
font-size: 14px;
color: #4e5662;
Dernière mise à jour : 6 novembre 2023