How to create scatter chart in React Bootstrap ? Last Updated : 01 Jul, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report Scatter plots are used to observe relationship between variables and uses dots to represent the relationship between them. Scatter plots are widely used to represent relation among variables and how a change in one affects the other. 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. foldername, 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 install --save mdbreact react-chartjs-2 Step 4: Add Bootstrap CSS and fontawesome CSS to index.js. import '@fortawesome/fontawesome-free/css/all.min.css'; import 'bootstrap-css-only/css/bootstrap.min.css'; import 'mdbreact/dist/css/mdb.css'; Project Structure: It will look like the following. Project Structure Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code. App.js import React from "react"; import { MDBContainer } from "mdbreact"; import { Scatter } from "react-chartjs-2"; const App = () => { // Sample data const data = { datasets: [ { backgroundColor: 'green', label: 'projectile path', data: [ { x: 1, y: 19 }, { x: 2, y: 18.5 }, { x: 3, y: 17.6 }, { x: 4, y: 16.8 }, { x: 5, y: 14 }, { x: 6, y: 12 }, ] } ] } return ( <MDBContainer> <Scatter data={data} /> </MDBContainer> ); } 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 Comment More infoAdvertise with us Next Article How to Create Radar Chart using React Bootstrap ? M mishrapriyank17 Follow Improve Article Tags : ReactJS React-Bootstrap Similar Reads How to create line chart using react bootstrap ? Line charts are used to represent the relation between two data X and Y on a different axis. One of the axes of the plot represents the specific categories being compared, while the other axis represents the measured values corresponding to those categories. Creating React Application And Installing 2 min read How to create doughnut chart in React Bootstrap ? Doughnut charts are the modified version of Pie Charts with the area of center cut out. A doughnut is more concerned about the use of area of arcs to represent the information in the most effective manner instead of Pie chart which is more focused on comparing the proportion area between the slices. 2 min read How to Create Bar Chart using React Bootstrap ? A bar plot or bar chart is a graph that represents the category of data with rectangular bars with lengths and heights that is proportional to the values which they represent. The bar plots can be plotted horizontally or vertically. A bar chart describes the comparisons between the discrete categori 2 min read How to Create Radar Chart using React Bootstrap ? The radar chart is a chart or plot that consists of a sequence of equiangular spokes, called radii, with each spoke representing one of the variables. A radar chart is basically a graphical method of displaying data in the form of a two-dimensional chart of three or more quantitative variables that 2 min read How to draw a bubble chart in react bootstrap ? A bubble chart is a type of chart that displays three dimensions of data. Each entity with its triplet (x, y, r) of associated data is plotted as a disk that expresses two of the xy values through the diskâs xy location and the third through its size. PrerequisitesKnowledge of ReactBootstrap and Rea 2 min read How to create chart using bootstrap ? A chart in Bootstrap is a graphical representation for data visualization, in which the data is represented by symbols. The various types of charts like bar charts, line charts, pie charts, donut charts, etc are created with the help of Bootstrap. In other words, we can say that chart is a type of d 3 min read Like