How To Represent Excel Data as Pie Chart in ReactJS?

In today's data-driven world, visualizing information is crucial for understanding trends and making informed decisions. Pie charts are a powerful tool for displaying the proportions of a whole, making them ideal for presenting Excel data in a clear and intuitive manner within a ReactJS application. This article provides an explanation on how to seamlessly transform Excel data into dynamic pie charts using ReactJS and Chart.js.

Prerequisites:

• NPM or NodeJS
• Code Editor
• ReactJs

Approach to represent Excel data in the form of Piechart

• Begin by creating a React functional component to handle file uploads and chart rendering.
• Utilize libraries such as xlsx for parsing Excel files and react-chartjs-2 for integrating Chart.js into React.
• Implement an <input type="file" /> element to enable users to upload Excel files directly.
• Utilize FileReader to read uploaded files and xlsx library to parse Excel data into JSON format.
• Extract relevant data (labels and values) from the parsed Excel data.
• Structure the data into Chart.js format, including datasets and labels required for pie chart visualization.
• Customize chart appearance and behavior using Chart.js options such as colors, tooltips, and legends.
• Render the pie chart dynamically within the React component, ensuring responsiveness and maintainability.
• Explore Chart.js plugins like chartjs-plugin-datalabels to add data labels inside pie slices for enhanced readability.
• Fine-tune plugin settings to match specific visualization requirements and improve user interaction.

Steps to implement piechart in react based on the excel data

Step 1: Create a react project app using following command.

npx create-react-app <-Project-Name->

Step 2: Navigate to the Project Directory by below command.

cd <-Project-Name->

Project Structure:

Step 3: Now, Install some dependencies that work with excel and piechart.

npm install chart.js chartjs-plugin-datalabels react-chartjs-2 xlsx

Updated dependencies

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "chart.js": "^4.4.3",
 "chartjs-plugin-datalabels": "^2.2.0",
 "react": "^18.3.1",
 "react-chartjs-2": "^5.2.0",
 "react-dom": "^18.3.1",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4",
 "xlsx": "^0.18.5"
 },

Step 4: Create ExcelToCharts.js file in components folder, and update the below code in that file.

Step 5: Now import ExcelToCharts.js component in App.js and some styling in App.css.

Format of the data in Excel to make piechart

Step 6: Run the react application using following command.

npm run start

Output

In this way, we can create piechart of any excel data, and even we can create multiple piechart if we have multiple columns in the excel sheet.