Graphique à aires empilées ou à colonnes empilées
Un graphique à aires empilées ou à colonnes empilées permet d’illustrer un changement dans le temps sur peu de périodes ou de montrer une représentation statique de la composition sur peu de catégories.
Quand l’utiliser
Ce type de graphique est utilisé lorsque son objectif est de comparer les totaux et une partie des totaux. Puisque seule une fraction des données est aisément lisible, il est recommandé d’utiliser ce graphique avec parcimonie. En effet, seules les séries de données qui partagent une ligne de base peuvent être facilement comparées.
Comment l’utiliser
Dans un graphique à colonnes ou à aires empilées, la priorité est de faire ressortir la valeur la plus importante. Cette valeur doit être placée au bas du graphique et être affichée dans une couleur distincte.
Les orientations suivantes doivent également être respectées :
- Un axe des Y commençant à zéro;
- Une grille de fond légère pour ne pas gêner la lecture;
- Les données de type « total » clairement différenciées;
- Des intervalles de périodes ou de catégories sur l’axe des X.
Exemple de graphique à aires empilées
Exemple de graphique à colonnes empilées
Variante
Il est possible d’afficher toutes les valeurs en un seul graphique. Les valeurs s’affichent les unes au-dessus des autres. L’ensemble des valeurs représentent le total, mais il est plus difficile d’interpréter la tendance pour chacune d’elles.
Exemple variante graphique à aires empilées
Exemple variante graphique à colonnes empilées
Format mobile
En format mobile, la hauteur de l’espacement entre les lignes est réduite de sorte à pouvoir consulter le graphique dans l’écran, sans avoir à défiler.
Pour le graphique à aires empilées ou à colonnes empilées, chaque segment de valeur s’affiche les uns en dessous des autres. L’axe des Y est répété pour chaque segment contrairement au format bureau.
Exemples en format mobile
Si les segments de valeurs sont tous regroupés en un seul graphique, il n’est pas nécessaire de diviser le tout.
Il suffit d’afficher l’entièreté du graphique dans la page.
Exemples variantes en format 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 à aires empilées et à colonnes empilées.
Graphique à aires empilées
Chaque segment de données est placé l'un à côté de l'autre. Les libellés de l'abscisse sont répétés pour chaque segment, alors que les libellés de l'ordonnée sont seulement présents à gauche du premier segment. Un titre identifiant la donnée mise en valeur est placé au-dessus de chaque segment. Celui-ci est centré horizontalement avec le segment.
Chaque segment doit être identique à l'exception de la donnée mise en valeur. Ils doivent tous avoir les mêmes dimensions, les mêmes échelles sur les axes et le même total. Le total est représenté en Gris 01 derrière chaque segment.
Ce type de graphique utilise une variante de la grille retrouvée dans la fiche sur la réalisation de la visualisation de données. Ici, les tracés sont placés au-dessus des données et sont en blanc. De plus, les libellés de l'ordonnée sont placés à côté des tracés plutôt qu'au-dessus. Chaque libellé est aligné verticalement avec le tracé correspondant et le texte est aligné à droite. Le titre de l'ordonnée est aligné à gauche avec le premier libellé.
CSS du titre des segments
font-family: Open Sans;
font-weight: semibold;
font-size: 16px;
line-height: 24px;
color: #223654;
CSS des libellés et du titre de l'ordonnée
font-family: Open Sans;
font-size: 14px;
color: #6b778a;
CSS de la grille
border: 1.5px solid #ffffff;
Graphique à colonnes empilées
Chaque segment de valeur est placé l'un à côté de l'autre. Les libellés de l'abscisse sont répétés pour chaque segment, alors que les libellés de l'ordonnée sont seulement présents à gauche du premier segment. Un titre identifiant la donnée mise en valeur est placé au-dessus de chaque segment. Celui-ci est centré horizontalement avec le segment.
Les colonnes sont répétées pour chaque segment. L’espacement entre les colonnes équivaut à 50 % de la largeur des colonnes.
Chaque segment doit être identique à l'exception de la donnée mise en valeur. Ils doivent tous avoir les mêmes dimensions, les mêmes échelles sur les axes, les mêmes colonnes et le même total. Le total est représenté en Gris 01 derrière chaque segment.
CSS du titre des segments
font-family: Open Sans;
font-weight: semibold;
font-size: 16px;
line-height: 24px;
color: #223654;
Format mobile
En format mobile, les segments sont placés les uns en dessous des autres. La hauteur de chaque segment est aussi réduite.
Dans ce format, les libellés de l'ordonnée sont répétés pour chaque segment alors que les libellés de l'abscisse sont seulement présents sous le dernier segment. Le titre de l'ordonnée est seulement affiché pour le premier segment.
Variante
Les variantes sont similaires aux graphiques standards à l'exception qu'elles représentent tous les segments de données dans un seul graphique. Les axes sont donc affichés une seule fois et les titres de segments sont remplacés par une légende.
Il est préférable d'utiliser la palette catégorielle plutôt que la palette séquentielle pour identifier les différents segments. Consulter la fiche Couleurs dans la visualisation de données pour plus d'information.
La variante du graphique à aires empilées utilise la même grille que le graphique à aires empilées standard.
Dernière mise à jour : 7 septembre 2023