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.
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 :
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.
Step to Run Application: Run the application using the following command from the root directory of the project:
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: