Comment Ajouter des graphiques à votre applications web REACT JS - Le Digital Avec Adama

Post Top Ad

Espace Disponible pour vos annonces

Comment Ajouter des graphiques à votre applications web REACT JS

Partagez



Hightchart est un package disponible sur npm permettant de faire afficher des graphiques sur votre application web, sur votre application faite avec REACT.

Dans cet article je vous expliquerai comment l'utiliser et ensuite comment faire agir du CSS sur ce composants

1-Installation du package

Tout d'abord installer le package avec cette commande npm:
npm i highcharts-react-official

Ensuite télécharger un autre package qui nécessaire à l'utilisation de Highchart.

C'est de Highchart qu'il s'agit :

npm i highcharts

Maintenant que tout est installé, vous pouvez procéder à l'intégration d'un graphe. Nous allons utiliser des données banales pour le test( exemple pareil à celui disponible sur le site npm)

Prenez un instant pour vous abonner à ma page



Importez les différents composants ou du moins packages

import Highcharts from 'hightcharts'
import Highcharts from 'hightcharts-react-official'

Ensuite insérez ce code à l'intérieur de votre fonction faisant appel à Highchart:
export default function example() {
const options = {
title: {
text: 'chart'
},
series: [{
data: [1, 2, 3]
}]
}
Le code précédent servira uniquement à définir vos différents paramètres. Faites appel à votre composant, à l'emplacement ou celui-ci doit s'afficher.
<HighchartsReact
highcharts={Highcharts}
options={options}
/>
2-Ajouter du CSS

Il peut arriver que vous ayez envie d'agir sur le CSS de votre graphique c'est-à-dire sur le CSS. Laissez-moi vous dire qu'avec HighChart, vous deviez le faire d'une autre manière : Vous aviez juste besoin d’insérer ce code et à l'intérieur du "style:{" , vous pouviez y mettre tous votre code:
containerProps={{ style: { height: "200px", marginRight:"50px" } }}

Ce qui donnera:

<HighchartsReact
highcharts={Highcharts}
options={options}
containerProps={{ style: { height: "200px", marginRight:"50px" } }}
/>


Si l'article vous a plu, je vous prie de laisser en commentaire vos impressions sur mon article, et je vous invite à vous abonner à ma page ci-dessous.


Aucun commentaire:

Publier un commentaire

>");

Post Bottom Ad

Espace Disponible pour vos annonces

Pages