chart.js – Grafici personalizzato con poche righe di codice

Tante varianti disponibili, animazioni automatizzate e personalizzazione a 360°. Queste caratteristiche rendono chart.js una delle soluzioni migliori per mostrare graficamente un set di dati. Proviamo a creare qualcosa con il set minimo di personalizzazioni necessarie, massimo risultato con poche righe di codice.

Procurarsi i sorgenti è semplice, con i CDN che trovi qui basta importare i file. Su GitHub puoi scaricare la versione completa o puoi integrarlo in un progetto che utilizza bower (bower install chart.js –save) o npm (npm install chart.js –save).

Iniziamo inserendo una canvas con tag “” in una pagina html base

Per far funzionare il grafico basta definire i dati e la scala in un documento JavaScript

E assemblare il tutto

 

Con qualche riga di CSS rendiamo tutto più presentabile

 

Questo è il risultato.

SU CODEPEN LA DEMO LIVE