Composant · Données

DumbbellChart

Documenté

DumbbellChart relie deux valeurs par catégorie : une ligne horizontale va de la valeur basse à la valeur haute, avec un cercle teinté à chaque extrémité. Idéal pour comparer deux mesures par catégorie : avant/après, objectif/réalisé, min/max.

Exemples

Comparaison de base

Une ligne par catégorie reliant low et high, cercle bas et cercle haut de teintes distinctes.

Comparaison de base

2019
2024

Ingénierie: 62 – 78
Design: 54 – 69
Marketing: 48 – 58
Support: 41 – 49
Ventes: 50 – 72

Voir le code (Svelte)

<div class="chart-wrapper">
  <DumbbellChart
    label="Écart de salaire médian par service"
    lowLabel="2019"
    highLabel="2024"
    data={[{"category":"Ingénierie","low":62,"high":78},{"category":"Design","low":54,"high":69},{"category":"Marketing","low":48,"high":58},{"category":"Support","low":41,"high":49},{"category":"Ventes","low":50,"high":72}]}
  />
</div>

Teintes personnalisées

Passez `lowTone` / `highTone` pour changer les couleurs des cercles, et `lowLabel` / `highLabel` pour la légende.

Teintes personnalisées

Avant
Après

Produit A: 58 – 81
Produit B: 64 – 73
Produit C: 49 – 88
Produit D: 71 – 79

Voir le code (Svelte)

<div class="chart-wrapper">
  <DumbbellChart
    label="Satisfaction avant/après par produit"
    lowTone="category3"
    highTone="category5"
    lowLabel="Avant"
    highLabel="Après"
    data={[{"category":"Produit A","low":58,"high":81},{"category":"Produit B","low":64,"high":73},{"category":"Produit C","low":49,"high":88},{"category":"Produit D","low":71,"high":79}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`DumbbellChartDatum[]`	requis
`label`	`string`	requis
`lowTone`	`"category1" \| ... \| "category8"`	`"category1"`
`highTone`	`"category1" \| ... \| "category8"`	`"category2"`
`lowLabel`	`string`	`"Bas"`
`highLabel`	`string`	`"Haut"`
`width`	`number`	`480`
`height`	`number`	`240`
`class`	`string`	optionnel

DumbbellChartDatum = { category: string; low: number; high: number } · DumbbellChartTone = "category1" | ... | "category8".

Accessibilité

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

Notes d'usage

Fournissez `low` et `high` par catégorie ; l'ordre est normalisé automatiquement. 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-border-strong
--st-semantic-text-secondary
--st-semantic-surface-default
--st-semantic-text-inverse