Creating Graph in React

Question

I am having tough time understanding how I could create Graphs in React (this is first time I am working on it)

Can someone help me by sharing which library are you using and how would you use it to plot 3 data set which looks something like this in a single graph

This would be how my data set look.

(3) [{…}, {…}, {…}]
0:{id: "SAMPLE_#SPMJXVC_1_2", x: Array(963), y: Array(963)}
1: {id: "SAMPLE_#SPMJXVC_1_3", x: Array(964), y: Array(964)}
2: {id: "SAMPLE_#SPMJXVC_1_1", x: Array(954), y: Array(954)}

Answer 1

Chart.js is a very popular library for creating Javascript charts.

There is a wrapper that makes Chart.js easy to use in React: https://github.com/jerairrest/react-chartjs-2

If you don't want to use that, you can read this article for more ideas: https://www.overloop.io/blog/2018/6/19/top-5-react-chart-libraries

If you decide to use this react-chartjs-2 package then in React you'd install the package and then follow the instructions in their github. For a scatter plot you have to setup the data object and then simply render <Scatter data={data} />

Here is their full example I took from their site:

import React from 'react';
import {Scatter} from 'react-chartjs-2';

const data = {
  labels: ['Scatter'],
  datasets: [
    {
      label: 'My First dataset',
      fill: false,
      backgroundColor: 'rgba(75,192,192,0.4)',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [
        { x: 65, y: 75 },
        { x: 59, y: 49 },
        { x: 80, y: 90 },
        { x: 81, y: 29 },
        { x: 56, y: 36 },
        { x: 55, y: 25 },
        { x: 40, y: 18 },
      ]
    }
  ]
};

export default React.createClass({
  displayName: 'ScatterExample',

  render() {
    return (
      <div>
        <h2>Scatter Example</h2>
        <Scatter data={data} />
      </div>
    );
  }
});