LineChart

Exemples

Ligne simple

Série hebdomadaire avec axe X ordinal.

<div class="chart-wrapper">
  <LineChart
    data={[{"x":"Lun","y":42},{"x":"Mar","y":65},{"x":"Mer","y":30},{"x":"Jeu","y":85},{"x":"Ven","y":55},{"x":"Sam","y":20},{"x":"Dim","y":15}]}
    label="Requêtes par jour"
    width={520}
    height={260}
  />
</div>

Lissage + aire

`smooth` active la courbe Bézier ; `area` remplit sous la ligne.

<div class="chart-wrapper">
  <LineChart
    data={[{"x":"Jan","y":1.8},{"x":"Fév","y":2.4},{"x":"Mar","y":2.1},{"x":"Avr","y":3.2},{"x":"Mai","y":4.6},{"x":"Jui","y":4.1}]}
    smooth
    area
    tone="category3"
    label="Coût mensuel (k$)"
    width={520}
    height={260}
  />
</div>

Axe X numérique

Quand tous les `x` sont des nombres, l’axe utilise une échelle linéaire et n’affiche qu’une sélection de graduations.

<div class="chart-wrapper">
  <LineChart
    data={[{"x":0,"y":320},{"x":4,"y":290},{"x":8,"y":410},{"x":12,"y":380},{"x":16,"y":510},{"x":20,"y":470},{"x":24,"y":350}]}
    tone="category5"
    label="Latence (ms) sur 24 h"
    width={520}
    height={260}
  />
</div>

Annotations

`annotations` superpose des repères exprimés dans l’espace des données : `region` (bande remplie, derrière la série), `line` (repère d’axe), `point`, `label` (texte) et `shape` (polygone). Chaque repère est ajouté à la liste accessible (« Annotation : … »).

<div class="chart-wrapper">
  <LineChart
    data={[{"x":0,"y":320},{"x":4,"y":290},{"x":8,"y":410},{"x":12,"y":380},{"x":16,"y":510},{"x":20,"y":470},{"x":24,"y":350}]}
    tone="category1"
    label="Latence (ms) annotée"
    width={520}
    height={260}
    annotations={[{"kind":"region","axis":"y","from":450,"to":520,"label":"Hors SLA"},{"kind":"line","axis":"y","value":450,"label":"SLA"},{"kind":"point","x":16,"y":510,"label":"Pic"},{"kind":"label","x":4,"y":290,"text":"Creux","anchor":"middle"}]}
  />
</div>

Curseur synchronisé (contrôlé)

`hoverKey` (la clé d’un point = `String(x)`) pilote le curseur (ligne verticale pointillée + marqueur) et l’infobulle depuis le parent : ici `hoverKey="Mer"`. Le parent partage ainsi un même canal de survol entre plusieurs graphiques alignés. `onHoverKeyChange(key | null)` est émis à chaque survol/sortie, même en mode contrôlé. Sans `hoverKey` (`undefined`), le survol interne reprend la main (rétro-compatible).

<div class="chart-wrapper">
  <LineChart
    data={[{"x":"Lun","y":42},{"x":"Mar","y":65},{"x":"Mer","y":30},{"x":"Jeu","y":85},{"x":"Ven","y":55},{"x":"Sam","y":20},{"x":"Dim","y":15}]}
    tone="category2"
    label="Requêtes (curseur contrôlé)"
    width={520}
    height={260}
    hoverKey="Mer"
  />
</div>

API

LineChartDatum = { x: number | string; y: number; forecast?: boolean } · LineChartTone = "category1" | … | "category8". Si tous les `x` sont numériques, l’axe X devient linéaire ; sinon il est ordinal (réparti uniformément).

Les overlays sont ajoutés à la liste accessible : lignes de référence, bandes, ligne d’objectif et tendance linéaire.

Chaque point peut porter `forecast: true` : il est alors rendu en prévision : segment(s) pointillé(s) avec le ton prévision dédié, y compris le segment entre le dernier point réel et le premier point de prévision (transition continue). Les valeurs concernées sont annoncées « … (prévision) » dans la liste accessible. Sans point en prévision, le rendu est inchangé.

Notes d’usage

`label` est obligatoire : il alimente l’`aria-label` du conteneur (`role="img"`). Les couples `x : y` sont exposés dans une liste accessible hors SVG, sans multiplier les arrêts de tabulation.

L’axe Y est rembourré (~8 %) autour des valeurs et utilise des graduations « nice » ; le domaine ne force pas le zéro.

`width`/`height` définissent le `viewBox` ; le SVG est mis à l’échelle de façon responsive (`preserveAspectRatio`) à 100 % de la largeur du conteneur.

Tokens utilisés

• --st-semantic-data-category1 … --st-semantic-data-category8
• --st-component-lineChart-gridStroke
• --st-component-lineChart-axisStroke
• --st-component-lineChart-labelColor
• --st-component-lineChart-forecastStroke
• --st-component-lineChart-tooltipBackground
• --st-component-lineChart-tooltipText
• --st-semantic-border-subtle
• --st-semantic-border-interactive
• --st-semantic-text-secondary
• --st-semantic-surface-default
• --st-semantic-surface-inverse
• --st-semantic-text-inverse
• --st-radius-sm