Composant · Données

LollipopChart

Documenté

LollipopChart représente une valeur par catégorie avec une tige fine surmontée d'une pastille. Plus léger qu'un histogramme à barres pleines, il met l'accent sur la valeur sans surcharger l'encre.

Exemples

Orientation verticale

Catégories en abscisse, tiges montantes vers la valeur.

Orientation verticale

Design: 82
Ingénierie: 74
Produit: 61
Ventes: 48

Voir le code (Svelte)

<div class="chart-wrapper">
  <LollipopChart
    label="Score par équipe"
    orientation="vertical"
    data={[{"label":"Design","value":82,"tone":"category1"},{"label":"Ingénierie","value":74,"tone":"category2"},{"label":"Produit","value":61,"tone":"category3"},{"label":"Ventes","value":48,"tone":"category4"}]}
  />
</div>

Orientation horizontale

Pratique pour des libellés longs ou de nombreuses catégories.

Orientation horizontale

Amérique du Nord: 64
Europe: 52
Asie-Pacifique: 38
Amérique latine: 21

Voir le code (Svelte)

<div class="chart-wrapper">
  <LollipopChart
    label="Adoption par région"
    orientation="horizontal"
    data={[{"label":"Amérique du Nord","value":64,"tone":"category5"},{"label":"Europe","value":52,"tone":"category6"},{"label":"Asie-Pacifique","value":38,"tone":"category7"},{"label":"Amérique latine","value":21,"tone":"category8"}]}
  />
</div>

API du composant

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

LollipopChartDatum = { label: string; value: number; tone?: LollipopChartTone } · LollipopChartTone = "category1" | ... | "category8".

Accessibilité

`label` nomme le graphique. Chaque point est résumé dans une liste accessible avec son libellé et sa valeur.

Notes d'usage

Fournissez `domain` pour partager une même échelle entre plusieurs graphiques d'une grille. Sans domaine, l'échelle s'adapte aux données.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-semantic-border-subtle
--st-semantic-text-secondary
--st-semantic-text-primary