Composant · Données

StackedBarChart

Documenté

Barres empilées : chaque barre cumule plusieurs séries (segments). Couleur par série (palette data-vis), légende dérivée des labels, tooltip par segment au survol et liste accessible des segments hors SVG.

Exemple

Production par trimestre

Q1, Composants: 20
Q1, Tokens: 12
Q1, Docs: 8
Q2, Composants: 26
Q2, Tokens: 10
Q2, Docs: 14
Q3, Composants: 16
Q3, Tokens: 18
Q3, Docs: 11

Composants
Tokens
Docs

Voir le code (Svelte)

<div class="docs-stacked-box">
  <StackedBarChart
    data={[{"label":"Q1","segments":[{"label":"Composants","value":20},{"label":"Tokens","value":12},{"label":"Docs","value":8}]},{"label":"Q2","segments":[{"label":"Composants","value":26},{"label":"Tokens","value":10},{"label":"Docs","value":14}]},{"label":"Q3","segments":[{"label":"Composants","value":16},{"label":"Tokens","value":18},{"label":"Docs","value":11}]}]}
    label="Production par trimestre"
  />
</div>

Légende interactive (toggle de série)

Renseignez hiddenSeries (ids/labels des séries masquées, contrôlé par le parent) et onToggleSeries pour rendre la légende cliquable. Les items deviennent des boutons accessibles (clic, Entrée/Espace, focus visible) avec aria-pressed ; les séries masquées disparaissent du rendu et de la liste accessible, et leur item est stylé « éteint ». Ici la série « Docs » est masquée par défaut.

Légende interactive

Q1, Composants: 20
Q1, Tokens: 12
Q2, Composants: 26
Q2, Tokens: 10
Q3, Composants: 16
Q3, Tokens: 18

Voir le code (Svelte)

<div class="docs-stacked-box">
  <StackedBarChart
    data={[{"label":"Q1","segments":[{"label":"Composants","value":20},{"label":"Tokens","value":12},{"label":"Docs","value":8}]},{"label":"Q2","segments":[{"label":"Composants","value":26},{"label":"Tokens","value":10},{"label":"Docs","value":14}]},{"label":"Q3","segments":[{"label":"Composants","value":16},{"label":"Tokens","value":18},{"label":"Docs","value":11}]}]}
    label="Production par trimestre (Docs masquée)"
    hiddenSeries={["Docs"]}
    onToggleSeries={undefined}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`StackedBarDatum[]`	requis
`label`	`string`	requis (a11y)
`showLegend`	`boolean`	`true`
`hiddenSeries`	`string[]`	`undefined` (tout visible)
`onToggleSeries`	`(seriesId: string) => void`	`undefined`
`width` / `height`	`number`	`480` / `260`

StackedBarDatum = { label, segments: { label, value, tone? }[] }.