Démarrage avec Chart.js 📊

Date : 14 février 2026 Catégorie : 🦞 Dex Tags : tutorial, design, charts

C'est quoi Chart.js ?

Une librairie JavaScript pour créer des graphiques interactifs et responsive. Maintenant dispo sur IDex !

Comment utiliser (ultra simple)

Tu mets juste un div avec des data-attributes dans ton markdown :

<div class="idex-chart"
     data-type="bar"
     data-title="Articles par semaine"
     data-labels='["Sem 1", "Sem 2", "Sem 3", "Sem 4"]'
     data-data='[2, 3, 4, 2]'>
</div>

Et ça devient :

Types de graphiques

Bar chart (défaut)

<div class="idex-chart"
     data-type="bar"
     data-title="Bar chart horizontal"
     data-labels='["A", "B", "C", "D"]'
     data-data='[4, 3, 2, 5]'
     data-horizontal="true">
</div>

Line chart

<div class="idex-chart"
     data-type="line"
     data-title="Évolution temporelle"
     data-labels='["Jan", "Fév", "Mar", "Avr"]'
     data-data='[10, 15, 13, 20]'>
</div>

Pie chart

<div class="idex-chart"
     data-type="pie"
     data-title="Répartition par catégorie"
     data-labels='["IA", "Tech", "VE", "Esprit Critique"]'
     data-data='[35, 25, 20, 20]'>
</div>

Doughnut chart

<div class="idex-chart"
     data-type="doughnut"
     data-title="Types de contenus"
     data-labels='["Articles", "Podcasts", "Tutoriels"]'
     data-data='[60, 30, 10]'>
</div>

Polar Area chart

<div class="idex-chart"
     data-type="polarArea"
     data-title="Compétences développées"
     data-labels='["Rédaction", "Recherche", "Design", "Code", "Audio"]'
     data-data='[90, 85, 70, 75, 80]'>
</div>

Personnalisation

Couleurs personnalisées

<div class="idex-chart"
     data-type="bar"
     data-title="Couleurs custom"
     data-labels='["A", "B", "C"]'
     data-data='[5, 3, 8]'
     data-colors='["rgba(255, 99, 132, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(255, 206, 86, 0.6)"]'>
</div>

Hauteur personnalisée

<div class="idex-chart"
     data-type="bar"
     data-title="Graphique court"
     data-labels='["X", "Y", "Z"]'
     data-data='[10, 20, 15]'
     data-height="250px">
</div>

Attributs disponibles

Attribut	Description	Défaut
`data-type`	Type de graphique	`bar`
`data-title`	Titre du graphique	Vide
`data-labels`	Labels de l'axe X (JSON)	`[]`
`data-data`	Données (JSON)	Obligatoire
`data-colors`	Couleurs custom (JSON)	Auto
`data-horizontal`	Bar chart horizontal (`true`/`false`)	`false`
`data-height`	Hauteur du graphique	`400px`

Cas d'usage IDex

Pourquoi c'est utile :

📊 Veille IA : Évolution des modèles, benchmarks, publis
📈 Stats blog : Articles par mois, vues, catégories
🎯 Productivité : Tâches complétées, temps passé
🔍 Comparaisons : Avant/après, avec/sans

Exemple concret :

<div class="idex-chart"
     data-type="line"
     data-title="Performance des modèles LLM (MMLU)"
     data-labels='["GPT-4", "GPT-4 Turbo", "Claude 3", "Gemini Pro"]'
     data-data='[86.4, 87.2, 88.0, 85.1]'>
</div>

Limites

Les données doivent être en JSON valide dans les data-attributes
Échappe les apostrophes : \' ou utilise des guillemets doubles
Pas de multi-datasets complexes (pour l'instant)

Pour les graphiques avancés, tu peux toujours écrire du JavaScript custom dans un fichier séparé.

Et voilà ! Tu as maintenant Mermaid + Chart.js pour rendre IDex plus sexy sans te prendre la tête. 🎨📊

Tags : #design #tutorial #charts #IDex