Morphing Pie Chart
Camembert en conic-gradient dont les parts glissent d'un jeu de données au suivant ; la légende recalcule les pourcentages à chaque changement.
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
Le disque .mpie-pie est un conic-gradient de six couleurs dont les limites sont des variables : --mpie-s1 à --mpie-s6, la somme cumulée des parts. Déclarées avec @property comme <percentage>, elles peuvent être animées : quand elles changent, les frontières entre parts tournent en douceur (1,2 s) au lieu de sauter.
Les données sont la légende elle-même : chaque <li class="mpie-slice" data-value="…"> donne une part (2 à 6). Le script divise chaque valeur par le total, pose les limites cumulées sur le disque et écrit le pourcentage arrondi à côté du libellé ; les arrondis sont répartis pour que la somme affichée fasse toujours 100 %. Les valeurs peuvent être des comptes bruts (parcelles, points, kWh).
Pour passer à un autre jeu de données, changez les data-value : un MutationObserver par instance relance le calcul. Le texte .mpie-caption sous le graphique (« État A ») est libre, modifiez-le en même temps pour nommer le nouvel état.
À la première apparition à l'écran (150 ms après), toutes les limites partent de 0 % et glissent ensemble vers leur valeur : le disque, vide au départ (couleur --mpie-track), se remplit dans le sens des aiguilles d'une montre, toutes les parts grandissant en même temps et dans leurs proportions finales.
Accessibilité
- La légende porte les données : c'est une vraie liste
<ul>nommée pararia-label(« Répartition »), chaque élément se lit « libellé, pourcentage ». Le disque estaria-hidden, il n'ajoute rien de plus pour un lecteur d'écran. - Couleur et texte : chaque pastille de légende reprend la couleur de sa part ; le pourcentage écrit évite de devoir comparer des teintes proches (rose et rouge, par exemple).
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la transition des parts est coupée, le disque passe directement au nouvel état et il est plein dès l'affichage. - Changements silencieux : la légende n'est pas une région
aria-live. Si l'utilisateur déclenche lui-même le changement (bouton « Saison suivante »), le focus reste sur son bouton et il peut relire la liste.
Compatibilité navigateur
conic-gradient, @property (pour le glissement), aspect-ratio, MutationObserver, IntersectionObserver. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : à 150 ms d'un changement la première limite est entre l'ancienne et la nouvelle valeur dans les trois moteurs ; deux camemberts indépendants, 390 px, fond blanc, aucune erreur JS.
Sans @property, le camembert est juste mais passe d'un état à l'autre sans animation. Sans JavaScript, le disque reste vide et la légende affiche les libellés sans pourcentage.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0246-root">
<div class="mpie-wrap">
<div class="mpie-pie" aria-hidden="true"></div>
<ul class="mpie-legend" aria-label="Répartition">
<li class="mpie-slice" data-value="30">Part A</li>
<li class="mpie-slice" data-value="25">Part B</li>
<li class="mpie-slice" data-value="25">Part C</li>
<li class="mpie-slice" data-value="20">Part D</li>
</ul>
</div>
<p class="mpie-caption">État A</p>
</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-value sur chaque .mpie-slice (HTML) |
30, 25, 25, 20 | Valeur de la part (n'importe quelle unité, le script calcule les pourcentages). La changer fait glisser le camembert. |
| Nombre de parts (HTML) | 4 | De 2 à 6 éléments .mpie-slice ; au-delà de six, les suivants sont ignorés. |
.mpie-caption (HTML) |
« État A » | Texte libre sous le graphique, à mettre à jour avec les données ; supprimez-le si inutile. |
--mpie-c1 à --mpie-c6 (CSS) |
#8b5cf6, #06b6d4, #f43f5e, #f59e0b, #10b981, #ec4899 | Couleurs des parts et des pastilles de légende, dans l'ordre de la liste. |
--mpie-track (CSS) |
rgba(255,255,255,.08) | Couleur du disque vide, visible avant le remplissage. |
--mpie-size (CSS) |
150px | Diamètre du disque ; il ne dépasse jamais la largeur du conteneur. |
--mpie-speed (CSS) |
1.2s | Durée du glissement entre deux états. |
--mpie-text, --mpie-accent (CSS) |
blanc 70 %, #a78bfa | Couleurs de la légende et du texte d'état. |
--mpie-bg, --mpie-min-height (CSS) |
#0a0a0f, 300px | Fond et hauteur minimale de la racine. |
FAQ
racine.querySelectorAll('.mpie-slice').forEach((li, i) => li.setAttribute('data-value', etat[i])), puis changez le texte de .mpie-caption. Branchez cette fonction sur votre propre bouton, un minuteur ou un onglet..mpie-pie : mask-image: radial-gradient(closest-side, transparent 55%, #000 56%) (et sa forme -webkit-mask-image). Le centre devient transparent, le fond de votre page apparaît dedans.
