Article technique qui intéressera les développeurs React-native.

Dernièrement, j’ai du réaliser un graphique en bâton (bar chart) pour un projet, j’ai regardé si des libraries faisaient des choses plutôt jolies, mais j’ai été assez déçu je suis tombé sur des libraries compliqué ou alors qui rendait le graphique moche.

De plus j’avait comme contrainte de gérer automatique la largeur/hauteur du graphique, et je dois pouvoir cliqué sur le graphique pour avoir plus de détails.

Je me suis donc lancé dans la réalisation de mon propre graphique en batons que j’ai publié en open-source sur GitHub pour les autres développeurs.

Je vous explique comment je suis arrivé a ce résultat :

1. Choisir la meilleur solution technique pour faire un graphique.

   Pas mal de solutions sur GitHub utilisent la libraries D3js, ou alors des libraries pour utiliser du SVG, pour ma faire j’ai choisi CSS avec le Flexbox layout.

   Avantage : Je n’ai aucun besoin de libraries et la facilité d’utilisation de Flexbox va bien m’aider pour la partie responsive. !

2. Gérer le responsive

3. Penser à l’interactivité

Demo

Tu peux directement tester le composant react-native-line-chart via Expo :

https://expo.io/@julienkermarec/react-native-bar-chart

Code source :

Tout le projet est disponible sur GitHub :

https://github.com/julienkermarec/react-native-line-chart