Composant · Données

RadarChart

Documenté

RadarChart compare plusieurs séries sur les mêmes axes polaires. Il convient aux profils de capacité, évaluations multi-critères et écarts cible versus actuel.

Exemples

Capacités produit

Deux séries sur des axes communs avec légende intégrée.

Capacités produit

Actuel, Vitesse: 80
Actuel, Qualité: 65
Actuel, Coût: 45
Actuel, Portée: 70
Cible, Vitesse: 90
Cible, Qualité: 85
Cible, Coût: 70
Cible, Portée: 86

Voir le code (Svelte)

<div class="chart-wrapper">
  <RadarChart
    label="Capacités produit"
    axes={["Vitesse","Qualité","Coût","Portée"]}
    series={[{"label":"Actuel","values":[80,65,45,70]},{"label":"Cible","values":[90,85,70,86],"tone":"category7"}]}
    legend
  />
</div>

Score opérationnel

Un radar peut rester lisible avec une seule série quand les axes restent peu nombreux.

Score opérationnel

Plateforme, Disponibilité: 94
Plateforme, Latence: 72
Plateforme, Coût: 81
Plateforme, Support: 88
Plateforme, Sécurité: 90

Voir le code (Svelte)

<div class="chart-wrapper">
  <RadarChart
    label="Score opérationnel"
    axes={["Disponibilité","Latence","Coût","Support","Sécurité"]}
    series={[{"label":"Plateforme","values":[94,72,81,88,90],"tone":"category4"}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`axes`	`string[]`	requis
`series`	`RadarChartSeries[]`	requis
`label`	`string`	requis
`legend`	`boolean`	`false`
`maxValue`	`number`	optionnel
`levels`	`number`	`4`
`width`	`number`	`360`
`height`	`number`	`320`
`class`	`string`	optionnel

RadarChartSeries = { label: string; values: number[]; tone?: RadarChartTone } · RadarChartTone = "category1" | ... | "category8".

Accessibilité

`label` nomme le graphique. Chaque valeur de série est aussi exposée dans une liste accessible associant série, axe et score.

Notes d'usage

Limitez le nombre d'axes. Au-delà de six axes ou de trois séries, une table ou un graphique en barres groupées sera souvent plus lisible.

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