How to display data with a doughnut and pie graph in React

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:

• Doughnut.js
• PieChart.js

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.