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:
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:
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.
Javascript
import React from "react" ;
import Paper from "@material-ui/core/Paper" ;
import { Chart,PieSeries,Title} from "@devexpress/dx-react-chart-material-ui" ;
const App = () => {
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
Output
Last Updated :
04 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...