Migliori chart blocks 2026: 75 sezioni verificate

Un blocco chart è una sezione con un grafico già montato e dati finti dentro. Il catalogo ne conta 75 da 2 registry, misurati il 1 novembre 2026 su /api/blocks/category/chart: la tabella mostra gli otto con più file, non i più belli.

Dove si rompe un grafico in produzione

Il primo cedimento è il contenitore. Un grafico dentro un'altezza fissa con larghezza percentuale funziona nella preview desktop e collassa su 320 pixel, dove le etichette dell'asse si sovrappongono o vengono tagliate. Il secondo è il colore: serie distinte solo per tinta diventano indistinguibili per chi non separa il rosso dal verde, e senza una tabella di appoggio il numero non è recuperabile.

Il terzo cedimento è il peso. La maggior parte di questi blocchi importa una libreria di grafici completa per disegnare una linea, e quella libreria finisce nel bundle della pagina di atterraggio. Il quarto è il tooltip: appare al passaggio del mouse e non risponde alla tastiera, quindi il valore esiste solo per chi usa un puntatore.

Cosa leggere nel record prima di scaricare

• La libreria di disegno importata: recharts, visx o SVG scritto a mano cambiano peso e controllo in modo diverso.
• Se il componente accetta una prop data o legge una costante interna: solo il primo caso si collega a un'API.
• L'altezza dichiarata: fissa in pixel è più prevedibile, proporzionale evita il taglio delle etichette su mobile.
• Se esiste una tabella nascosta o un riepilogo testuale con gli stessi valori, che è il requisito di accessibilità.
• La licenza del publisher, che per due registry significa due contratti diversi.

Il numero di file, in questa categoria, dice quasi tutto sulla separazione. Due file significano grafico e card che lo contiene: puoi cambiare la cornice senza toccare il disegno. Un file solo significa che il grafico e la sua intestazione sono lo stesso componente, e che ogni variante di layout richiede una copia.

Il limite che il catalogo non colma

Nessuno di questi 75 blocchi porta un adattatore di dati. Le serie sono costanti scritte nel file, e la scala dell'asse è calibrata su quei numeri: con un fatturato reale che varia di due ordini di grandezza la forma del grafico cambia e le etichette si accavallano. Il secondo limite è la licenza dichiarata, che copre il blocco ma non la libreria di disegno che importa.

La regola che evita il rifacimento

Se il grafico sta sopra la piega su mobile, pretendi una prop data, un'altezza fissa e una tabella di appoggio; altrimenti scegli un altro blocco. Se il numero è secondario, una sparkline dentro una card statistica costa un decimo del peso e comunque comunica la tendenza. La domanda da fare non è quale grafico sia più bello, ma quanti grafici la pagina deve disegnare contemporaneamente.

L'alternativa è disegnare a mano il caso semplice. Una linea con quaranta punti in SVG occupa poche righe, non importa nulla e si stampa correttamente. Il blocco conviene quando ti servono assi, legenda, tooltip e stati di caricamento già composti; non conviene quando il grafico è decorativo e nessuno legge i valori.

C'è poi la questione della stampa e dell'esportazione. Un grafico disegnato in SVG sopravvive alla stampa e al salvataggio in PDF; un grafico su tela no, perché la tela è un'immagine e perde definizione. Se il tuo lettore deve allegare il report a un'email, controlla prima come è disegnato il blocco: il formato di uscita è una decisione che si prende guardando il file, non la preview.

curl "https://ui.eneawork.it/api/blocks/category/chart?limit=10"

Le sezioni sono in /blocks/category/chart, i grafici singoli in /components/cat/chart e le icone di stato in /icons. La checklist di accessibilità è in componenti React accessibili, il peso di una libreria in bundle size di una UI library; il confronto tra grafico pronto e SVG scritto a mano è in copy-paste o headless.