Chart Data Labels
Graphique à barres CSS-only : les labels de données surgissent au survol, ancrés au sommet de chaque barre et connectés par une flèche CSS. Zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet est entièrement en CSS — aucun JavaScript. Chaque .chart-bar-group est un flex-direction: column qui empile la barre au-dessus de son label d'axe. Le .chart-data-label est positionné en position: absolute avec bottom: calc(100% + 8px) : il flotte 8 px au-dessus du sommet de la barre, quelle que soit la hauteur de celle-ci, et se centre via translateX(-50%).
L'apparition du label repose sur le sélecteur descendant .chart-bar:hover .chart-data-label. À l'état repos, le label est invisible (opacity: 0) et légèrement décalé vers le bas (translateY(4px)). Au survol, opacity passe à 1 et translateY à 0 en 200 ms — un léger effet « float-up » qui ancre visuellement la valeur à la barre. La barre elle-même reçoit simultanément filter: brightness(1.2) et transform: scaleY(1.04) avec transform-origin: center bottom, ce qui la fait « gonfler » vers le haut sans déplacer sa base.
La flèche indicatrice du label est un pseudo-élément ::after utilisant l'astuce CSS des bordures : largeur 0, border-top-color coloré, les trois autres côtés transparents — ce qui dessine un triangle pointant vers le bas, visuellement relié au sommet de la barre. pointer-events: none sur le label empêche celui-ci de capter les événements souris sur l'espace entre la barre et le label, évitant tout scintillement au passage du curseur.
La « séparation automatique » des labels vient du fait que chaque label suit la hauteur de sa propre barre : deux barres de hauteurs différentes produisent mécaniquement des labels à des niveaux différents. Il n'y a pas d'algorithme de détection de collision — deux barres de hauteurs très proches produiraient des labels côte à côte sans correction.
Accessibilité
- prefers-reduced-motion : absent du code — la
transition: opacity .2s, transform .2ss'exécute sans condition. À ajouter manuellement :@media (prefers-reduced-motion: reduce) { .chart-data-label { transition: none } }. - Navigation clavier : l'effet repose exclusivement sur
:hover. Aucuntabindexni:focus-withinn'est défini sur.chart-bar— un utilisateur clavier ne peut pas afficher les labels. - Contraste du texte :
#fffsurrgba(15, 15, 30, .92)≈ 16:1 — WCAG AAA. Les valeurs texte passent largement AA et AAA. - Lisibilité par les lecteurs d'écran : les valeurs (
72%,53%…) sont dans le DOM et lisibles par les assistants vocaux, même si elles ne sont pas visibles visuellement à l'état repos. - Aucun
roleniaria-labelsur le conteneur.chart-scene— à ajouter (role="img" aria-label="…") pour contextualiser le graphique dans un document accessible.
Compatibilité navigateur
CSS3 pur : flexbox, position absolue, transitions, gradients, pseudo-éléments — supportés dans tous les navigateurs modernes depuis 2016.
Sans transitions CSS, les labels passent directement de caché à visible au survol sans animation — l'information reste accessible. Sur tactile, un tap active l'état <code>:hover</code> et affiche le label ; un tap ailleurs le masque.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="anchor-demo">
<div class="chart-scene">
<div class="chart-bar-group">
<div class="chart-bar chart-bar-1">
<span class="chart-data-label">72%</span>
</div>
<span class="chart-bar-label">Lun</span>
</div>
<div class="chart-bar-group">
<div class="chart-bar chart-bar-2">
<span class="chart-data-label">53%</span>
</div>
<span class="chart-bar-label">Mar</span>
</div>
<div class="chart-bar-group">
<div class="chart-bar chart-bar-3">
<span class="chart-data-label">91%</span>
</div>
<span class="chart-bar-label">Mer</span>
</div>
<div class="chart-bar-group">
<div class="chart-bar chart-bar-4">
<span class="chart-data-label">38%</span>
</div>
<span class="chart-bar-label">Jeu</span>
</div>
<div class="chart-bar-group">
<div class="chart-bar chart-bar-5">
<span class="chart-data-label">65%</span>
</div>
<span class="chart-bar-label">Ven</span>
</div>
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| .chart-bar-N { height } | 110px / 80px / 140px / 60px / 100px | Hauteur de chaque barre — proportionnelle à la valeur de la donnée. Ajustez pour refléter vos vraies métriques. |
| .chart-bar-N { background } | gradient indigo/rose/vert/ambre/orange | Couleur brand par barre — remplacez le linear-gradient() de chaque .chart-bar-N par votre palette. |
| bottom: calc(100% + 8px) | 8px | Espace entre le label et le sommet de la barre. Augmentez à 12px si vous avez des décorations au-dessus des barres. |
| transition: opacity .2s, transform .2s | 0,2s | Durée de l'animation d'entrée/sortie. Réduisez à .12s pour un retour plus vif, augmentez à .35s pour plus de douceur. |
| translateY(4px) → translateY(0) | 4px | Amplitude de l'effet float-up au survol. Mettez 6px pour plus de théâtralité, 2px pour un déplacement quasi imperceptible. |
| background: rgba(15, 15, 30, .92) | .92 | Fond du tooltip — ajustez l'opacité (ex. .75) pour un label semi-transparent, ou changez la couleur pour votre thème clair. |
FAQ
:hover CSS et révèle le label ; un tap ailleurs le masque. Le comportement est fonctionnel mais non optimisé pour le tactile : aucun indicateur visuel ne suggère l'interactivité. Pour mobile, envisagez d'afficher les labels en permanence (opacity: 1) ou de les remplacer par des étiquettes statiques.prefers-reduced-motion. Ajoutez cette règle après le CSS de l'effet : @media (prefers-reduced-motion: reduce) { .chart-data-label { transition: none; } .chart-bar { transition: none; } }. Le label reste visible au survol (opacity: 1), l'animation disparaît simplement.
