Line chart

Candidate

Line chart represente une evolution dans le temps. Il convient aux tendances continues, aux comparaisons entre quelques series et aux mesures dont l’ordre chronologique est important.

Preview

Total followers Organic

Evolution des followers totaux et organiques entre octobre et avril
Periode	Total followers	Organic
Oct	19000	12000
Nov	22100	14500
Dec	21000	13200
Jan	26500	17000
Fev	29700	19000
Mar	34400	22400
Avr	39100	25300

Anatomy

Header : titre, contexte et changement de periode.
Plot : axes, grille, lignes, aires et points de survol.
Tooltip : date commune et valeurs des series au point observe.
Crosshair : repere vertical facilitant la comparaison.
Legend : correspondance persistante entre style de ligne et serie.
Data table : alternative textuelle masquee visuellement pour les technologies d’assistance.

Series

Chaque serie declare une cle stable, un label et ses options visuelles.

Property	Values	Default
`key`	Identifiant present dans `view.data`	requis
`label`	Nom affiche dans le tooltip et la legende	requis
`color`	Couleur CSS ou token `var(...)`	palette Data par defaut
`lineStyle`	`solid`, `dashed`	`solid`
`fill`	`true`, `false`	`false`

Limiter une vue a quelques series clairement identifiables. La couleur et le style de trait peuvent etre combines pour ne pas faire reposer la lecture uniquement sur la couleur.

Time ranges

Une vue contient son label d’interface, ses labels d’axe et les valeurs de chaque serie. Les boutons de periode changent reellement les donnees et emettent pixel-chart-range-change avec la valeur selectionnee dans event.detail.value.

States

Aucune donnee disponible pour cette periode.

Les donnees ne peuvent pas etre affichees pour le moment.

Astro

---
import LineChart from '../components/ui/LineChart.astro';

const series = [
  { key: 'followers', label: 'Total followers', color: '#84159a', fill: true },
  { key: 'organic', label: 'Organic', color: '#00bd9d', lineStyle: 'dashed' },
];

const views = [{
  value: '6m',
  label: '6M',
  labels: ['Oct', 'Nov', 'Dec', 'Jan', 'Fev', 'Mar', 'Avr'],
  data: {
    followers: [19000, 22100, 21000, 26500, 29700, 34400, 39100],
    organic: [12000, 14500, 13200, 17000, 19000, 22400, 25300],
  },
}];
---

<LineChart
  title="Audience Growth"
  subtitle="Total followers over time"
  series={series}
  views={views}
  defaultView="6m"
  ariaLabel="Evolution des followers totaux et organiques"
/>

Value formats

Format	Exemple	Usage
`compact`	`26,5 k`	Volumes importants, format par defaut
`number`	`26 500`	Valeurs precises
`percent`	`12,4%`	Taux et proportions

valuePrefix et valueSuffix ajoutent une unite stable dans l’axe et le tooltip.

Tokens

La palette semantique utilise --color-data-series-1 a --color-data-series-6. LineChart consomme uniquement les tokens composants --line-chart-* pour les surfaces, textes, axes, grille, tooltip, series, espacements et dimensions. Le composant ne dessine pas de bordure externe : il est destine a etre compose dans une Card ou une surface de page.

Do / Don’t

Do	Don’t
Utiliser une ligne pour une evolution chronologique.	Relier des categories sans ordre naturel.
Associer couleur et style de trait lorsque les series sont proches.	Differencier les series uniquement par une nuance faible.
Afficher la meme unite sur un axe partage.	Comparer des unites incompatibles sans axe explicite.
Garder les labels de periode courts.	Surcharger l’axe avec toutes les dates disponibles.
Prevoir les etats loading, empty et error.	Laisser une zone blanche lorsque les donnees manquent.

Accessibility

Le canvas possede un nom accessible et une table de donnees equivalente est maintenue lors du changement de periode. Les styles solid et dashed renforcent la distinction des series. Les boutons de periode utilisent aria-pressed, restent accessibles au clavier et conservent un focus visible.

L’implementation repose sur Chart.js, avec un conteneur dedie pour le redimensionnement et une alternative textuelle au canvas conformement a ses recommandations d’accessibilite.

Status

Candidate. Les courbes responsives, series configurables, styles solid/dashed, aires, tooltip, legendes, periodes et etats asynchrones sont disponibles. Les barres, camemberts, jauges et doubles axes restent hors V1.