React-Vis for Graph Rendering in a React application

Using React as a tool to develop an application is in and of itself a feat worth celebrating. Alongside understanding state management, life cycle methods, props and callback passing through props to alter state it becomes increasingly difficult to manage state. Redux comes into play and helps with state management by allowing us the ability to separate actions into files, reducers into a file and then dispatch and call state from these files anywhere throughout our application.

Like redux, react-vis is a library that works alongside react and is primarily used as a visualization library that allows you to plot or graph data. Its use can replace html5 canvas when rendering graphs because it adopts a style very similar to the implementation of React components. So if you have adopted the react way of building things that methodology of creating components remains when using react-vis. It has the potential to render graphs of varying complexity from a simple line graph to the mapping of geo location pins on maps based off the data provided.

In order to begin using react vis, cd into your React directory and run:

npm install react-vis

if you have not created a react app yet you can do so by running:

npx create-react-app my_project

and then cd into that directory.

React- vis’ documentation gives us a fairly simple example to play with a graph.

Change the default app component rendered by the create-react-app command to look like the following:

import {XYPlot, LineSeries} from 'react-vis';

class App extends Component {
  render() {
    const info = [
{x:0, y:1 },
{x:0, y:2},
{x:1, y:3 },
{x:0, y:4 },
{x:2, y:5 },
{x:0, y:6 },
{x:0, y:7 },
{x:0, y:8 },
{x:0, y:9 },
{x:0, y:10 },
{x:0, y:11 },
]
return (
      <div className="App">
        <XYPlot height={300} width={300} style={{backgroundColor: "yellow"}}>
          <LineSeries data={info} />
        </XYPlot>
      </div>
    );
  }
}

export default App;

We now gain access to the XYPlot component and LineSeries component within our App functions which can be seen in our browser after running

npm start

This would render the following image in your browser

The XYPlot component is one that is used by react Vis to “line charts, area charts, scatterplots, heat maps, etc with animations and different interactions between them.”- vis-docs

This component is essentially a wrapper that sets the canvas that will be used by other components to render lines or other components. The XYPlot component itself requires a height and width attribute to it that will specify the size of the canvas. Alongside these parameters there are others specified by the docs that can be used depending on your need.

Here are a list of a few that can be used:

width

height

className (optional)

hasTreeStructure (optional)

margin (optional)

Margin around the chart.

stackBy (optional)

style (optional)

onMouseLeave (optional)

onMouseMove (optional)

onMouseEnter (optional)

onMouseDown (optional)

onMouseUp (optional)

onTouchStart (optional)

onTouchMove (optional)

onTouchEnd (optional)

onTouchCancel (optional)

onWheel (optional)

animation (optional)

dontCheckIfEmpty (optional)

Every component can take a variety of different inputs and can be customized appropriately.

Some other components that can be used are Series, brushing and dragging, legends, crosshairs, grids, hint, axes, decorative-axes, gradients, flexible plots, borders.

You can always access the docs here in order to find the specific use-case for all components available.

After rendering your very first chart you are now able to pass in different component into your XY Plot and create different graphs to analyze data. Data itself can be imported from state if using redux provided the data key is an array of objects,

This tool paired up with raw data can therefore be used for analyzing data on your apps.