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
