Donut Chart
Graphique en anneau avec total au centre et légende chiffrée : les parts s'allongent l'une après l'autre dans le sens des aiguilles d'une montre quand l'anneau apparaît.
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 sont les éléments de la légende : chaque li de ul.dnc-legend a un libellé et un data-value. Le script additionne les valeurs, dessine dans .dnc-ring un SVG d'un cercle par part (rayon 40, épaisseur --dnc-thickness, 24 par défaut) et donne à chacune une longueur proportionnelle : l'anneau fait toujours exactement le tour, avec un fin espace de 1,5 unité entre deux parts pour qu'elles ne se chevauchent pas.
Au centre, .dnc-total reçoit la somme mise en forme par Intl.NumberFormat dans la langue de la page : data-currency="EUR" donne « 1 240 € » en français, data-currency="USD" « $1,240 » en anglais ; data-unit ajoute une unité (h, kg), data-decimals fixe le nombre de décimales et data-compact abrège (« 12 k »). Un texte écrit dans data-total remplace le calcul. Si le total est trop large pour le trou, sa taille de police est réduite pour tenir, et recalculée quand l'anneau change de taille. Chaque ligne de légende reçoit une pastille et sa valeur dans le même format.
Chaque part démarre à sa place avec une longueur nulle. Quand 35 % de l'anneau est visible, la classe dnc-on donne leur longueur finale aux traits, avec une transition de 1 s (ease-out) décalée de 0,15 s par part : l'anneau se remplit morceau par morceau, une seule fois.
Accessibilité
- Ce qui est lu : le total et son libellé (« 1 240 € Total »), puis la légende, liste nommée par son
aria-labeldont chaque ligne se lit « Logement 480 € ». Le SVG est masqué aux lecteurs d'écran. - Mouvement réduit : sous
prefers-reduced-motion: reduce, la transition est retirée et l'anneau s'affiche complet. - Légende masquable :
data-legend="hidden"retire la légende de l'écran sans la retirer des lecteurs d'écran. - Fond libre : le trou de l'anneau est vraiment vide (pas de disque peint), il laisse voir le fond de votre page, clair ou sombre ; adaptez seulement
--dnc-textet--dnc-muted.
Compatibilité navigateur
SVG créé par le script, transition CSS sur stroke-dasharray, aspect-ratio, IntersectionObserver, ResizeObserver et Intl.NumberFormat (devises, notation abrégée). Mesuré le 08/11/2026 dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : anneau rempli à 100 % (480/320/140/300), deux copies indépendantes, mouvement réduit, 390 px, aucune erreur.
Sans IntersectionObserver, l'anneau se remplit au chargement. Sans JavaScript, il reste la légende (libellés seuls) et le mot « Total ».
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0231-root" data-currency="EUR">
<div class="dnc-ring">
<div class="dnc-center">
<div class="dnc-total"></div>
<div class="dnc-label">Total</div>
</div>
</div>
<ul class="dnc-legend" aria-label="Dépenses du mois">
<li data-value="480">Logement</li>
<li data-value="320">Courses</li>
<li data-value="140">Énergie</li>
<li data-value="300">Sorties</li>
</ul>
</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 |
|---|---|---|
Parts (HTML — li data-value="…" dans .dnc-legend) |
Logement 480, Courses 320, Énergie 140, Sorties 300 | Une ligne par part ; le libellé est le texte du li, la valeur peut être dans n'importe quelle unité. |
Format des nombres (HTML — data-currency ou data-unit sur la racine) |
data-currency="EUR" (page FR), "USD" (page EN) |
Code de devise ISO pour un montant localisé, ou unité libre ajoutée après le nombre. |
Décimales et abréviation (HTML — data-decimals, data-compact) |
0 pour une devise, 1 sinon ; pas d'abréviation | data-decimals="2" pour des centimes ; data-compact écrit « 12 k » au lieu de « 12 000 ». |
Texte du centre (HTML — data-total sur la racine, texte de .dnc-label) |
Somme calculée, « Total » | data-total impose le texte affiché (ex. une moyenne) ; changez le libellé dans le HTML. |
Légende (HTML — data-legend="hidden") |
Visible | Masquée à l'écran, toujours lue. |
Anneau (CSS — --dnc-size, --dnc-thickness, --dnc-total-size) |
180 px, 24 (sur 120), 1.5rem | Diamètre maximal, épaisseur en unités du dessin, taille de départ du total (réduite seule si besoin). |
Couleurs (CSS — --dnc-c1 à --dnc-c6) |
#6366f1, #8b5cf6, #d946ef, #ec4899, #f43f5e, #06b6d4 | Une couleur par part, dans l'ordre de la légende, répétée après six. |
Fond et textes (CSS — --dnc-bg, --dnc-text, --dnc-muted, --dnc-min-height) |
#0a0a0f, blanc, blanc à 50 %, 300 px | Fond de la racine, texte principal, texte secondaire et hauteur minimale. |
FAQ
data-compact (« 128 k € »).--dnc-bg: transparent et foncez --dnc-text et --dnc-muted. Le centre n'est pas peint, il n'y a donc pas de disque noir qui reste au milieu.
