How to create pie chart in react using 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. 

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: It will look like the following :

Project Structure

Example: Now write down the following code in the App.js file. Here, the App is our default component where we have written our code.

App.js

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/, you will see the following output:

Output