Bar chart

Candidate

Bar chart compare des valeurs discretes entre categories ou periodes. Il convient aux volumes, taux et classements lorsque la comparaison des hauteurs est plus importante que la continuite d’une courbe.

Preview

Engagement Rate

This week by day

6.3% arrow_upward 0.8% vs last week

Taux d'engagement quotidien du lundi au dimanche

Periode	Engagement rate
Mon	4.2
Tue	5.8
Wed	3.9
Thu	7.1
Fri	6.4
Sat	8.9
Sun	6.3

Anatomy

1. Header : titre et contexte de la mesure.
2. Summary : valeur principale et evolution par rapport a la periode precedente.
3. Plot : axe des categories, axe des valeurs, grille et barres.
4. Hover band : met en contexte la categorie observee.
5. Tooltip : categorie et valeur precise.
6. Legend optionnelle : necessaire a partir de plusieurs series.
7. Data table : alternative textuelle synchronisee avec la vue active.

Series

Property	Usage
key	Cle correspondant aux donnees de chaque vue
label	Nom utilise dans la legende et le tooltip
color	Couleur CSS ou token var(...)

Plusieurs series sont affichees en groupe par defaut. Activer stacked uniquement lorsque le total et sa composition ont un sens commun.

Configuration

Property	Default	Usage
valueFormat	number	compact, number ou percent
metric	aucun	Valeur synthetique affichee dans le header
trend	aucun	Variation par rapport a une reference
trendTone	neutral	positive, negative, neutral
showLegend	plusieurs series	Force ou masque la legende
stacked	false	Empile les series
yMax	automatique	Maximum explicite de l’axe Y
yStepSize	automatique	Intervalle entre les graduations
height	token composant	Hauteur responsive du plot

Les vues temporelles peuvent redefinir metric, trend, trendLabel et trendTone. La synthese reste ainsi coherente avec les donnees selectionnees.

States

Chargement

6.3% arrow_upward 0.8% vs last week

Aucune donnee

Aucune donnee disponible pour cette periode.

Donnees indisponibles

6.3% arrow_upward 0.8% vs last week

Les donnees ne peuvent pas etre affichees pour le moment.

Astro

---
import BarChart from '../components/ui/BarChart.astro';

const series = [
  { key: 'engagement', label: 'Engagement rate', color: '#84159a' },
];

const views = [{
  value: 'week',
  label: '7D',
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  data: { engagement: [4.2, 5.8, 3.9, 7.1, 6.4, 8.9, 6.3] },
  metric: '6.3%',
  trend: '0.8%',
  trendLabel: 'vs last week',
  trendTone: 'positive',
}];
---

<BarChart
  title="Engagement Rate"
  subtitle="This week by day"
  series={series}
  views={views}
  valueFormat="percent"
  yMax={12}
  yStepSize={3}
  ariaLabel="Taux d'engagement quotidien"
/>

Tokens

Bar chart utilise la palette --color-data-series-* a travers les tokens composants --bar-chart-series-*. Les surfaces, textes, axes, grille, tooltip, dimensions, radius et etats utilisent exclusivement les tokens --bar-chart-*.

Comme Line chart, le composant ne porte ni bordure ni padding externe. Il doit etre compose dans une Card ou une surface de page.

Do / Don’t

Do	Don’t
Utiliser une origine zero pour comparer les hauteurs.	Tronquer l’axe pour amplifier artificiellement un ecart.
Garder des categories courtes et ordonnees.	Afficher des labels longs sous chaque barre.
Utiliser le grouped pour comparer quelques series.	Accumuler trop de barres dans une categorie.
Utiliser stacked pour une decomposition de total.	Empiler des valeurs sans relation additive.
Afficher l’unite dans l’axe et le tooltip.	Melanger pourcentages et volumes sur le meme axe.

Accessibility

Le canvas possede un nom accessible et une table equivalente expose les valeurs. Les boutons de periode utilisent aria-pressed. La couleur ne doit pas etre le seul moyen d’identifier une serie : les labels de tooltip et la table restent indispensables.

Status

Candidate. Les series simples, groupees ou empilees, les couleurs configurables, la synthese, les periodes, le tooltip, le hover band et les etats asynchrones sont disponibles.