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
Hi,
I followed same thing but for me I didnt get the Bar chart on UI.
Any thing I missed? same thing I followed.
Jithu Did u download the code ??
Make sure your JSON Server is on…Other wise You get Chart data…Because the records are store in JSON Server folder db.json
your code is fine and i follow your code but can not dislpay the chart (UI)
Please Mail me the Screen short of the error at dysengg252@gmail.com
can i convert in from bar to line chart
Yes It is upto you
ask request for download code
Already given
Download now