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

0 0 1 minute read

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!