Chart.js — Fondamenti · Marco Consiglio

🗺️ Cos'è Chart.js — grafici disegnati sul canvas HTML

Chart.js è una libreria JavaScript che disegna grafici (a barre, a torta, a linee) su un elemento <canvas> HTML — invece di costruire manualmente rettangoli e cerchi con la Canvas API nativa, si fornisce a Chart.js un elenco di numeri (dataset) e una configurazione, e la libreria genera automaticamente il disegno.

🎯 Da dove si parte: serve conoscere JavaScript di base (variabili, oggetti, array — vedi guide JavaScript Basi/Oggetti/Array) e HTML elementare. Non serve conoscenza pregressa di grafica o Canvas API.

⚙️ Includere Chart.js e preparare il canvas

<head> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body>  <canvas id="mioGrafico"></canvas> <script> const ctx = document.getElementById('mioGrafico'); new Chart(ctx, { // configurazione del grafico (Passi 3-5) }); </script> </body>

💡 document.getElementById('mioGrafico') recupera l'elemento <canvas> (lo stesso metodo già visto nelle guide JavaScript DOM/Eventi) — Chart.js prende quell'elemento e lo usa come "tela" su cui disegnare.

📊 Tipi di grafico — la proprietà "type"

new Chart(ctx, { type: 'bar', // grafico a barre data: { /* Passo 4 */ } });

Valore type	Tipo di grafico	Uso tipico
`bar`	Barre verticali	Confrontare valori tra categorie diverse
`line`	Linee	Mostrare un andamento nel tempo (vendite mensili)
`pie`	Torta	Mostrare proporzioni di un totale (quota di mercato)
`doughnut`	Ciambella (torta con foro centrale)	Variante estetica della torta
`radar`	Radar/ragnatela	Confrontare più variabili su assi diversi (es. competenze)

Anteprima concettuale: bar vs pie

💡 Cambiare il grafico da barre a torta richiede SOLO modificare type: 'pie' — la struttura del data (Passo 4) resta quasi identica, un vantaggio pratico per sperimentare rapidamente quale visualizzazione comunica meglio i propri dati.

📦 Dataset — i dati effettivi da visualizzare

new Chart(ctx, { type: 'bar', data: { labels: ['Gennaio', 'Febbraio', 'Marzo'], // etichette sull'asse orizzontale datasets: [{ label: 'Vendite 2026', data: [120, 190, 150], // un valore per ogni etichetta, nello stesso ordine backgroundColor: 'rgba(255, 99, 132, 0.6)' }] } });

⚠️ L'array labels e ogni array data dentro datasets devono avere la STESSA LUNGHEZZA e lo stesso ORDINE: il primo valore di data corrisponde alla prima etichetta, il secondo alla seconda, e così via — un disallineamento produce un grafico con dati associati alle etichette sbagliate.

✅ datasets è un ARRAY: si possono aggiungere PIÙ dataset nello stesso grafico (es. "Vendite 2025" e "Vendite 2026" sullo stesso grafico a barre) semplicemente aggiungendo un secondo oggetto all'array.

🎛️ Opzioni di configurazione — personalizzare titolo, legenda, assi

new Chart(ctx, { type: 'bar', data: { /* Passo 4 */ }, options: { responsive: true, plugins: { title: { display: true, text: 'Vendite mensili 2026' }, legend: { position: 'bottom' } }, scales: { y: { beginAtZero: true // l'asse verticale parte sempre da 0 } } } });

💡 scales.y.beginAtZero: true è importante per l'onestà visiva di un grafico: senza questa opzione, Chart.js potrebbe far partire l'asse verticale da un valore diverso da 0, esagerando visivamente le differenze tra le barre — una buona pratica da ricordare sempre nei grafici a barre.

📱 Responsive — grafici che si adattano allo schermo

<div style="position: relative; height: 300px; width: 100%;"> <canvas id="mioGrafico"></canvas> </div> <script> new Chart(ctx, { // ... options: { responsive: true, maintainAspectRatio: false // permette di controllare l'altezza tramite CSS del contenitore } }); </script>

⚠️ responsive: true da solo non basta per controllare l'ALTEZZA del grafico su schermi diversi: serve avvolgere il <canvas> in un contenitore con altezza fissata via CSS E impostare maintainAspectRatio: false, altrimenti Chart.js mantiene sempre lo stesso rapporto larghezza/altezza indipendentemente dal contenitore.

🧩 Applicazioni tipiche

Tipologia	Uso tipico
Dashboard aziendali	Grafici di vendite, KPI, andamenti mensili in pannelli amministrativi
Report interattivi	Presentazioni dati con grafici che rispondono al passaggio del mouse (tooltip integrati)
App con dati utente	Grafici di progresso personale, statistiche di utilizzo in app fitness/produttività

🎓 Esercitazioni pratiche

Grafico a barre delle vendite mensili

Crea un grafico a barre con 6 mesi come etichette e valori di vendita a scelta, includendo titolo e beginAtZero: true.

⏱ 20 min📦 1 file HTML💻 Individuale

Confronto tra due anni con doppio dataset

Estendi l'esercizio 1 aggiungendo un secondo dataset ("Vendite 2025") sullo stesso grafico, con colore diverso, verificando che la legenda distingua correttamente le due serie.

⏱ 20 min📦 1 file HTML💻 Individuale

Grafico a torta responsive in un contenitore fisso

Crea un grafico a torta con 4 categorie, avvolto in un div con altezza fissata via CSS, verificando responsive: true e maintainAspectRatio: false funzionino correttamente ridimensionando la finestra.

⏱ 20 min📦 1 file HTML💻 Individuale

Chart.js — Fondamenti per chi parte da zero

Report Quiz

🎓 Attestato di Competenze sbloccato!