Composant · Données

TimelineChart

Documenté

TimelineChart positionne des événements le long d'un axe horizontal gradué. Chaque événement reçoit un marqueur sur la frise et un libellé alterné au-dessus ou en dessous, relié par un connecteur. La couleur des marqueurs cycle dans la palette catégorielle ; les événements sont triés par position.

Exemples

Histoire d'une entreprise

Jalons positionnés par année. Les libellés alternent au-dessus et en dessous de l'axe pour éviter le chevauchement ; les descriptions enrichissent l'info-bulle et la liste accessible.

Histoire d'une entreprise

2018: Fondation — Création de SENT à Montréal.
2020: Série A — Levée de 5 M$.
2021: Lancement v1
2022: Expansion EU — Ouverture du bureau de Paris.
2024: Série B — Levée de 22 M$.

Voir le code (Svelte)

<div class="chart-wrapper">
  <TimelineChart
    label="Histoire de SENT"
    data={[{"position":2018,"label":"Fondation","description":"Création de SENT à Montréal."},{"position":2020,"label":"Série A","description":"Levée de 5 M$."},{"position":2021,"label":"Lancement v1"},{"position":2022,"label":"Expansion EU","description":"Ouverture du bureau de Paris."},{"position":2024,"label":"Série B","description":"Levée de 22 M$."}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`TimelineChartEvent[]`	requis
`label`	`string`	requis
`width`	`number`	`640`
`height`	`number`	`240`
`class`	`string`	optionnel

TimelineChartEvent = { position: number; label: string; description?: string; tone?: "category1".."category8" }

Accessibilité

`label` alimente le conteneur `role="img"`. Chaque événement expose sa position, son libellé et sa description dans une liste accessible hors SVG.

Notes d'usage

`position` est un nombre (année, jour, index) projeté sur un axe linéaire gradué automatiquement. Les libellés trop longs sont tronqués (ellipsis) pour garder la frise lisible ; le libellé complet reste dans l'info-bulle et la liste accessible.

Tokens

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