Composant · Données

HistogramChart

Documenté

HistogramChart affiche la distribution d'une variable avec des classes explicites ou des classes générées depuis des valeurs numériques.

Exemples

Classes explicites

Utilisez des libellés de classes quand le découpage vient du produit ou du métier.

Classes explicites

0-10: 4
10-20: 9
20-30: 3
30-40: 7

Voir le code (Svelte)

<div class="chart-wrapper">
  <HistogramChart
    label="Tailles de requête"
    data={[{"label":"0-10","value":4},{"label":"10-20","value":9,"tone":"category6"},{"label":"20-30","value":3},{"label":"30-40","value":7}]}
  />
</div>

Classes générées

`bins` découpe une série numérique en intervalles réguliers.

Classes générées

1-6: 3
6-11: 3
11-16: 3
16-21: 3

Voir le code (Svelte)

<div class="chart-wrapper">
  <HistogramChart
    label="Distribution numérique"
    data={[1,2,3,8,9,10,12,14,15,16,20,21]}
    bins={4}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`HistogramChartDatum[] \| number[]`	requis
`label`	`string`	requis
`bins`	`number`	optionnel
`width`	`number`	`480`
`height`	`number`	`240`
`class`	`string`	optionnel

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

Accessibilité

`label` nomme le graphique. Les classes et leurs effectifs sont rendus dans une liste accessible hors SVG.

Notes d'usage

Évitez de mélanger classes explicites et valeurs brutes dans un même affichage. Choisissez le mode qui correspond à la source des données.

Tokens

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