Composant · Données

ColumnRangeChart

Documenté

ColumnRangeChart trace une barre allant d'une valeur basse à une valeur haute par catégorie. Idéal pour visualiser des intervalles : températures min/max, fourchettes de prix, plages de mesures.

Exemples

Orientation verticale

Catégories en abscisse, barres d'intervalle bas→haut sur l'axe des valeurs.

Orientation verticale

Jan: -4 – 3
Avr: 5 – 16
Juil: 15 – 28
Oct: 7 – 18

Voir le code (Svelte)

<div class="chart-wrapper">
  <ColumnRangeChart
    label="Températures min/max par mois"
    orientation="vertical"
    data={[{"category":"Jan","low":-4,"high":3,"tone":"category1"},{"category":"Avr","low":5,"high":16,"tone":"category2"},{"category":"Juil","low":15,"high":28,"tone":"category3"},{"category":"Oct","low":7,"high":18,"tone":"category4"}]}
  />
</div>

Orientation horizontale

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

Orientation horizontale

Studio: 720 – 980
T2: 950 – 1340
T3: 1180 – 1720
T4: 1450 – 2100

Voir le code (Svelte)

<div class="chart-wrapper">
  <ColumnRangeChart
    label="Fourchettes de loyer par type"
    orientation="horizontal"
    data={[{"category":"Studio","low":720,"high":980,"tone":"category5"},{"category":"T2","low":950,"high":1340,"tone":"category6"},{"category":"T3","low":1180,"high":1720,"tone":"category7"},{"category":"T4","low":1450,"high":2100,"tone":"category8"}]}
  />
</div>

API du composant

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

ColumnRangeChartDatum = { category: string; low: number; high: number; tone?: ColumnRangeChartTone } · ColumnRangeChartTone = "category1" | ... | "category8".

Accessibilité

`label` nomme le graphique. Chaque intervalle est résumé 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. Passez `domain` pour partager une même échelle entre plusieurs graphiques d'une grille.

Tokens

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