Composant · Données

DivergentBarChart

Documenté

DivergentBarChart affiche des valeurs positives, négatives et neutres autour d'un axe zéro commun. Il convient aux écarts, sentiments, contributions nettes et balances par catégorie.

Exemples

Sentiment par équipe

Les valeurs positives partent vers la droite, les valeurs négatives vers la gauche et les zéros restent ancrés sur l'axe.

Sentiment par équipe

Support: 18
Risk: -7
Neutral: 0
Adoption: 12

Positive
Negative
Zero

Voir le code (Svelte)

<div class="chart-wrapper">
  <DivergentBarChart
    label="Sentiment par équipe"
    data={[{"label":"Support","value":18},{"label":"Risk","value":-7},{"label":"Neutral","value":0},{"label":"Adoption","value":12}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`DivergentBarChartDatum[]`	requis
`label`	`string`	requis
`domain`	`[number, number]`	auto
`format`	`(value: number) => string`	`formatTick`
`showLegend`	`boolean`	`true`
`width`	`number`	`480`
`height`	`number`	`260`

DivergentBarChartDatum = { label: string; value: number; tone?: "positive" | "negative" | "neutral" }

Accessibilité

`label` alimente le conteneur `role="img"`. Les valeurs filtrées et formatées sont exposées dans une liste accessible hors SVG.

Notes d'usage

Les valeurs non finies sont ignorées. Sans `domain`, l'échelle est symétrique autour de zéro; un `domain` fixe est utilisé seulement s'il est fini, ordonné et traverse zéro.

Tokens CSS

Variable CSS	Description
`--st-component-divergentBarChart-positiveFill`	Couleur des barres positives.
`--st-component-divergentBarChart-negativeFill`	Couleur des barres négatives.
`--st-component-divergentBarChart-neutralFill`	Couleur des valeurs zéro/neutres.
`--st-component-divergentBarChart-zeroStroke`	Trait de l'axe zéro.
`--st-component-divergentBarChart-gridStroke`	Couleur de la grille.
`--st-component-divergentBarChart-labelColor`	Couleur des libellés.