How to create scatter 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.
Scatter Charts: A scatter chart is a set of dotted points to represent individual pieces of data in the horizontal and vertical axis. A graph in which the values of two variables are plotted along the X-axis and Y-axis, the pattern of the resulting points reveals a correlation between them.
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: