Composant · Données

BulletChart

Documenté

BulletChart est un bullet graph qui compare une mesure à une cible et la positionne par rapport à des bandes qualitatives (faible / moyen / élevé). Idéal pour les tableaux de bord KPI.

Exemples

Orientation horizontale

Chaque rang affiche la mesure (barre foncée), la cible (trait vertical) et les bandes de fond qualitatives.

Orientation horizontale

Revenu: value 82, target 100
NPS: value 67, target 75
Uptime: value 99.2, target 99.5

Voir le code (Svelte)

<div class="chart-wrapper">
  <BulletChart
    label="Objectifs trimestriels"
    data={[{"label":"Revenu","value":82,"target":100,"ranges":[50,80,110]},{"label":"NPS","value":67,"target":75,"ranges":[40,65,90]},{"label":"Uptime","value":99.2,"target":99.5,"ranges":[95,99,100]}]}
  />
</div>

Orientation verticale

Passez `orientation="vertical"` pour un affichage en colonnes.

Orientation verticale

Revenu: value 82, target 100
NPS: value 67, target 75
Uptime: value 99.2, target 99.5

Voir le code (Svelte)

<div class="chart-wrapper">
  <BulletChart
    label="Objectifs : vertical"
    orientation="vertical"
    data={[{"label":"Revenu","value":82,"target":100,"ranges":[50,80,110]},{"label":"NPS","value":67,"target":75,"ranges":[40,65,90]},{"label":"Uptime","value":99.2,"target":99.5,"ranges":[95,99,100]}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`BulletChartDatum[]`	requis
`label`	`string`	requis
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`width`	`number`	`480`
`height`	`number`	`240`
`class`	`string`	optionnel

BulletChartDatum = { label: string; value: number; target: number; ranges?: number[] }

Accessibilité

`label` alimente le conteneur `role="img"`. Les valeurs (value / target) sont exposées dans une liste accessible hors SVG.

Notes d'usage

Fournissez au moins un élément dans `ranges` par donnée pour contextualiser la mesure. La barre démarre toujours à 0 pour refléter l'amplitude réelle.

Tokens

--st-semantic-data-category1
--st-semantic-text-primary
--st-semantic-text-secondary
--st-semantic-border-subtle
--st-semantic-surface-inverse
--st-semantic-text-inverse
--st-radius-sm