Composant · Visualisation

BarChart

Stable

Graphique à barres pour comparer des valeurs catégorielles. Orientation verticale ou horizontale, échelle automatique avec graduations « nice », tons sémantiques par barre, infobulle au survol et liste de valeurs accessible.

Exemples

Vertical (par défaut)

Tokens consommés par jour de la semaine.

Vertical (par défaut)

Lun: 1240
Mar: 1680
Mer: 980
Jeu: 2100
Ven: 1520
Sam: 420
Dim: 310

Voir le code (Svelte)

<div class="chart-wrapper">
  <BarChart
    data={[{"label":"Lun","value":1240},{"label":"Mar","value":1680},{"label":"Mer","value":980},{"label":"Jeu","value":2100},{"label":"Ven","value":1520},{"label":"Sam","value":420},{"label":"Dim","value":310}]}
    label="Tokens consommés par jour"
    width={520}
    height={260}
  />
</div>

Horizontal

Pratique quand les libellés de catégorie sont longs.

Horizontal

Recherche web: 312
Lecture fichier: 248
Exécution shell: 196
Édition: 154
Navigateur: 88

Voir le code (Svelte)

<div class="chart-wrapper">
  <BarChart
    data={[{"label":"Recherche web","value":312},{"label":"Lecture fichier","value":248},{"label":"Exécution shell","value":196},{"label":"Édition","value":154},{"label":"Navigateur","value":88}]}
    orientation="horizontal"
    label="Appels par outil d'agent"
    width={520}
    height={260}
  />
</div>

Tons par barre

Chaque barre peut porter son propre `tone` (`category1` à `category8`).

Tons par barre

Réussi: 86
Réessais: 22
Échecs: 9

Voir le code (Svelte)

<div class="chart-wrapper">
  <BarChart
    data={[{"label":"Réussi","value":86,"tone":"category4"},{"label":"Réessais","value":22,"tone":"category6"},{"label":"Échecs","value":9,"tone":"category8"}]}
    label="Issues des exécutions"
    width={520}
    height={240}
  />
</div>

Étiquettes de valeur

`dataLabels` affiche la valeur sur chaque barre. `true` utilise le formatage par défaut ; un objet accepte `format` (ex. un formateur Intl) et `position` (`outside` par défaut, `inside`/`center` au milieu). Les étiquettes sont `aria-hidden` : les valeurs restent dans la liste accessible.

Étiquettes de valeur

Lun: 1240
Mar: 1680
Mer: 980
Jeu: 2100
Ven: 1520
Sam: 420
Dim: 310

Voir le code (Svelte)

<div class="chart-wrapper">
  <BarChart
    data={[{"label":"Lun","value":1240},{"label":"Mar","value":1680},{"label":"Mer","value":980},{"label":"Jeu","value":2100},{"label":"Ven","value":1520},{"label":"Sam","value":420},{"label":"Dim","value":310}]}
    label="Tokens consommés par jour"
    dataLabels
    width={520}
    height={260}
  />
</div>

API

Prop	Type	Default
`data`	`BarChartDatum[]`	`[]`
`label`	`string`	requis
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`
`domain`	`[number, number]`	auto
`scale`	`"linear" \| "log"`	`"linear"`
`invertAxis`	`boolean`	`false`
`referenceLines`	`ChartReferenceLine[]`	aucune
`bands`	`ChartBand[]`	aucune
`goalLine`	`ChartGoalLine`	aucune
`dataLabels`	`boolean \| { format?; position? }`	aucune
`selectedKeys`	`string[]`	`[]`
`onSelect`	`(key: string) => void`	optionnel
`showLegend`	`boolean`	`false`
`width`	`number`	`480`
`height`	`number`	`240`
`class`	`string`	optionnel

BarChartDatum = { label: string; value: number; tone?: BarChartTone } · BarChartTone = "category1" | … | "category8" (défaut par barre : `category1`).

Ajoute `errorLow` / `errorHigh` sur un datum pour dessiner une barre d’erreur. Les overlays utilisent l’axe de valeur : `axis: "y"` en vertical, `axis: "x"` en horizontal.

Notes d’usage

`label` est obligatoire : il alimente l’`aria-label` du conteneur (`role="img"`). Les valeurs détaillées sont exposées dans une liste accessible hors SVG, sans multiplier les arrêts de tabulation.

L’échelle inclut toujours zéro et les valeurs négatives sont supportées (les barres partent de la ligne du zéro).

`width`/`height` définissent le `viewBox` ; le SVG est mis à l’échelle de façon responsive (`preserveAspectRatio`) à 100 % de la largeur du conteneur.

Tokens utilisés

--st-semantic-data-category1 … --st-semantic-data-category8
--st-component-barChart-gridStroke
--st-component-barChart-axisStroke
--st-component-barChart-labelColor
--st-component-barChart-tooltipBackground
--st-component-barChart-tooltipText
--st-semantic-border-subtle
--st-semantic-border-interactive
--st-semantic-text-secondary
--st-semantic-surface-inverse
--st-semantic-text-inverse
--st-radius-sm