How to create scatter chart in React Bootstrap ?
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 = () => {
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
Last Updated :
01 Jul, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...