Responsive Chart
Graphique qui choisit sa forme selon la largeur de sa case : simple courbe quand elle est étroite, histogramme ensuite, puis barres légendées avec mois et valeurs.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0761-root est un conteneur (container: rcx / inline-size). Sous 300 px, seule la courbe SVG .rcx-spark s'affiche (40 px de haut, trait de 2 px qui ne s'étire pas grâce à vector-effect: non-scaling-stroke). De 300 à 449 px, l'histogramme .rcx-bars la remplace sur 80 px. Dès 450 px, les barres montent à 100 px et chaque barre affiche son mois dessous et sa valeur dessus, avec la place réservée par une marge haute de 18 px et basse de 16 px.
Les données vivent dans les barres : data-value pour le nombre, .rcx-bar-label et .rcx-bar-value pour le texte affiché. Au chargement, le script de chaque racine relit ces nombres, recalcule la hauteur de chaque barre par rapport à la plus grande, redessine la courbe avec les mêmes valeurs et réécrit le résumé aria-label. Changer une barre suffit pour que les trois formes restent d'accord.
Le HTML livré contient déjà les hauteurs, la courbe et le résumé calculés : sans JavaScript, le graphique d'exemple s'affiche à l'identique. Rien ne s'anime ; le changement de forme est immédiat.
Accessibilité
- Résumé lisible : la zone
.rcx-plotest unrole="img"dont l'aria-labelénumère toutes les valeurs (« Ventes mensuelles — Jan 12 k, Fév 16 k… »), quelle que soit la forme affichée ; le titre est une vraie<figcaption>. - Couleurs : quatre violets alternés par
:nth-child(4n…); ils servent au rythme visuel, pas à coder une donnée, donc aucune information ne repose sur la couleur. - Petites tailles : mois et valeurs en 0,55 rem ; pour un public large (lecteurs âgés, écran vu de loin), montez à 0,7 rem et relevez le palier légendé en conséquence.
- Aucune interaction : rien au survol, rien à atteindre au clavier ; le graphique se lit, il ne se manipule pas.
Compatibilité navigateur
Requêtes de conteneur (Chrome 105, Firefox 110, Safari 16 d'après @mdn/browser-compat-data 8.1.8), SVG et quelques lignes de JavaScript. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : courbe à 200 px, barres à 320 px, mois et valeurs entiers sous et sur les barres à 460 et 640 px ; deux graphiques aux données différentes sur une page gardent chacun leur courbe.
Sans @container, seule la courbe s'affiche, à toute largeur. Sans JavaScript, les hauteurs, la courbe et le résumé écrits dans le HTML restent ceux de l'exemple : pensez à les mettre à jour à la main si vous changez les données.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0761-root">
<figure class="rcx-chart">
<figcaption class="rcx-title">…</figcaption>
<div class="rcx-plot" role="img" aria-label="…">
<svg class="rcx-spark" viewBox="0 0 200 40" preserveAspectRatio="none" aria-hidden="true">
<polyline class="rcx-spark-fill" points="…"/>
<polyline class="rcx-spark-line" points="…"/>
</svg>
<div class="rcx-bars" aria-hidden="true">
<div class="rcx-bar" data-value="12" style="height:48%"><span class="rcx-bar-label">Jan</span><span class="rcx-bar-value">12 k</span></div>
<!-- une barre par mois -->
</div>
</div>
</figure>
</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 |
|---|---|---|
Données (HTML — data-value, .rcx-bar-label, .rcx-bar-value) |
8 mois de 12 k à 25 k | Changez le nombre dans data-value et les deux textes ; le script recalcule hauteurs, courbe et résumé. Ajoutez ou retirez des barres librement. |
Paliers (CSS — @container rcx (min-width: 300px) et (min-width: 450px)) |
Courbe, barres à 300 px, barres légendées à 450 px | Avec douze mois, relevez le palier légendé (560 px environ) pour que les libellés ne se touchent pas. |
Couleurs des barres (CSS — .rcx-bar:nth-child(4n+1) à (4n)) |
#6366f1, #7c3aed, #8b5cf6, #a78bfa |
Une seule couleur pour un graphique sobre, ou mettez en avant le dernier mois avec .rcx-bar:last-child. |
Courbe (CSS — .rcx-spark polyline, .rcx-spark-fill) |
Trait #6366f1 de 2 px, aire à 15 % |
Retirez le remplissage (fill: none sur .rcx-spark-fill) pour une courbe seule ; l'épaisseur reste fixe quelle que soit la largeur. |
Hauteurs (CSS — .rcx-bars { height } par palier, .rcx-spark { height }) |
Courbe 40 px, barres 80 puis 100 px | Gardez la marge du palier légendé (margin: 18px 0 16px) : c'est elle qui laisse la place aux valeurs et aux mois. |
Titre (HTML — <figcaption class="rcx-title">) |
« Ventes mensuelles » | Le titre est aussi repris au début du résumé lu par les lecteurs d'écran. |
FAQ
data-value, le script trace la courbe avec les mêmes proportions que les barres. Les points écrits dans le HTML ne servent que si JavaScript est coupé.style.height de chaque barre (la courbe et le résumé lu ne suivront pas).
