Bar Chart Animated
Histogramme vertical en HTML : chaque barre pousse depuis le bas avec un petit rebond, l'une après l'autre, au moment où le graphique entre à l'écran.
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 écrites dans le HTML : une liste ul.brc-chart dont chaque li.brc-item porte sa valeur dans data-value et son libellé dans span.brc-label. Au démarrage, le script ajoute dans chaque élément une piste .brc-track (décorative, aria-hidden) qui contient la barre .brc-bar, et un texte .brc-val avec la valeur mise en forme. La hauteur d'une barre vaut valeur ÷ maximum : le maximum est l'attribut data-max de la racine s'il existe, sinon la plus grande valeur de la liste.
Le graphique ne joue pas au chargement de la page mais à son apparition : un IntersectionObserver attend qu'au moins 35 % de la liste soit visible, relit les valeurs, puis ajoute la classe brc-on sur la racine. Chaque barre passe alors de scaleY(0) à scaleY(1) en 1 s avec une courbe cubic-bezier(.34, 1.56, .64, 1) qui dépasse légèrement avant de se poser, avec 0,1 s de décalage par barre. L'animation n'a lieu qu'une fois.
Avec data-show-values sur la racine, une étiquette .brc-tip s'affiche au-dessus de chaque barre et apparaît en fondu juste après elle. Les nombres sont écrits avec Intl.NumberFormat dans la langue de la page (attribut lang le plus proche) : « 1 240 » sur une page française, « 1,240 » sur une page anglaise. data-unit="%" donne un pourcentage localisé, toute autre unité est ajoutée après une espace insécable.
La taille suit le conteneur : la liste prend toute la largeur disponible jusqu'à --brc-max-width et les barres se partagent l'espace sans dépasser --brc-bar-width. Les cinq dégradés d'origine (indigo, violet, magenta, rose, rouge) reviennent en boucle tous les cinq éléments.
Accessibilité
- Lecteur d'écran : la liste est lue comme une vraie liste (« Activité de la semaine, liste de 5 éléments ») et chaque élément donne son libellé suivi de sa valeur, par exemple « Lun 60 ». La valeur vient du texte
.brc-val, présent même quand rien n'est affiché à l'écran. Pensez à adapter l'aria-labelde la liste. - Mouvement réduit : sous
prefers-reduced-motion: reduce, les barres et leurs valeurs sont dessinées tout de suite à leur hauteur finale, sans montée ni fondu. - Rien à manipuler : le graphique ne contient ni bouton ni lien, il ne prend donc pas le focus clavier et ne réagit ni au survol ni au toucher.
- Couleur et lecture : les dégradés ne portent aucune information, la valeur est toujours écrite ; si vous les remplacez, gardez un contraste suffisant avec le fond.
Compatibilité navigateur
HTML, CSS (variables, transform, @keyframes) et un petit script (IntersectionObserver, Intl.NumberFormat). Mesuré le 08/11/2026 dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies indépendantes dans la même page, la seconde attend d'être affichée pour jouer, mouvement réduit, largeur de 390 px, aucune erreur.
Sans IntersectionObserver, les barres jouent tout de suite au chargement. Sans JavaScript, seuls les libellés s'affichent (les hauteurs sont calculées par le script).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0225-root">
<ul class="brc-chart" aria-label="Activité de la semaine">
<li class="brc-item" data-value="60"><span class="brc-label">Lun</span></li>
<li class="brc-item" data-value="90"><span class="brc-label">Mar</span></li>
<li class="brc-item" data-value="45"><span class="brc-label">Mer</span></li>
<li class="brc-item" data-value="75"><span class="brc-label">Jeu</span></li>
<li class="brc-item" data-value="55"><span class="brc-label">Ven</span></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 |
|---|---|---|
Valeurs (HTML — data-value sur chaque li.brc-item) |
60, 90, 45, 75, 55 | Un nombre positif par élément ; ajoutez ou retirez des li pour changer le nombre de barres. Une valeur négative ou absente compte pour 0. |
Maximum de l'échelle (HTML — data-max sur la racine) |
La plus grande valeur | Fixez-le (ex. data-max="100") pour comparer plusieurs graphiques sur la même échelle. |
Valeurs visibles (HTML — data-show-values sur la racine) |
Absent : valeurs lues par les lecteurs d'écran seulement | Présent : chaque barre porte sa valeur au-dessus d'elle. |
Unité (HTML — data-unit sur la racine) |
Aucune | % donne un pourcentage au format de la langue de la page ; toute autre unité (km, h…) est ajoutée après le nombre. |
Couleurs des barres (CSS — --brc-c1 à --brc-c5) |
Dégradés indigo, violet, magenta, rose, rouge | Une valeur de fond par variable (couleur ou dégradé) ; elles se répètent tous les cinq éléments. |
Dimensions (CSS — --brc-height, --brc-max-width, --brc-bar-width, --brc-min-height) |
160 px, 480 px, 48 px, 300 px | Hauteur de la zone des barres, largeur maximale de la liste, largeur maximale d'une barre, hauteur minimale de la racine (mettez 0 dans un petit composant). |
Fond et textes (CSS — --brc-bg, --brc-text, --brc-value) |
#0a0a0f, blanc à 50 %, blanc | Sur un site clair : --brc-bg: transparent et des textes foncés. |
FAQ
hidden ou display: none), la liste n'est pas visible pour l'IntersectionObserver ; la montée se déclenche au moment où le panneau s'affiche, puis ne rejoue plus.data-value avant ce moment. Après, modifier un attribut ne redessine rien : remplacez alors le graphique par une nouvelle copie du HTML et relancez le script.data-value="6.2", data-value="1240") : le script l'écrit lui-même au format de la page, jusqu'à une décimale, avec l'espace des milliers en français et la virgule en anglais.
