Charts.css : Créer des graphiques en pur CSS

La plupart des développeurs frontend se tournent instinctivement vers Chart.js ou D3.js lorsqu’une maquette nécessite de la visualisation de données. C’est un choix raisonnable par défaut — jusqu’à ce que vous chargiez des centaines de kilooctets de JavaScript juste pour afficher un graphique à barres sur une page de documentation ou un tableau de bord simple. Charts.css propose un compromis différent : de la visualisation de données en pur CSS basée sur des tableaux HTML sémantiques, sans moteur de rendu JavaScript requis.

Voici comment cela fonctionne, ce qu’il fait bien, et où cela cesse d’avoir du sens.

Comment fonctionne Charts.css : des graphiques en tableaux HTML stylés avec CSS

Charts.css est un framework CSS qui transforme des éléments <table> standard en graphiques visuels à l’aide de classes utilitaires et de propriétés personnalisées CSS. Aucun JavaScript n’est impliqué dans le rendu. Le moteur de mise en page du navigateur effectue tout le travail visuel.

L’idée centrale est simple : vos données résident dans un véritable tableau HTML. Charts.css stylise ce tableau pour qu’il ressemble à un graphique. Cela signifie que les données sous-jacentes restent accessibles aux lecteurs d’écran et aux moteurs de recherche sans effort supplémentaire — bien que vous ayez toujours besoin d’un balisage approprié pour en tirer pleinement parti.

Installation

Via CDN :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">

Via npm :

npm install charts.css

Représenter les données avec les propriétés personnalisées CSS

Chaque cellule de données dans votre tableau utilise la propriété personnalisée --size pour représenter sa valeur sous forme de nombre entre 0 et 1. Cette valeur normalisée est ce que Charts.css utilise pour dimensionner l’élément visuel — une barre, un segment, un point.

Voici un exemple minimal de graphique à barres :

<table class="charts-css bar" style="height: 200px;">
  <caption>Inscriptions mensuelles</caption>
  <thead>
    <tr>
      <th scope="col">Mois</th>
      <th scope="col">Inscriptions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Janvier</th>
      <td style="--size: 0.4;">400</td>
    </tr>
    <tr>
      <th scope="row">Février</th>
      <td style="--size: 0.7;">700</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td style="--size: 1.0;">1000</td>
    </tr>
  </tbody>
</table>

La classe charts-css active le framework. La classe bar définit le type de graphique. La valeur --size sur chaque <td> contrôle proportionnellement la longueur de la barre.

Appliquer différents types de graphiques

Changer de type de graphique se résume à changer de classe. Charts.css prend en charge les graphiques à barres, en colonnes, en lignes, en aires, circulaires et quelques autres. La prise en charge des fonctionnalités varie — les graphiques à barres et en colonnes sont les plus aboutis, tandis que certains types offrent des options de personnalisation plus limitées.

<!-- Graphique en colonnes -->
<table class="charts-css column">

<!-- Graphique en lignes -->
<table class="charts-css line">

<!-- Graphique circulaire -->
<table class="charts-css pie">

Des classes utilitaires supplémentaires gèrent les étiquettes, les axes, l’espacement et l’affichage des données :

<table class="charts-css bar show-labels show-primary-axis data-spacing-10">

Accessibilité : réelle mais non automatique

Comme Charts.css utilise un véritable balisage <table>, les lecteurs d’écran peuvent accéder directement aux données brutes — un véritable avantage par rapport aux bibliothèques basées sur canvas ou SVG. Mais cela ne fonctionne que si vous écrivez correctement le tableau : incluez un <caption>, utilisez <th> avec les attributs scope appropriés, et assurez-vous que le contenu des cellules soit significatif. Le framework vous fournit la structure, mais l’accessibilité dépend toujours de votre balisage.

Quand les graphiques CSS ont du sens — et quand ils n’en ont pas

Charts.css est bien adapté pour :

• Les sites de documentation et pages statiques
• Les tableaux de bord simples avec des données rarement mises à jour
• Les rapports légers où la taille du bundle compte

Ce n’est pas le bon outil pour :

• Les graphiques interactifs avec infobulles, zoom ou événements de clic
• Les données en temps réel ou fréquemment mises à jour
• Les visualisations complexes comme les graphes de force ou les échelles personnalisées
• Les grands ensembles de données où un contrôle fin du rendu est important

Pour ces cas d’usage, les bibliothèques JavaScript existent pour de bonnes raisons.

Conclusion

Charts.css est un outil ciblé. Il fait une chose bien : transformer des données de tableaux HTML sémantiques en graphiques CSS lisibles sans déployer une seule ligne de logique de rendu JavaScript. Sa petite empreinte est difficile à contester pour des contextes statiques ou à faible interactivité. Gardez simplement des attentes claires — c’est un complément aux bibliothèques de graphiques JavaScript, pas un remplacement.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.