Recharts, Chart.js, Nivo, Victory, visx ed ECharts a confronto costruendo in ognuna lo stesso grafico a barre, con codice da copiare e dimensioni del bundle misurate. Scegli la libreria di grafici React giusta.
Per la maggior parte delle dashboard React, Recharts è il modo più rapido per iniziare e Chart.js offre un bundle più piccolo disegnato su canvas. Scegli visx per design completamente personalizzati con la dimensione minima, Nivo per impostazioni predefinite curate, Victory se punti anche a React Native ed ECharts per grafici molto grandi o complessi. Abbiamo costruito lo stesso grafico in ognuna e lo abbiamo misurato.
In breve
Ogni libreria qui sotto disegna lo stesso grafico a barre di sei mesi a partire dagli stessi dati. Abbiamo creato un bundle separato per ciascuna e misurato il risultato, così la tabella delle dimensioni confronta elementi equivalenti. L'esempio con Recharts gira anche dal vivo in questa pagina.
Dipende dal lavoro. Recharts è adatta alle dashboard tipiche, Chart.js a molti dati con un bundle piccolo, visx ai design su misura ed ECharts ai grafici complessi e ricchi di dati. La tabella delle dimensioni qui mostra il costo di ciascuna.
Recharts è più naturale in React perché i grafici sono componenti e vengono renderizzati come SVG che puoi stilizzare. Chart.js disegna su canvas, gestisce bene molti punti e nel nostro test pesava meno della metà.
Sì. Tutte e sei sono open source: Recharts, Chart.js, Nivo, Victory e visx con licenza MIT, ed ECharts con licenza Apache 2.0.
Disegnano nel browser e usano effect o ref, quindi il componente del grafico ha bisogno di "use client". I dati possono comunque essere recuperati in un Server Component e passati come props.
Misurato: un grafico a barre, minificato e compresso con gzip (React escluso)
In cosa si differenziano
Sei mesi di visite a un sito web. Ogni libreria qui sotto disegna lo stesso grafico a barre a partire da questi dati.
Composto da componenti che si leggono come il grafico: un asse x, un asse y, un tooltip, le barre. ResponsiveContainer lo fa espandere alla larghezza del genitore. Il grafico dal vivo accanto è proprio questo codice.
Chart.js supporta il tree shaking, quindi registri solo i pezzi che il grafico usa. Disegna su un canvas, che resta veloce con migliaia di punti ma ha bisogno di un proprio testo accessibile.
Un unico componente con molte props e impostazioni predefinite dall'aspetto curato. ResponsiveBar ha bisogno di un genitore con un'altezza impostata.
Componenti SVG componibili. La stessa API esiste per React Native (victory-native), utile quando web e app condividono il codice dei grafici.
Più che una libreria di grafici è un insieme di mattoncini: crei tu le scale e disegni tu le barre. Più codice, controllo totale, il bundle più piccolo nel nostro test.
Tutto è un unico oggetto di opzioni. Importare echarts-for-react porta con sé l'intero ECharts, che qui è il bundle più grande.
Importa da echarts/core e registra solo il grafico, i componenti e il renderer che usi. Nel nostro test questo ha ridotto il bundle di circa la metà.
Ti serve un posto dove mettere i grafici? Parti dai nostri
Grafico a barre delle visite mensili: gen 1,200, feb 1,650, mar 1,420, apr 2,100, mag 2,480, giu 2,310
Gen
Mar
Apr
Mag
Giu
Inizia gratis · Nessuna carta di credito richiesta