Le migliori librerie React per realizzare grafici

by Mauro Bianchi e Eleonora Genna - 15/04/2022
React

Le librerie di grafici permettono di semplificare il processo di creazione di diagrammi e altre visualizzazione dati all’interno di progetti web.
Qui presentiamo e analizziamo le librerie direttamente utilizzabili all’interno di progetti basati su React, la tecnologia che INMAGIK utilizza per lo sviluppo di applicativi e visualizzazioni dati sul web.
Le librerie open source selezionate sono quelle che meglio rispondono ai nostri criteri di efficienza, varietà e aggiornamento.

1. Recharts

Costruita con D3 e React, Recharts è una delle librerie più popolari. Permette di realizzare rapidamente visualizzazioni con componenti React disaccoppiabili e riutilizzabili. Supporta SVG in modo nativo e permette di customizzare i grafici introducendo componenti personalizzati. Questa libreria è la scelta ideale per progetti in cui non è richiesta una personalizzazione ricercata.

2. Visx

Airbnb ha unificato lo stack di grafici dell'azienda e ha creato Visx, un progetto che combina D3 e React. Con questo progetto puoi creare una libreria di grafici ottimizzati per il tuo caso d'uso. Tra i vari vantaggi c'è la dimensione ridotta dei pacchetti e la possibilità di implementare qualsiasi tema o stile. I suoi componenti di basso livello consentono di creare progetti con grandi possibilità di personalizzazione.

3. Nivo

Basato su D3, Nivo fornisce componenti React per creare data visualization semplici e personalizzabili. Questa è una delle poche librerie che fornisce capacità di rendering lato server e grafici completamente dichiarativi. Interessante la possibilità di utilizzare, per alcuni grafici, una modalità di rendering basata su html e canvas, e non solo basata su svg. Nivo supporta anche movimento e transizioni grazie a React Motion. Per finire, Nivo ha uno stile di base molto definito e una grande varietà di grafici originali, funnel, bullet, choropleth map e voronoi. Insomma, da mappe a reti, Nivo tocca tutti gli aspetti della data visualization.

4. Victory

Una raccolta di componenti grafici modulari per React e React Native. Victory ti permette di creare grafici con stili e comportamenti personalizzabili. Utilizzando le stesse API per il web e le applicazioni React Native puoi creare facilmente grafiche multipiattaforma. In generale, ha una discreta varietà di grafici e uno stile neutro pensato per essere personalizzato.

5. React-Vis

React e user friendly. React-Vis è una libreria creata per supportare i numerosi strumenti interni di Uber. Si è poi evoluta in strumento per creare grafici complessi e customizzabili. Propone un’ampia scelta, dai grafici ad area alle mappe ad albero. Le animazioni sono supportate da React Motion.


Librerie wrapper

6. React Google Charts

React Google Charts è la libreria React per i grafici basati sulle API di visualizzazione dati Google. Tra i grafici proposti troviamo le tabelle, grandi assenti nelle altre librerie.

7. React Plotly

React-Plotly fornisce i componenti necessari per semplificare l'utilizzo della popolare libreria javascript plotly.js all’interno di progetti React. La categorizzazione dei numerosi grafici si basa su settori specifici: statistica, finanza, scienza, 3D, mappe. Ha una doppia licenza, con possibilità di utilizzo gratuito della versione open source e con una versione a pagamento che include servizi aggiuntivi.

8. React-Chartist

Libreria per grafici semplici e responsive. React-Chartist fornisce un componente per semplificare l'utilizzo della popolare libreria javascript chartist.js all’interno di progetti React. Presenta un numero contenuto di grafici ma con variazioni molto specializzate di line chart, pie chart e bar chart.