Sparkline
Chiffre-clé avec sa variation et une mini-courbe qui se trace sous lui à son arrivée à l'écran, en vert avec une flèche montante ou en rouge avec une flèche descendante.
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
La série de nombres se met dans data-values sur la racine .fx-0232-root. Si .sprk-value est vide, le script y écrit la dernière valeur ; si .sprk-delta est vide, il y écrit l'évolution entre la première et la dernière, en pourcentage signé (« +12,5 % »). Les deux passent par Intl.NumberFormat dans la langue de la page, avec data-currency pour un montant (« 4 832 € », « $4,832 »), data-unit pour une unité et data-decimals pour les décimales. Un texte que vous écrivez vous-même dans ces deux éléments est gardé tel quel.
Le sens est déduit des données : si la dernière valeur est plus basse que la première, la racine reçoit la classe sprk-down, qui passe la couleur à --sprk-down (rouge) et retourne la flèche ; sinon tout reste en --sprk-up (vert). data-trend="up" ou "down" impose le sens. La courbe est un SVG construit à la taille réelle de .sprk-chart (hauteur --sprk-height), de la plus petite à la plus grande valeur, avec un point sur la dernière ; un ResizeObserver la recalcule si la largeur change.
Quand 35 % de la courbe est visible, la classe sprk-on la trace de gauche à droite en 1,5 s (ease-out), fait apparaître l'aire en 1 s à partir de 0,5 s, puis allume le point final à 1,5 s. Une seule fois.
Accessibilité
- Le chiffre et la variation sont du vrai texte, lus dans l'ordre (« 4 832 € +12,5 % ») ; la flèche est décorative et masquée, le signe du pourcentage porte le sens.
- La courbe a un équivalent :
.sprk-chartporterole="img"et unaria-labelfait dedata-titlesuivi des valeurs au format de la page. - Mouvement réduit : sous
prefers-reduced-motion: reduce, la courbe, l'aire et le point sont affichés d'emblée. - Couleur doublée : le vert et le rouge ne sont jamais seuls, la flèche et le signe disent aussi si ça monte ou baisse. Aucune interaction : rien ne prend le focus.
Compatibilité navigateur
SVG construit en JavaScript, animations CSS sur stroke-dashoffset et opacity, IntersectionObserver, ResizeObserver et Intl.NumberFormat avec signDisplay. Mesuré le 08/11/2026 dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies indépendantes, mouvement réduit, 390 px de large, aucune erreur.
Sans IntersectionObserver, la courbe se trace au chargement. Sans JavaScript, la carte n'affiche que la flèche : écrivez alors la valeur et la variation directement dans le HTML.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0232-root" data-currency="EUR" data-title="Recettes des neuf dernières semaines" data-values="4295,4380,4330,4520,4470,4690,4610,4760,4832">
<div class="sprk-box">
<div class="sprk-header">
<span class="sprk-value"></span>
<span class="sprk-change">
<svg class="sprk-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M12 19V5M5 12l7-7 7 7"></path>
</svg>
<span class="sprk-delta"></span>
</span>
</div>
<div class="sprk-chart" role="img"></div>
</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 |
|---|---|---|
Série (HTML — data-values sur la racine) |
4295,4380,4330,4520,4470,4690,4610,4760,4832 | Au moins deux nombres séparés par des virgules, point décimal. |
Format (HTML — data-currency, data-unit, data-decimals) |
EUR (page FR), USD (page EN) ; 0 décimale pour une devise, 1 sinon |
Devise ISO ou unité libre pour la valeur ; nombre de décimales de 0 à 4. |
Valeur et variation (HTML — texte de .sprk-value et .sprk-delta) |
Vides : calculées à partir de la série | Écrivez votre propre texte pour l'afficher à la place (ex. « +1 260 € cette semaine »). |
Sens (HTML — data-trend="up" ou "down") |
Déduit : baisse si la dernière valeur est sous la première | Impose la couleur et le sens de la flèche. |
Description lue (HTML — data-title) |
« Recettes des neuf dernières semaines » | Début de l'aria-label de la courbe, suivi des valeurs. |
Couleurs (CSS — --sprk-up, --sprk-down, --sprk-text) |
#22c55e, #ef4444, #fff | Couleur en hausse, en baisse, et couleur du chiffre. |
Tailles et fond (CSS — --sprk-height, --sprk-value-size, --sprk-max-width, --sprk-min-height, --sprk-bg) |
40 px, 1.5rem, 280 px, 300 px, #0a0a0f | Hauteur de la courbe, taille du chiffre, largeur maximale du bloc, hauteur minimale de la racine, fond. |
FAQ
--sprk-up et --sprk-down. La flèche suit toujours le sens réel des données, seule la couleur change de signification.data-values, divisé par la première : de 4 295 à 4 832, « +12,5 % ». Si vous voulez une autre comparaison (semaine précédente, objectif), écrivez votre texte dans .sprk-delta.--sprk-min-height: 0 et --sprk-max-width: none, puis disposez .sprk-box en ligne si vous voulez le chiffre à côté de la courbe.
