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.
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 { ArgumentAxis, ValueAxis, Chart, ScatterSeries, } from '@devexpress/dx-react-chart-material-ui'; const App = () => { // Sample data const data = [ { x: 1, y: 2 }, { x: 1.2, y: 3 }, { x: 1.3, y: 5 }, { x: 1.7, y: 4 }, { x: 1.9, y: 1 }, { x: 2, y: 2 }, { x: 2.3, y: 4 }, { x: 2.6, y: 3 }, { x: 2.9, y: 3 }, { x: 3.2, y: 1 }, { x: 3.5, y: 5 }, { x: 3.8, y: 4 }, { x: 4, y: 5 }, { x: 4.2, y: 3 }, { x: 4.4, y: 1 }, ]; return ( <Paper> <Chart data={data} > <ArgumentAxis /> <ValueAxis /> <ScatterSeries valueField="y" argumentField="x" /> </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
