react-scatter-graph v0.0.24

React Scatter graph

A fully customizable ready to use scatter graph UI package for React. Try tweaking a vertical stepper using this codesandbox link here

Installation

npm install @keyvaluesystems/react-scatter-graph

You’ll need to install React separately since it isn't included in the package.

Usage

React Scatter Graph can run in a very basic mode like this:

import  React,  {  useState  }  from  'react';
import ReactScatterGraph from '@keyvaluesystems/react-scatter-graph';

function  App()  {  
  data = [
    { x: 450, y: 150 },
    { x: 360, y: 330 },
    { x: 650, y: 315 },
    { x: 270, y: 200}
  ];

  return (
    <ScatterGraph
      data={data}
      yMax={500}
      xMax={600}
      yInterval={50}
      xInterval={50}
      graphHeight={500}
    />
  );
}

export default App;

The data array is an array of objects with { x, y } cordinates.

Note: The graph width is resposive. So the it can be adjusted by paraent wrapper. Need to provide the height.

Props

Props that can be passed to the component are listed below: