@keyvaluesystems/react-scatter-graph

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:

Prop	Description	Default
data: object[]	An array of x-y cordinates to render.	undefined
yMin?: number	Minimum value of Y - axis.	0
yMax: number	Maximum value of Y - axis.	undefuned
xMin?: number	Minimum value of X - axis.	0
xMax: number	Maximum value of X - axis.	undefuned
xInterval: number	Interval value X - axis.	undefuned
yInterval: number	Interval value Y - axis.	undefuned
graphHeight: number	Height of graph in pixel	undefuned
renderYLabel?: (arg: number | string): string	Render function for customizing Y axis label	undefined
renderXLabel?: (arg: number | string): string	Render function for customizing X axis label	undefined
scatterPointColor?: (arg: { x: number, y: number }): string	Function for customizing scatter point color. Based on the args, we can customise the color. Return value should be the color hash / string.	undefined