https://github.com/anishmprasad/vis-react

Data visualization library based on vis.js
https://github.com/anishmprasad/vis-react

graph hammerjs knowledge-graph network-graph react reactjs visjs

Last synced: about 1 month ago
JSON representation

Data visualization library based on vis.js

• Host: GitHub
• URL: https://github.com/anishmprasad/vis-react
• Owner: anishmprasad
• License: mit
• Created: 2017-07-23T08:34:15.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-16T17:46:15.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T13:18:46.903Z (2 months ago)
• Topics: graph, hammerjs, knowledge-graph, network-graph, react, reactjs, visjs
• Size: 711 KB
• Stars: 28
• Watchers: 3
• Forks: 7
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vis-react

A React component to display beautiful network graphs using vis.js

Make sure to visit [visjs.org](http://visjs.org) for more info.

Rendered graphs are scrollable, zoomable, retina ready, dynamic, and switch layout on double click.

Due to the imperative nature of vis.js, updating graph properties causes complete redraw of graph and completely porting it to React is a big project itself!

This component takes three vis.js configuration objects as properties:

-   graph: contains two arrays { edges, nodes }

-   options: normal vis.js options as described [here](http://visjs.org/docs/network/#options)

-   events: an object that has [event name](http://visjs.org/docs/network/#Events) as keys and their callback as values

### Installation

```

// with npm

$ npm install vis-react --save

// with yarn

$ yarn add vis-react

```

## Load

To use a component, include the javascript and css files of vis in your root html:

```html

	

		

		

	

	

		

			// ... load a visualization

		

	

```

or load vis.js using require.js. Note that vis.css must be loaded too.

# Usage

```javascript

import Graph from 'vis-react';

var graph = {

	nodes: [

		{ id: 1, label: 'Node 1' },

		{ id: 2, label: 'Node 2' },

		{ id: 3, label: 'Node 3' },

		{ id: 4, label: 'Node 4' },

		{ id: 5, label: 'Node 5' }

	],

	edges: [

		{ from: 1, to: 2 },

		{ from: 1, to: 3 },

		{ from: 2, to: 4 },

		{ from: 2, to: 5 }

	]

};

var options = {

	layout: {

		hierarchical: true

	},

	edges: {

		color: '#000000'

	},

	interaction: { hoverEdges: true }

};

var events = {

	select: function(event) {

		var { nodes, edges } = event;

	}

};

React.render(

	 (this.vis = vis)}

	/>,

	document.body

);

```

Yes, it's really all you need to get started as you can see in this live and interactive demo:

[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/3vvy7xqo9m)

### Props

| Name       | Type     | Required | Description     |

| ---------- | -------- | -------- | --------------- |

| graph      | `object` | `true`   | Nodes and Edges |

| options    | `object` | `true`   | Options         |

| events     | `object` | `true`   | Events callback |

| style      | `object` | `false`  | Custom styles   |

| getNetwork | `func`   | `false`  | Network nodes   |

| getNodes   | `func`   | `false`  | All nodes       |

| vis        | `object` | `false`  | vis instance    |

### Demo

-   [anish.m.prasad.com](https://anishmprasad.com/opensource/vis-react)

-   [anishmprasad.github.io](https://anishmprasad.github.io/opensource/vis-react)

-   [codesandbox.io](https://codesandbox.io/embed/3vvy7xqo9m)

### License

MIT