Composant · Données

BumpChart

Documenté

BumpChart visualise des classements dans le temps avec des courbes qui montent et descendent. Le rang 1 est toujours affiché en haut. Les rangs invalides créent un GAP dans la courbe.

Exemples

Classement des frameworks JS

Évolution des classements de popularité sur quatre ans. Les étiquettes de début et fin identifient chaque série.

Classement des frameworks JS

React: 2022 #1, 2023 #1, 2024 #1, 2025 #1
Vue: 2022 #3, 2023 #2, 2024 #2, 2025 #2
Svelte: 2022 #5, 2023 #4, 2024 #3, 2025 #3
Angular: 2022 #2, 2023 #3, 2024 #4, 2025 #4

Voir le code (Svelte)

<div class="chart-wrapper">
  <BumpChart
    label="Classement des frameworks JS"
    categories={["2022","2023","2024","2025"]}
    data={[{"label":"React","ranks":[1,1,1,1],"tone":"category1"},{"label":"Vue","ranks":[3,2,2,2],"tone":"category2"},{"label":"Svelte","ranks":[5,4,3,3],"tone":"category3"},{"label":"Angular","ranks":[2,3,4,4],"tone":"category4"}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`BumpChartSeries[]`	requis
`categories`	`string[]`	requis
`label`	`string`	requis
`width`	`number`	`480`
`height`	`number`	`300`
`class`	`string`	optionnel

BumpChartSeries = { label: string; ranks: (number | null | undefined)[]; tone?: BumpChartTone } · BumpChartTone = "category1" | ... | "category8"

Accessibilité

`label` alimente le conteneur `role="img"`. Chaque série liste ses classements par catégorie dans une région accessible hors SVG.

Notes d'usage

Les rangs doivent être des entiers ≥ 1. Un `null` ou un nombre non-entier crée un GAP propre sur la ligne concernée. `categories` et `ranks` sont alignés par position.

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