Composant · Données

StreamgraphChart

Documenté

StreamgraphChart (themeriver) empile plusieurs séries temporelles en aires lissées sur une ligne de base centrée de type « wiggle » : la silhouette est symétrique autour de l'axe, ce qui met en valeur l'évolution relative des séries plutôt que des valeurs absolues. Chaque série prend une couleur catégorielle (category1…8) et apparaît dans la légende.

Exemples

Trafic par canal

Six mois de trafic réparti sur quatre canaux. Les aires lissées sont centrées : l'épaisseur de chaque bande reflète la part du canal dans le total du mois.

Trafic par canal

Direct: 217
Référé: 143
Social: 142
Email: 75
Total: 577

Direct
Référé
Social
Email

Voir le code (Svelte)

<div class="chart-wrapper">
  <StreamgraphChart
    label="Trafic par canal : 2025"
    data={[{"category":"Jan","values":[{"label":"Direct","value":32},{"label":"Référé","value":18},{"label":"Social","value":12},{"label":"Email","value":8}]},{"category":"Fév","values":[{"label":"Direct","value":35},{"label":"Référé","value":22},{"label":"Social","value":16},{"label":"Email","value":10}]},{"category":"Mar","values":[{"label":"Direct","value":30},{"label":"Référé","value":28},{"label":"Social","value":24},{"label":"Email","value":9}]},{"category":"Avr","values":[{"label":"Direct","value":38},{"label":"Référé","value":25},{"label":"Social","value":30},{"label":"Email","value":14}]},{"category":"Mai","values":[{"label":"Direct","value":42},{"label":"Référé","value":20},{"label":"Social","value":26},{"label":"Email","value":18}]},{"category":"Juin","values":[{"label":"Direct","value":40},{"label":"Référé","value":30},{"label":"Social","value":34},{"label":"Email","value":16}]}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`StreamgraphChartDatum[]`	requis
`label`	`string`	requis
`width`	`number`	`480`
`height`	`number`	`240`
`smooth`	`boolean`	`true`
`showLegend`	`boolean`	`true`
`class`	`string`	optionnel

StreamgraphChartDatum = { category: string; values: { label: string; value: number }[] }

Accessibilité

`label` alimente le conteneur `role="img"`. Une liste accessible hors SVG résume le total de chaque série et le total global. Le streamgraph n'a pas d'axe Y numérique absolu : seul l'axe X (catégories temporelles) est gradué.

Notes d'usage

Réservez le streamgraph aux séries empilées dont la somme évolue dans le temps (volumes, parts de marché). Les valeurs non finies ou négatives sont ramenées à 0 : un streamgraph n'empile que des grandeurs ≥ 0. `smooth` (true par défaut) lisse les aires ; passez `false` pour des transitions linéaires.

Tokens

--st-semantic-data-category1 … --st-semantic-data-category8
--st-semantic-border-subtle
--st-semantic-text-secondary
--st-semantic-surface-default
--st-semantic-surface-inverse
--st-semantic-text-inverse
--st-radius-sm