Skip to content
Related Articles

Related Articles

Improve Article

How to create scatter chart in react using material UI and DevExpress ?

  • Last Updated : 19 Jul, 2021

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :