React graph vis

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

Show, don't tell: Demo

Make sure to visit 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
• events: an object that has event name as keys and their callback as values

Usage

1import React from "react";
2import ReactDOM from "react-dom";
3import Graph from "react-graph-vis";
4
5import "./styles.css";
6// need to import the vis network css in order to show tooltip
7import "./network.css";
8
9function App() {
10  const graph = {
11    nodes: [
12      { id: 1, label: "Node 1", title: "node 1 tootip text" },
13      { id: 2, label: "Node 2", title: "node 2 tootip text" },
14      { id: 3, label: "Node 3", title: "node 3 tootip text" },
15      { id: 4, label: "Node 4", title: "node 4 tootip text" },
16      { id: 5, label: "Node 5", title: "node 5 tootip text" }
17    ],
18    edges: [
19      { from: 1, to: 2 },
20      { from: 1, to: 3 },
21      { from: 2, to: 4 },
22      { from: 2, to: 5 }
23    ]
24  };
25
26  const options = {
27    layout: {
28      hierarchical: true
29    },
30    edges: {
31      color: "#000000"
32    },
33    height: "500px"
34  };
35
36  const events = {
37    select: function(event) {
38      var { nodes, edges } = event;
39    }
40  };
41  return (
42    <Graph
43      graph={graph}
44      options={options}
45      events={events}
46      getNetwork={network => {
47        //  if you want access to vis.js network api you can set the state in a parent component using this property
48      }}
49    />
50  );
51}
52
53const rootElement = document.getElementById("root");
54ReactDOM.render(<App />, rootElement);
55

You can also check out the demo in the example folder.