BarChart
À quoi il sert
BarChart compare des catégories par des barres verticales ou horizontales, simples ou groupées, en SVG statique.
Quand l’utiliser
- Comparer des catégories : répartition, classement, volumes par rubrique.
- Grouper jusqu’à six séries par catégorie, par exemple une série par année.
- Montrer des valeurs négatives : l’axe part toujours de zéro, la barre descend sous la ligne.
Quand ne pas l’utiliser
- Pour une évolution continue dans le temps : utiliser LineChart.
- Au-delà de 40 catégories : le build échoue avec le code bar.too-many-categories ; agréger ou passer à une courbe.
- Des libellés génériques trop longs pour la place disponible sont coupés ; l’intégralité reste dans le title et le tableau lié.
- Pour une interaction (survol, tri, infobulle) : le rendu est statique, sans JavaScript.
Exemples
---
import BarChart from '@paulperigault/astro/BarChart.astro';
import type { Dataset } from '@paulperigault/dataviz';
const visites: Dataset = {
schema: 1,
x: { kind: 'category', label: 'Rubrique', values: ['Accueil', 'Guides', 'Journal'] },
series: [{ id: 'visites', label: 'Visites', unit: 'visites', values: [3400, 2600, 700] }],
};
---
<BarChart id="visites-rubrique" title="Visites par rubrique" dataset={visites} orientation="horizontal" showValues />Variantes
Budgets de poids
- Jusqu’à 120 barres (40 catégories × 3 séries, 20 × 6) sous 10 ko et 400 nœuds.
- Cas extrême 40 × 6 : 11,9 ko, moins de 400 nœuds ; hors budget réaliste.
Teinte d’accent
--pp-accent-hue règle la teinte OKLCH en degrés ; clarté et chroma restent ceux du système. Le branchement dans le build de tokens n’est pas fait (#121) : les graphiques ci-dessus utilisent les jetons figés sur la teinte 270.7. Le tableau montre ce que la dérivation donnerait pour la teinte 150, calculée à la construction de la page.
| Rang | Figé, teinte 270.7, clair | Dérivé, teinte 150, clair | Dérivé, teinte 150, sombre |
|---|---|---|---|
| --pp-chart-1 | oklch(47% 0.19 270.7) | oklch(47% 0.1294 150) | oklch(78% 0.1 150) |
| --pp-chart-2 | oklch(64% 0.1491 60.7) | oklch(68% 0.31 330) | oklch(56% 0.24 315) |
| --pp-chart-3 | oklch(20% 0.0787 30.7) | oklch(20% 0.0986 315) | oklch(88% 0.086 315) |
| --pp-chart-4 | oklch(64% 0.1091 195.7) | oklch(48% 0.095 345) | oklch(52% 0.1235 120) |
| --pp-chart-5 | oklch(44% 0.1781 0.7) | oklch(24% 0.0661 150) | oklch(56% 0.1 180) |
| --pp-chart-6 | oklch(64% 0.2026 285.7) | oklch(64% 0.1346 165) | oklch(92% 0.2184 120) |
Accessibilité
Clavier
- Le SVG n’est pas interactif et ne reçoit pas le focus.
- Le tableau lié se déplie au clavier (élément details natif) et défile au clavier.
Lecteur d’écran
- Le SVG porte role="img", nommé par un title et décrit par un desc.
- Le desc résume la plus grande et la plus petite barre et signale les données manquantes.
- Le tableau de toutes les données est lié sous le graphique, dans un details fermé.
Garanti par le composant
- Chaque rang de série a un motif de remplissage en plus de sa couleur (WCAG 1.4.1).
- Jetons --pp-chart-1..6 en clair et en sombre ; aucun attribut style.
- Une valeur manquante laisse un vide et se dit dans le tableau lié, jamais un zéro.
- Zéro JavaScript et aucune animation : rien à retirer sous prefers-reduced-motion: reduce.
- Impression : motifs et tableau conservés, sans dépendre de la couleur.
À la charge de l’intégrateur
- Donner un id unique par page (lettres, chiffres, tirets) : il relie titre, résumé et motifs.
- N’activer showValues que si les valeurs doivent être écrites : tout ou rien, selon la place.
- Fournir un jeu de données valide : sinon le build échoue avec son code d’erreur.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | — | `vertical` (défaut) : catégories en abscisse ; `horizontal` : catégories en ordonnée. |
| showValues | boolean | — | Écrit la valeur dans chaque barre, seulement si toutes y tiennent. |
| id (obligatoire) | string | — | Préfixe unique des ids du titre et de la description : lettres, chiffres et tirets. |
| title (obligatoire) | string | — | Titre du graphique, premier élément de son nom accessible. |
| dataset (obligatoire) | Dataset | — | Jeu de données (`schema: 1`) : validé, sinon le build échoue avec le code d'erreur. |
| locale | string | 'fr' | Locale des nombres et des dates. Défaut : `fr`. |
| tableLabel | string | — | Libellé du tableau de données lié. |
| emptyLabel | string | — | Message de l'état vide (aucune valeur présente). |
| errorLabel | string | — | Début du message d'erreur de rendu ; le code d'erreur le suit. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-chart-1--pp-chart-2--pp-chart-3--pp-chart-4--pp-chart-5--pp-chart-6--pp-color-bg--pp-color-fg--pp-color-line--pp-color-muted--pp-font-family-sans--pp-font-size--1--pp-font-size-0--pp-font-weight-semibold--pp-size-measure--pp-size-rule--pp-size-target-min--pp-space-2xs--pp-space-3xs--pp-space-s--pp-space-xs
Preuves et décisions
- WCAG 1.1.1 Contenu non textuel
- WCAG 1.4.1 Utilisation de la couleur
- ADR-0007 : visualisation de données
- Tests : packages/astro/test/BarChart.test.ts