How to create pie chart in react using material UI and DevExpress ?

Last Updated : 23 Jul, 2025

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:

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:

👁 Image

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: