Live Sparkline
Mini-courbe SVG qui suit une série de valeurs : la dernière s'affiche en grand, la courbe se trace à l'apparition puis glisse à chaque nouvelle donnée.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Data comprend 28 effets, dont 1 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Les données vivent dans l'attribut data-values de la racine (nombres séparés par des virgules, point décimal). Le script garde les data-max-points dernières (20 par défaut) et dessine dans le <svg class="lsp-svg"> trois éléments : l'aire sous la courbe (dégradé vers le transparent), le tracé .lsp-line et un point .lsp-dot sur la dernière valeur. L'échelle verticale va du minimum au maximum de la série affichée.
Le dessin se fait en pixels réels : la largeur est lue sur le SVG et un ResizeObserver redessine quand le conteneur change de taille. La hauteur vient de --lsp-height (80 px). L'identifiant du dégradé est créé pour chaque instance, deux courbes ne se marchent donc pas dessus.
Pour ajouter un point, réécrivez data-values : un MutationObserver relance le dessin. Le tracé et l'aire passent à leur nouvelle forme par une transition CSS sur la propriété d (0,5 s), le point glisse avec cx / cy. À la première apparition à l'écran, la ligne se dessine de gauche à droite (stroke-dashoffset, 0,9 s), puis l'aire et le point apparaissent.
La valeur au-dessus de la courbe est mise en forme par Intl.NumberFormat dans la langue de la page, avec data-unit et data-decimals si besoin (« 132 bpm », « 42 % »).
Accessibilité
- Une phrase plutôt qu'un dessin : le bloc
.lsp-chartporterole="img"et unaria-labelrecalculé à chaque mise à jour : nom (data-label), dernière valeur, minimum, maximum et nombre de points. Le SVG et le grand chiffre sontaria-hiddenpour ne pas être lus deux fois. - Pas d'annonce en continu : la courbe n'est pas une région
aria-live, un flux d'un point par seconde serait lu sans arrêt. Si une valeur doit être annoncée (seuil franchi), faites-le dans un message à part. - Mouvement réduit : sous
prefers-reduced-motion: reduce, la courbe, l'aire et le point sont visibles tout de suite et changent de forme sans transition. - Aucune commande : le composant affiche, il n'a rien à atteindre au clavier ni à toucher. Les nouvelles valeurs viennent de votre code, par
data-values.
Compatibilité navigateur
SVG, MutationObserver, ResizeObserver, IntersectionObserver et Intl.NumberFormat. Le glissement de la courbe repose sur la propriété CSS d, que Safari ne gère pas : la courbe y passe d'un coup à sa nouvelle forme (mesuré dans WebKit). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : deux courbes indépendantes, mouvement réduit, 390 px, fond blanc, aucune erreur JS.
Sans JavaScript, seule la valeur écrite dans le HTML s'affiche, le SVG reste vide. Firefox avant la version 97 dessine la courbe mais la fait sauter au lieu de la faire glisser.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0243-root" data-values="48,52,50,57,55,61,58,64,60,67,63,70" data-max-points="20" data-label="Visiteurs en ligne">
<div class="lsp-chart">
<div class="lsp-value" aria-hidden="true">70</div>
<svg class="lsp-svg" aria-hidden="true" focusable="false"></svg>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
data-values (HTML, sur la racine) |
12 valeurs de 48 à 70 | La série, avec le point comme séparateur décimal. Réécrire l'attribut redessine la courbe avec un glissement. |
data-max-points (HTML) |
20 | Nombre de valeurs gardées : les plus anciennes sortent par la gauche. |
data-unit, data-decimals (HTML) |
aucune, 0 | Unité ajoutée à la valeur affichée (% suit les règles de la langue) et nombre de décimales. |
data-label (HTML) |
« Visiteurs en ligne » | Début de la phrase lue par les lecteurs d'écran. |
--lsp-line, --lsp-fill, --lsp-dot, --lsp-value (CSS) |
#6366f1, #6366f1, #a78bfa, #a78bfa | Couleurs du tracé, de l'aire, du point et du chiffre. |
--lsp-height et --lsp-max-width (CSS) |
80px, 480px | Hauteur du graphique et largeur maximale ; en dessous, il suit son conteneur. |
--lsp-speed (CSS) |
.5s | Durée du glissement entre deux formes de la courbe. |
--lsp-bg et --lsp-min-height (CSS) |
#0a0a0f, 300px | Fond et hauteur minimale de la racine ; transparent et 0 dans une carte. |
FAQ
racine.setAttribute('data-values', anciennes + ',' + mesure). Inutile de couper vous-même la liste, le script ne garde que les data-max-points dernières valeurs. Une mise à jour par seconde ou plus lente laisse le temps à la transition de 0,5 s de se jouer.d du tracé SVG. Chrome, Edge et Firefox (97+) la gèrent, Safari non : il dessine directement la nouvelle forme. Les données affichées restent justes, seul le mouvement manque.
