Mesuré à moins de 10 ko de HTML et 400 nœuds SVG sur 1, 3 et 6 séries, au plus 500 points au total par graphique.
Aucun script, aucune police ni image : seul le CSS partagé des graphiques est chargé.
Teinte d’accent
--pp-accent-hue règle la teinte OKLCH en degrés ; clarté et chroma restent ceux du système. Le branchement dans le build de tokens n’est pas fait (#121) : les graphiques ci-dessus utilisent les jetons figés sur la teinte 270.7. Le tableau montre ce que la dérivation donnerait pour la teinte 150, calculée à la construction de la page.
Jetons catégoriels figés et dérivation à une autre teinte
Rang
Figé, teinte 270.7, clair
Dérivé, teinte 150, clair
Dérivé, teinte 150, sombre
--pp-chart-1
oklch(47% 0.19 270.7)
oklch(47% 0.1294 150)
oklch(78% 0.1 150)
--pp-chart-2
oklch(64% 0.1491 60.7)
oklch(68% 0.31 330)
oklch(56% 0.24 315)
--pp-chart-3
oklch(20% 0.0787 30.7)
oklch(20% 0.0986 315)
oklch(88% 0.086 315)
--pp-chart-4
oklch(64% 0.1091 195.7)
oklch(48% 0.095 345)
oklch(52% 0.1235 120)
--pp-chart-5
oklch(44% 0.1781 0.7)
oklch(24% 0.0661 150)
oklch(56% 0.1 180)
--pp-chart-6
oklch(64% 0.2026 285.7)
oklch(64% 0.1346 165)
oklch(92% 0.2184 120)
Accessibilité
Clavier
Le SVG n’est pas interactif et ne reçoit pas le focus.
Le tableau lié se déplie au clavier (élément details natif) et défile au clavier.
Lecteur d’écran
Le SVG porte role="img", nommé par un title et décrit par un desc.
Le desc résume : début, fin, tendance chiffrée, extrêmes, données manquantes, origine non nulle.
Le tableau de toutes les données est lié sous le graphique, dans un details fermé.
Garanti par le composant
Chaque rang a un trait et un marqueur propres : la couleur ne porte jamais seule (WCAG 1.4.1).
Jetons --pp-chart-1..6 en clair et en sombre, contrastes vérifiés ; aucun attribut style.
Zéro JavaScript et aucune animation : rien à retirer sous prefers-reduced-motion: reduce.
Impression : le SVG et le tableau gardent leurs jetons ; le details reste dans l’état choisi.
À la charge de l’intégrateur
Donner un id unique par page (lettres, chiffres, tirets) : il relie le titre et le résumé.
Écrire un titre qui dit ce que le graphique montre, pas seulement son sujet.
Fournir un jeu de données valide : sinon le build échoue avec son code d’erreur.
Propriétés
Propriétés de LineChart
Propriété
Type
Défaut
Description
id (obligatoire)
string
—
Préfixe unique des ids du titre et de la description : lettres, chiffres et tirets.
title (obligatoire)
string
—
Titre du graphique, premier élément de son nom accessible.
dataset (obligatoire)
Dataset
—
Jeu de données (`schema: 1`) : validé, sinon le build échoue avec le code d'erreur.
locale
string
'fr'
Locale des nombres et des dates. Défaut : `fr`.
tableLabel
string
—
Libellé du tableau de données lié.
emptyLabel
string
—
Message de l'état vide (aucune valeur présente).
errorLabel
string
—
Début du message d'erreur de rendu ; le code d'erreur le suit.
class
string
—
Réservé au placement du composant dans son parent.