How To Add Scatter Chart In ReactJs

In this article, we will learn how to add a Scatter Chart using google charts.

–First of all, we have to create a react application.

-Then import the below package into your project.

npm install --save react-google-charts

-Now open your app.js file and add the below code:

import React from 'react';
import './style.css';
import { Chart } from 'react-google-charts';

export default function App() {
  const data = [
    ['Year', 'Sales', 'Expenses'],
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2008', 1030, 540],
    ['2009', 1000, 400],
    ['2010', 1170, 460],
    ['2011', 660, 1120],
    ['2012', 1030, 540],
  ];
  const options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' },
  };
  return (
    <Chart
      chartType="ScatterChart"
      width="80%"
      height="400px"
      data={data}
      options={options}
    />
  );
}

By default, scatter charts use circles to represent the various components of your dataset. With the pointShape option, you can define several shapes.