Composant · Données

AreaRangeChart

Documenté

AreaRangeChart trace une bande remplie entre une série basse et une série haute le long d'un axe X continu. Idéal pour visualiser une fourchette qui évolue : températures min/max jour par jour, min/max boursier, intervalles de confiance.

Exemples

Bande de base

Bande remplie entre low et high sur un axe X ordinal, avec lignes basse et haute.

Bande de base

Lun: 8 – 17
Mar: 9 – 19
Mer: 11 – 22
Jeu: 10 – 20
Ven: 7 – 16
Sam: 6 – 14
Dim: 9 – 18

Voir le code (Svelte)

<div class="chart-wrapper">
  <AreaRangeChart
    label="Fourchette de température par jour"
    tone="category1"
    data={[{"x":"Lun","low":8,"high":17},{"x":"Mar","low":9,"high":19},{"x":"Mer","low":11,"high":22},{"x":"Jeu","low":10,"high":20},{"x":"Ven","low":7,"high":16},{"x":"Sam","low":6,"high":14},{"x":"Dim","low":9,"high":18}]}
  />
</div>

Bords lissés

Passez `smooth` pour des bords de bande courbés (interpolation douce).

Bords lissés

Jan: 142 – 168
Fév: 151 – 179
Mar: 160 – 191
Avr: 148 – 174
Mai: 156 – 188

Voir le code (Svelte)

<div class="chart-wrapper">
  <AreaRangeChart
    label="Min/max boursier mensuel"
    tone="category4"
    smooth
    data={[{"x":"Jan","low":142,"high":168},{"x":"Fév","low":151,"high":179},{"x":"Mar","low":160,"high":191},{"x":"Avr","low":148,"high":174},{"x":"Mai","low":156,"high":188}]}
  />
</div>

API du composant

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

AreaRangeChartDatum = { x: string | number; low: number; high: number } · AreaRangeChartTone = "category1" | ... | "category8".

Accessibilité

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

Notes d'usage

Fournissez `low` et `high` par point ; l'ordre est normalisé automatiquement. L'axe X est numérique quand tous les `x` sont des nombres finis, sinon ordinal.

Tokens

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