We’ll explore how to create dynamic and visually appealing pie charts in a React application by leveraging two powerful libraries: Material-UI and DevExpress.

DevExpress: DevExpress is a package for controlling and building the user interface of the Window, Mobile, and other applications.

Pie Charts: A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportions. It depicts a special chart that uses “pie slices”, where each sector shows the relative sizes of data. 

Prerequisites:

• NodeJS or NPM
• React JS
• Material UI

Steps for Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, install the required modules using the following command.

npm i --save @devexpress/dx-react-core @devexpress/dx-react-chart
npm install @material-ui/core
npm i --save @devexpress/dx-react-chart-material-ui

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@devexpress/dx-react-chart": "^4.0.6",
    "@devexpress/dx-react-chart-material-ui": "^4.0.6",
    "@devexpress/dx-react-core": "^4.0.6",
    "@material-ui/core": "^4.12.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000

Output