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

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:

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.

import React from "react";
import Paper from "@material-ui/core/Paper";
import { Chart,PieSeries,Title} from "@devexpress/dx-react-chart-material-ui";

const App = () => {
    // Sample data
    const data = [
        { argument: "Monday", value: 10 },
        { argument: "Tuesday", value: 40 },
        { argument: "Wednesday", value: 10 },
        { argument: "Thursday", value: 20 },
        { argument: "Friday", value: 20 },
    ];
    return (
        <Paper>
            <Chart data={data}>
                <PieSeries valueField="value" argumentField="argument" />
                <Title text="Studies per day" />
            </Chart>
        </Paper>
    );
};

export default App;

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