Skip to content
A react component to render nice graphs using vis.js
JavaScript HTML
Branch: master
Clone or download
crubier Merge pull request #76 from masayoshi-toku/modify-container-reference
Modify how to refer to container for test
Latest commit b86b4eb Nov 19, 2019

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows Update npmpublish.yml Oct 8, 2019
docs Update to 1.0.1 Sep 25, 2017
example Update to 1.0.1 Sep 25, 2017
lib Fix bug Nov 7, 2019
src Fix bug Nov 7, 2019
.babelrc Add preset-stage-3 to babelrc - bump viz to latest version - add watc… Jan 31, 2017
.gitignore gitignore, npmignore Feb 1, 2017
.npmignore gitignore, npmignore Feb 1, 2017
LICENSE Added files Apr 9, 2015
README.md Update README.md Feb 28, 2019
example.png update image Mar 13, 2016
package-lock.json updated dependency in source Sep 2, 2019
package.json Update package.json Oct 8, 2019

README.md

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.

A graph rendered by vis js

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

import React from "react";
import ReactDOM from "react-dom";
import Graph from "react-graph-vis";

import "./styles.css";
// need to import the vis network css in order to show tooltip
import "./network.css";

function App() {
  const graph = {
    nodes: [
      { id: 1, label: "Node 1", title: "node 1 tootip text" },
      { id: 2, label: "Node 2", title: "node 2 tootip text" },
      { id: 3, label: "Node 3", title: "node 3 tootip text" },
      { id: 4, label: "Node 4", title: "node 4 tootip text" },
      { id: 5, label: "Node 5", title: "node 5 tootip text" }
    ],
    edges: [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 2, to: 4 },
      { from: 2, to: 5 }
    ]
  };

  const options = {
    layout: {
      hierarchical: true
    },
    edges: {
      color: "#000000"
    },
    height: "500px"
  };

  const events = {
    select: function(event) {
      var { nodes, edges } = event;
    }
  };
  return (
    <Graph
      graph={graph}
      options={options}
      events={events}
      getNetwork={network => {
        //  if you want access to vis.js network api you can set the state in a parent component using this property
      }}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

You can’t perform that action at this time.