Composant · Données

ErrorBarChart

Documenté

ErrorBarChart affiche, par catégorie, un marqueur au point central (moyenne ou mesure) et une moustache horizontale allant de la borne basse à la borne haute, terminée par un capuchon perpendiculaire à chaque extrémité. Idéal pour visualiser une estimation et son intervalle d'incertitude (écart-type, intervalle de confiance).

Exemples

Intervalle de base

Une moustache par catégorie de low à high, capuchons aux extrémités et marqueur au point central.

Intervalle de base

Temps de réponse moyen par région (± écart-type)

Amérique N.: 142 (118 – 171)
Europe: 96 (81 – 118)
Asie: 188 (152 – 224)
Océanie: 210 (174 – 251)
Afrique: 165 (130 – 205)

Voir le code (Svelte)

<div class="chart-wrapper">
  <ErrorBarChart
    label="Temps de réponse moyen par région (± écart-type)"
    tone="category2"
    data={[{"category":"Amérique N.","value":142,"low":118,"high":171},{"category":"Europe","value":96,"low":81,"high":118},{"category":"Asie","value":188,"low":152,"high":224},{"category":"Océanie","value":210,"low":174,"high":251},{"category":"Afrique","value":165,"low":130,"high":205}]}
  />
</div>

Teinte personnalisée

Passez `tone` pour changer la couleur de la moustache, des capuchons et du marqueur.

Teinte personnalisée

Rendement moyen par lot (intervalle de confiance)

Lot A: 92 (88 – 95)
Lot B: 84 (76 – 90)
Lot C: 88 (82 – 93)
Lot D: 79 (68 – 86)

Voir le code (Svelte)

<div class="chart-wrapper">
  <ErrorBarChart
    label="Rendement moyen par lot (intervalle de confiance)"
    tone="category5"
    data={[{"category":"Lot A","value":92,"low":88,"high":95},{"category":"Lot B","value":84,"low":76,"high":90},{"category":"Lot C","value":88,"low":82,"high":93},{"category":"Lot D","value":79,"low":68,"high":86}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`ErrorBarChartDatum[]`	requis
`label`	`string`	requis
`tone`	`"category1" \| ... \| "category8"`	`"category1"`
`width`	`number`	`480`
`height`	`number`	`240`
`class`	`string`	optionnel

ErrorBarChartDatum = { category: string; value: number; low: number; high: number } · ErrorBarChartTone = "category1" | ... | "category8".

Accessibilité

`label` nomme le graphique. Chaque catégorie est résumée dans une liste accessible avec sa valeur centrale et ses bornes basse → haute.

Notes d'usage

Fournissez `value` (point central), `low` et `high` par catégorie ; l'ordre des bornes est normalisé et la valeur centrale est contrainte entre low et high. Les catégories occupent l'axe vertical, les valeurs l'axe horizontal gradué.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-semantic-border-subtle
--st-semantic-text-secondary
--st-semantic-surface-default
--st-semantic-surface-inverse
--st-semantic-text-inverse