How To Create Charts In React With Database

In this tutorial, we will use the Chart.js library to display the charts. We will discuss two charts in this tutorial. How To Create Charts In React With Database.

I have used JSON Server for data so you can download JSON Server using below command. See more details about JSON Serve https://www.npmjs.com/package/json-server

npm install -g json-server

Start JSON Server using below command in terminal

json-server --watch db.json

You can put your JSON Folder anywhere in your local machine because We will call JSON Data using url http://localhost:3000/countries.

I will use the Axios library to send an AJAX request to the JSON Server. Axios is a promise-based javascript library. You can install Axios using npm install axios or yarn add axios.

Add Chartjs Library

Now, we can add the chartjs library to react js by typing the following command.

yarn add react-chartjs-2 chart.js

Also install bootstrap for responsive bar chart using this command npm install bootstrap or yarn add bootstrap

Now We will see a coding part from here .

Define a React Component to create Chart

Go to the src  >> components folder and create a new file called BarChartComponent.js.

This file is created for the BarChart.

GraphChart,js

import react from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {useState,useEffect} from 'react';
import axios from 'axios';
import {Bar} from 'react-chartjs-2';

function GraphChart()
{
  const[graph,setGraph]=useState([]);
  
  const[getdata,setGetData]=useState([]);


  const countryDetail = async () => {
    axios.get("http://localhost:3000/countries")
   
     .then(response => {
        setGetData(response.data);
     });
    
   }
   useEffect(() => {
    countryDetail();
  }, []);

 
  const selectChart = (e) =>
  {   
    axios.get(`http://localhost:3000/countries`)
     .then(res => {
      const countryData = res.data;
      let countryName = [];
      let budgetName = [];
      countryData.forEach(element => {
        countryName.push(element.Country);
        budgetName.push(element.budget);
       });
        setGraph({
            labels: countryName,
            datasets: [
              {
                label: 'In Billions Dollar',
                backgroundColor:[
                    'green',
                    'red',
                    'blue',
                    '#FFBF00',
                    '#DE3163',
                    'orange',
                    '#40E0D0',
                    '#6495ED',
                    '#CCCCFF',
                    '#FFBF00',
                    '#DE3163',
                    '#9FE2BF',
                    '#CD5C5C'
                 ],
                borderWidth:0,
                data: budgetName
              }
             ]
        });
      });
     
  }
  useEffect(() => {
    selectChart();
  }, []);
  
  return(
     <div className="container">
        <h4 className="text-center text-primary mt-2 mb-3">Graph Chart in ReactJS</h4> 
        <h6 className="text-center text-success mt-2 mb-3">Country By Defence Budget</h6> 
        <div className="row mt-3">
           <div className="col-sm-3">
           
              <div className=""> 
               <table class=" table-bordered graphTable ">
               
                <tr>
                    <th>Country</th>
                    <th>Budget</th>
                </tr> 
                  { getdata.map((name)=>
                    <tr>
                      <td>{name.Country}</td>
                      <td>${name.budget}</td>
                    </tr>                  
                 )}   
               </table>     
             </div>
           </div>     
           <div className="col-sm-9">
           <Bar
             data={graph}
                options={{
                    title:{
                      display:true,
                      text:'Average Rainfall per month',
                      fontSize:20
                    },
                    legend:{
                      display:true,
                      position:'right'
                    }
                }}
                />
            </div>
            
        </div>     
     </div>    
    )
}
export default GraphChart;

Now We call GraphChart.js file inside our App.js file

App.js

import './App.css';
import GraphChart from './GraphChart'

function App() {
  return (
    <div className="App">
          <GraphChart/>
    </div>
  );
}

export default App;

Now run the project in the browser : http://localhost:3001/ You can set PORT using  “start”: “SET PORT=3001 && react-scripts start”, in Package.json file .

Download compete Source Code : React Graph Chart

Please Read our more tutorials on ReactJS and download the Projects

Form Validation in Reactjs,

How to create barcodes in ReactJS,

ReactJs Food Recipe Web App

Comments 10

Leave a Reply

Your email address will not be published. Required fields are marked *

➤