In this shot, we will go over how to display data with a doughnut and pie chart through the React npm
package chartjs-2
, which is very easy to use and extremely useful when it comes to visual representation of your data.
Further information about the
react-chartjs-2
package can be found here.
Let’s begin by creating a new React app with the following command:
npx create-react-app react_charts_app
After the app is created, we have to add the following command in the terminal of our app to install the chart.js
dependency:
npm i react-chartjs-2 chart.js
Now, we will create a components
folder in the src directory of our app and create two files there:
These are the two files to which we will write all the code to display the data in the form of graphs.
Let’s start with Doughnut.js and create an empty functional component. Don’t forget to import the Doughnut
component from react-chartjs-2
at the very top of your file.
import {Doughnut} from 'react-chartjs-2';
function DoughnutChart() {
return (
<div>
<h1>Creating a Doughnut Chart</h1>
</div>
)
}
export default DoughnutChart
Now, we will add some data to form the doughnut. We need to define a data object that contains the labels for our graph and define values, borders, and background colors to form the slices of the doughnut, as follows.
const data = {
labels: ['Mon','Tue','Wed','Thurs','Fri'],
datasets: [
{
label: 'Attendance for Week 1',
data: [25,24,25,25,3],
borderColor: ['rgba(255,206,86,0.2)'],
backgroundColor: ['rgba(232,99,132,1)',
'rgba(232,211,6,1)',
'rgba(54,162,235,1)',
'rgba(255,159,64,1)',
'rgba(153,102,255,1)' ],
pointBackgroundColor: 'rgba(255,206,86,0.2)',
}
]
}
We can add further options to our graph like so:
const options = {
plugins: {
title: {
display: true,
text: 'Doughnut Chart',
color:'blue',
font: {
size:34
},
padding:{
top:30,
bottom:30
},
responsive:true,
animation:{
animateScale: true,
}
}
}
}
These options are explained below.
title
: corresponds to the heading of your graph.color
: corresponds to the font color of the title text.font size
: corresponds to the size of the title.padding
: corresponds to the padding on the top/bottom of the title.responsive:true
: makes our graph appear nice on different devices.animateScale:true
: gives a cool animation effect when the graph loads.Now, we will call the Doughnut
component in the return statement and pass both the data
and options
properties to see the chart.js
magic:
return (
<div>
<Doughnut data={data} options={options} />
</div>
)
We also need to call the Doughnut
component in the App.js file:
import './App.css';
import DoughnutChart from './components/Doughnut'
function App() {
return (
<div className="App">
<div className="container">
<DoughnutChart />
</div>
</div>
);
}
export default App;
You can now run the npm
command to start to see the output of your graph.
Creating a pie chart is similar to how you create the doughnut chart. Simply replace the Doughnut name with Pie.
The complete code for this app can be found here.