Composant · Données

AreaSplineRangeChart

Documenté

AreaSplineRangeChart trace une bande remplie entre une série basse et une série haute le long d'un axe X continu, avec des contours haut et bas toujours lissés (bords courbes). Variante spline d'AreaRange, idéale pour des fourchettes douces : températures min/max, intervalles de confiance, min/max boursier.

Exemples

Bande lissée

Bande remplie entre low et high sur un axe X ordinal, contours haut et bas en courbes spline.

Bande lissée

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">
  <AreaSplineRangeChart
    label="Fourchette de température par jour (lissée)"
    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>

Min/max boursier

Une fourchette mensuelle min/max avec contours lissés et une autre teinte.

Min/max boursier

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

Voir le code (Svelte)

<div class="chart-wrapper">
  <AreaSplineRangeChart
    label="Min/max boursier mensuel"
    tone="category4"
    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`	`AreaSplineRangeChartDatum[]`	requis
`label`	`string`	requis
`tone`	`"category1" \| ... \| "category8"`	`"category1"`
`width`	`number`	`480`
`height`	`number`	`240`
`class`	`string`	optionnel

AreaSplineRangeChartDatum = { x: string | number; low: number; high: number } · AreaSplineRangeChartTone = "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. Le lissage spline est toujours actif. 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