Chart.js

Chart.js est une bibliothèque JavaScript open source qui permet de faire facilement des graphiques dans une page HTML.

Licence : MIT

Installation rapide

Pas besoin d'installation pour un simple fichier HTML :

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Puis un canvas :

<canvas id="graphique"></canvas>

Exemple simple

<script>
new Chart(document.getElementById('graphique'), {
    type: 'bar',
    data: {
        labels: ['CPU 1', 'CPU 2', 'CPU 3'],
        datasets: [{
            label: 'Performance',
            data: [120, 180, 150]
        }]
    }
});
</script>

type définit le type de graphique :

bar       → barres
line      → courbe
pie       → camembert
doughnut  → donut
radar     → radar
scatter   → nuage de points

Exemple avec plusieurs séries

Pratique pour comparer deux machines :

datasets: [
    {
        label: 'Serveur A',
        data: [120, 180, 150]
    },
    {
        label: 'Serveur B',
        data: [100, 200, 170]
    }
]

Chaque dataset correspond à une série de données.

Quelques options utiles

Couleur des barres

backgroundColor: '#2563eb'

Coins arrondis

borderRadius: 8

Graphique responsive

options: {
    responsive: true
}

Afficher une légende

options: {
    plugins: {
        legend: {
            display: true
        }
    }
}

Exemple complet minimal

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>

<canvas id="cpu"></canvas>

<script>
new Chart(document.getElementById('cpu'), {
    type: 'bar',

    data: {
        labels: ['i7-6700 ×2', 'Xeon Silver 4216'],

        datasets: [{
            label: 'PassMark',
            data: [14100, 21085],
            backgroundColor: ['#2563eb', '#e87900'],
            borderRadius: 8
        }]
    },

    options: {
        responsive: true
    }
});
</script>

</body>
</html>

À retenir : labels contient les catégories, datasets contient les données, et options permet de personnaliser le graphique.

Documentation : chartjs.org/docs