# Chart.js

[Chart.js](https://www.chartjs.org/) 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 :

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

Puis un canvas :

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

## Exemple simple

```html
<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 :

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

## Exemple avec plusieurs séries

Pratique pour comparer deux machines :

```javascript
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

```javascript
backgroundColor: '#2563eb'
```

### Coins arrondis

```javascript
borderRadius: 8
```

### Graphique responsive

```javascript
options: {
    responsive: true
}
```

### Afficher une légende

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

## Exemple complet minimal

```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](https://www.chartjs.org/docs/)

</body></html>