chart-js

name	chart-js
description	Chart.js : bibliothèque JavaScript de graphiques responsives en Canvas — barres, lignes, radar, doughnut, scatter, bubble, mixed, animations, plugins (labels, zoom, annotation).
version	1.0.0
author	EVA
license	Privée EVA
platforms	["linux","macos","windows"]
metadata	{"EVA":{"tags":["chart.js","chartjs","dataviz","javascript","canvas","charts","responsive"],"homepage":"https://www.chartjs.org/","related_skills":["d3-js","plotly","dashboard-design"]}}
prerequisites	{"commands":["node","npm"],"npm_packages":["chart.js","chartjs-plugin-datalabels","chartjs-plugin-zoom"]}

Compétence Chart.js — Graphiques Canvas Responsives

Vue d'ensemble

Chart.js est la bibliothèque de graphiques en Canvas la plus populaire pour le web. Elle transforme des données en 8 types de graphiques prêts à l'emploi, responsives, animés et interactifs en une dizaine de lignes de JavaScript. Basée sur HTML5 Canvas, elle offre des performances élevées même avec des milliers de points.

Philosophie : "Un graphique parfait en 5 lignes, personnalisable à l'infini."

Quand Chart.js plutôt que D3 ? Chart.js est le bon choix quand on veut des graphiques standards (barres, lignes, radar) rapidement, sans re-inventer chaque pixel. D3 est nécessaire quand on a besoin d'un contrôle total (layouts custom, géo, force graphs).

---

Quand l'utiliser

Activez cette compétence lorsque l'utilisateur :

• Veut intégrer un graphique rapidement dans une page web.
• A besoin de graphiques responsives (redimensionnement automatique).
• Souhaite des animations fluides sans configuration complexe.
• Veut un export en PNG/JPEG natif.
• A besoin de plugins : datalabels, zoom, annotation, crosshair.

---

Prérequis

npm install chart.js

---

1. Configuration de Base

1.1 Premier Graphique

<canvas id="myChart" width="400" height="400"></canvas>

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

const ctx = document.getElementById('myChart').getContext('2d');

new Chart(ctx, {
  type: ,
  : {
    : [, , , , , ],
    : [{
      : ,
      : [, , , , , ],
      : ,
      : ,
    }]
  },
  : {
    : ,
    : ,
    : {
      : {
        : ,
        : 
      },
      : {
        : 
      }
    }
  }
});