How to Create Recharts Scatter Graph Chart in React

In this simple tutorial, you will learn how to create a scatter chart component in React app with the help of Recharts library.

A scatter chart is also called a scatter graph or scatter plot. It is a handy data visualization tool that helps identify the relationship between variables or data. A scatter chart shows a collection of points plotted on a two-dimensional plane.

Ideally, In a scatter chart, data is plotted on the x-axis or horizontal axis; similarly, data is plotted vertically, aka y-axis.

Generically, Scatter charts are best suited to form relationships between two variables, such as correlation, causation, and clustering. Scatter graphs are beneficial when the quantity of data is hight.

Scatter charts are easy to draw and provide a seamless experience when it comes to: Understanding patterns, Identification of outliers, visualisation of tends and decision-making.

React Js Recharts Scatter Graph Example

We have defined certain steps, and we request you go through each step respectively to integrate the scatter graph in React environment.

• Step 1: Set Up React Project
• Step 2: Add Recharts Library
• Step 3: Build Function Component
• Step 4: Implement Scatter Chart in React
• Step 5: Update Main Component
• Step 6: Run Development Server

Set Up React Project

You will require to set up Node and npm package manager in your React development machine.

We want you to type the given command on the terminal and hit enter and let the new project created.

npx create-react-app my-react-app

Navigate to the project directory:

cd my-react-app

Add Recharts Library

To build a scatter chart in React using Recharts, you must install the package and import the ScatterChart and Scatter components from the library.

npm i recharts bootstrap

Bootstrap library is completely optional; if you can write custom CSS then avoid installing bootstrap.

Build Function Component

Here is very basic code example for creating a regular functional component to set up scatter chart using Recharts in React:

Update code in components/ReScatterChart.js file.

import React from "react";
import {
  ScatterChart,
  Scatter,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
function ReScatterChart() {
  return <div></div>;
}
export default ReScatterChart;

Implement Scatter Chart in React

Import the ScatterChart and Scatter components from the library in React component.

We also require certain data that needs to be drawn on the chart, followed by the x-axis and y-axis values.

Place below code within the components/ReScatterChart.js file.

import React from "react";
import {
  ScatterChart,
  Scatter,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
const data = [
  { x: 100, y: 200, z: 200 },
  { x: 120, y: 100, z: 260 },
  { x: 170, y: 300, z: 400 },
  { x: 140, y: 250, z: 280 },
  { x: 150, y: 400, z: 500 },
  { x: 110, y: 280, z: 200 },
];
function ReScatterChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <ScatterChart
        margin={{
          top: 20,
          right: 20,
          bottom: 20,
          left: 20,
        }}
      >
        <CartesianGrid />
        <XAxis type="number" dataKey="x" name="stature" unit="cm" />
        <YAxis type="number" dataKey="y" name="weight" unit="kg" />
        <Tooltip cursor={{ strokeDasharray: "3 3" }} />
        <Scatter name="A school" data={data} fill="#8884d8" />
      </ScatterChart>
    </ResponsiveContainer>
  );
}
export default ReScatterChart;

Update Main Component

We will register the new component in App.js. Ideally, App js is a root component of our React app.

After registering the component, we can check the UI through the browser and interact with the scatter chart component.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ReScatterChart from "./components/ReScatterChart";
function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Js Rechart Scatter Chart Example</h2>
      <ReScatterChart />
    </div>
  );
}
export default App;

Run Development Server

We have built the React application; next, use the npm start command and grant React app to load the scatter graph in the browser.

Start the development server by running the following command:

npm start

Test app in the browser using below URL:

http://localhost:3000

Also, on the terminal two testing url will be printed. You can use either of the url to view the app.

Summary

React is a prevalent JavaScript library used for creating user-friendly user interfaces. There are not one but many charting or graph libraries available for React; however, in this tutorial, we focused on Recharts library.

Recharts is a great charting library for React; it helped us to draw scatter graphs in React. On top of that, you can also create other charts using its wide range of Charting APIs.

Recharts offers tons of customizable options to design seamless charts, such as colours, axes, and tooltips,